/* Admin Dashboard Styles - Professional Analytics Aesthetic */
/* Typography: Geist for data, system for UI */

@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* Override body styles when admin-dashboard is active */
body.admin-dashboard {
  background: var(--admin-bg-primary) !important;
  color: var(--admin-text-primary) !important;
  font-family: var(--admin-font-display) !important;
}

/* Override nav styles for dark theme */
body.admin-dashboard .nav-warm {
  background: var(--admin-bg-secondary) !important;
  border-bottom: 1px solid var(--admin-border-subtle) !important;
}

body.admin-dashboard .nav-logo-warm {
  color: var(--admin-text-primary) !important;
}

body.admin-dashboard .nav-link-warm {
  color: var(--admin-text-secondary) !important;
}

body.admin-dashboard .nav-link-warm:hover {
  color: var(--admin-text-primary) !important;
}

/* Override sidebar for dark theme */
body.admin-dashboard .card-warm {
  background: var(--admin-bg-secondary) !important;
  border: 1px solid var(--admin-border-subtle) !important;
  border-radius: 12px !important;
  padding: 1.25rem !important;
}

body.admin-dashboard .card-warm h3 {
  color: var(--admin-text-muted) !important;
}

body.admin-dashboard .card-warm nav a {
  color: var(--admin-text-secondary) !important;
}

body.admin-dashboard .card-warm nav a:hover {
  background: var(--admin-bg-tertiary) !important;
  color: var(--admin-text-primary) !important;
}

body.admin-dashboard .card-warm nav a.bg-amber-100 {
  background: rgba(59, 130, 246, 0.15) !important;
  color: var(--admin-accent-blue) !important;
}

/* Override main area */
body.admin-dashboard .page-warm {
  background: transparent !important;
}

/* Override alert/notice styles */
body.admin-dashboard .p-4.rounded-lg.mb-4 {
  background: var(--admin-bg-secondary) !important;
  border: 1px solid var(--admin-border-subtle) !important;
}

/* Admin badge in nav */
body.admin-dashboard .nav-warm span[style*="background: var(--color-purple-100)"] {
  background: rgba(168, 85, 247, 0.15) !important;
  color: #c084fc !important;
}

:root {
  /* Dashboard Color Palette */
  --admin-bg-primary: #0f0f12;
  --admin-bg-secondary: #18181b;
  --admin-bg-tertiary: #1f1f23;
  --admin-bg-elevated: #27272a;
  --admin-bg-hover: #2d2d32;

  --admin-border-subtle: rgba(255, 255, 255, 0.06);
  --admin-border-default: rgba(255, 255, 255, 0.1);
  --admin-border-strong: rgba(255, 255, 255, 0.15);

  --admin-text-primary: #fafafa;
  --admin-text-secondary: #a1a1aa;
  --admin-text-muted: #71717a;
  --admin-text-faint: #52525b;

  /* Accent Colors */
  --admin-accent-blue: #3b82f6;
  --admin-accent-green: #22c55e;
  --admin-accent-amber: #f59e0b;
  --admin-accent-red: #ef4444;
  --admin-accent-purple: #a855f7;
  --admin-accent-teal: #14b8a6;

  /* Status Colors with transparency */
  --status-active-bg: rgba(34, 197, 94, 0.12);
  --status-active-text: #4ade80;
  --status-active-border: rgba(34, 197, 94, 0.3);

  --status-ended-bg: rgba(113, 113, 122, 0.12);
  --status-ended-text: #a1a1aa;
  --status-ended-border: rgba(113, 113, 122, 0.3);

  --status-cancelled-bg: rgba(239, 68, 68, 0.12);
  --status-cancelled-text: #f87171;
  --status-cancelled-border: rgba(239, 68, 68, 0.3);

  /* Fonts */
  --admin-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --admin-font-mono: 'Geist Mono', ui-monospace, monospace;

  /* Shadows */
  --admin-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --admin-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --admin-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --admin-shadow-glow: 0 0 20px rgba(59, 130, 246, 0.15);

  /* Transitions */
  --admin-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --admin-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --admin-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dashboard Container */
.admin-dashboard {
  font-family: var(--admin-font-display);
  background: var(--admin-bg-primary);
  color: var(--admin-text-primary);
  min-height: 100vh;
}

/* Page Header */
.admin-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--admin-border-subtle);
}

.admin-page-title {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--admin-text-primary);
}

.admin-page-subtitle {
  font-size: 0.875rem;
  color: var(--admin-text-muted);
  margin-top: 0.25rem;
}

/* Statistics Cards Grid */
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

@media (max-width: 1024px) {
  .admin-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .admin-stats-grid {
    grid-template-columns: 1fr;
  }
}

.admin-stat-card {
  background: var(--admin-bg-secondary);
  border: 1px solid var(--admin-border-subtle);
  border-radius: 12px;
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
  transition: all var(--admin-transition-base);
}

.admin-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-color, var(--admin-accent-blue)), transparent);
  opacity: 0;
  transition: opacity var(--admin-transition-base);
}

.admin-stat-card:hover {
  border-color: var(--admin-border-default);
  transform: translateY(-2px);
  box-shadow: var(--admin-shadow-md);
}

.admin-stat-card:hover::before {
  opacity: 1;
}

.admin-stat-card--blue { --accent-color: var(--admin-accent-blue); }
.admin-stat-card--green { --accent-color: var(--admin-accent-green); }
.admin-stat-card--amber { --accent-color: var(--admin-accent-amber); }
.admin-stat-card--purple { --accent-color: var(--admin-accent-purple); }

.admin-stat-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--admin-text-muted);
  margin-bottom: 0.5rem;
}

.admin-stat-value {
  font-family: var(--admin-font-mono);
  font-size: 2rem;
  font-weight: 600;
  color: var(--admin-text-primary);
  line-height: 1;
}

.admin-stat-change {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  margin-top: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

.admin-stat-change--up {
  background: var(--status-active-bg);
  color: var(--status-active-text);
}

.admin-stat-change--down {
  background: var(--status-cancelled-bg);
  color: var(--status-cancelled-text);
}

.admin-stat-icon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  color: var(--accent-color, var(--admin-text-muted));
}

/* Filter Panel */
.admin-filter-panel {
  background: var(--admin-bg-secondary);
  border: 1px solid var(--admin-border-subtle);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.admin-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
}

.admin-filter-group {
  flex: 1;
  min-width: 180px;
}

.admin-filter-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--admin-text-muted);
  margin-bottom: 0.5rem;
}

.admin-filter-input,
.admin-filter-select {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  font-family: var(--admin-font-display);
  color: var(--admin-text-primary);
  background: var(--admin-bg-tertiary);
  border: 1px solid var(--admin-border-default);
  border-radius: 8px;
  transition: all var(--admin-transition-fast);
}

.admin-filter-input:focus,
.admin-filter-select:focus {
  outline: none;
  border-color: var(--admin-accent-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.admin-filter-input::placeholder {
  color: var(--admin-text-faint);
}

.admin-filter-actions {
  display: flex;
  gap: 0.75rem;
}

/* Data Table */
.admin-table-container {
  background: var(--admin-bg-secondary);
  border: 1px solid var(--admin-border-subtle);
  border-radius: 12px;
  overflow: hidden;
}

.admin-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--admin-border-subtle);
  background: var(--admin-bg-tertiary);
}

.admin-table-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--admin-text-primary);
}

.admin-table-count {
  font-family: var(--admin-font-mono);
  font-size: 0.75rem;
  color: var(--admin-text-muted);
  padding: 0.25rem 0.625rem;
  background: var(--admin-bg-elevated);
  border-radius: 4px;
}

.admin-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.admin-table thead {
  background: var(--admin-bg-tertiary);
}

.admin-table th {
  padding: 0.875rem 1rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--admin-text-muted);
  text-align: left;
  border-bottom: 1px solid var(--admin-border-subtle);
  white-space: nowrap;
}

.admin-table th:first-child {
  padding-left: 1.5rem;
}

.admin-table th:last-child {
  padding-right: 1.5rem;
  text-align: right;
}

.admin-table tbody tr {
  transition: background var(--admin-transition-fast);
}

.admin-table tbody tr:hover {
  background: var(--admin-bg-hover);
}

.admin-table tbody tr:not(:last-child) {
  border-bottom: 1px solid var(--admin-border-subtle);
}

.admin-table td {
  padding: 1rem;
  font-size: 0.875rem;
  color: var(--admin-text-secondary);
  vertical-align: middle;
  border-bottom: 1px solid var(--admin-border-subtle);
}

.admin-table td:first-child {
  padding-left: 1.5rem;
}

.admin-table td:last-child {
  padding-right: 1.5rem;
}

/* Table Cell Components */
.admin-cell-primary {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.admin-cell-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--admin-bg-elevated);
  flex-shrink: 0;
}

.admin-cell-avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--admin-text-faint);
}

.admin-cell-info {
  min-width: 0;
}

.admin-cell-title {
  font-weight: 600;
  color: var(--admin-text-primary);
  margin-bottom: 0.125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  transition: color var(--admin-transition-fast);
}

.admin-cell-link {
  text-decoration: none;
  display: block;
  color: inherit;
}

.admin-cell-link:hover .admin-cell-title {
  color: var(--admin-accent-blue);
}

.admin-cell-meta {
  font-size: 0.75rem;
  color: var(--admin-text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.admin-cell-meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--admin-text-faint);
}

/* Host Cell */
.admin-cell-host {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.admin-cell-host-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--admin-bg-elevated);
}

.admin-cell-host-name {
  font-weight: 500;
  color: var(--admin-text-secondary);
}

/* Event Type Badge */
.admin-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 6px;
  background: var(--type-bg, rgba(255, 255, 255, 0.06));
  color: var(--type-color, var(--admin-text-secondary));
  border: 1px solid var(--type-border, transparent);
}

.admin-type-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--type-color, var(--admin-text-muted));
}

/* Metrics Cell */
.admin-cell-metrics {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.admin-metric-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.admin-metric-value {
  font-family: var(--admin-font-mono);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--admin-text-primary);
  min-width: 24px;
}

.admin-metric-label {
  font-size: 0.75rem;
  color: var(--admin-text-muted);
}

.admin-metric-bar {
  flex: 1;
  height: 4px;
  background: var(--admin-bg-elevated);
  border-radius: 2px;
  overflow: hidden;
  max-width: 60px;
}

.admin-metric-fill {
  height: 100%;
  border-radius: 2px;
  transition: width var(--admin-transition-slow);
}

.admin-metric-fill--green { background: var(--admin-accent-green); }
.admin-metric-fill--amber { background: var(--admin-accent-amber); }
.admin-metric-fill--blue { background: var(--admin-accent-blue); }
.admin-metric-fill--red { background: var(--admin-accent-red); }

/* Schedule Cell */
.admin-cell-schedule {
  font-family: var(--admin-font-mono);
}

.admin-schedule-time {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--admin-text-primary);
  margin-bottom: 0.25rem;
}

.admin-schedule-recurrence {
  font-size: 0.75rem;
  color: var(--admin-text-muted);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Status Badge */
.admin-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.admin-status-badge--active {
  background: var(--status-active-bg);
  color: var(--status-active-text);
  border: 1px solid var(--status-active-border);
}

.admin-status-badge--ended {
  background: var(--status-ended-bg);
  color: var(--status-ended-text);
  border: 1px solid var(--status-ended-border);
}

.admin-status-badge--cancelled {
  background: var(--status-cancelled-bg);
  color: var(--status-cancelled-text);
  border: 1px solid var(--status-cancelled-border);
}

.admin-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse-dot 2s ease-in-out infinite;
}

.admin-status-badge--active .admin-status-dot {
  animation: pulse-dot-active 2s ease-in-out infinite;
}

@keyframes pulse-dot-active {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.2); }
}

/* Actions Cell */
.admin-cell-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.25rem;
}

.admin-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: var(--admin-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--admin-transition-fast);
}

.admin-action-btn:hover {
  background: var(--admin-bg-elevated);
  color: var(--admin-text-primary);
}

.admin-action-btn--view:hover {
  color: var(--admin-accent-blue);
}

.admin-action-btn--edit:hover {
  color: var(--admin-accent-amber);
}

.admin-action-btn--cancel:hover {
  color: var(--admin-accent-red);
}

.admin-action-btn--activate:hover {
  color: var(--admin-accent-green);
}

.admin-action-btn--delete:hover {
  background: var(--status-cancelled-bg);
  color: var(--status-cancelled-text);
}

/* Button Styles */
.admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--admin-font-display);
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--admin-transition-fast);
  border: none;
}

.admin-btn--primary {
  background: var(--admin-accent-blue);
  color: white;
}

.admin-btn--primary:hover {
  background: #2563eb;
  transform: translateY(-1px);
  box-shadow: var(--admin-shadow-md), var(--admin-shadow-glow);
}

.admin-btn--secondary {
  background: var(--admin-bg-tertiary);
  color: var(--admin-text-secondary);
  border: 1px solid var(--admin-border-default);
}

.admin-btn--secondary:hover {
  background: var(--admin-bg-elevated);
  color: var(--admin-text-primary);
  border-color: var(--admin-border-strong);
}

.admin-btn--ghost {
  background: transparent;
  color: var(--admin-text-muted);
}

.admin-btn--ghost:hover {
  background: var(--admin-bg-tertiary);
  color: var(--admin-text-primary);
}

.admin-btn--sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
}

/* Checkbox */
.admin-checkbox {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 2px solid var(--admin-border-default);
  background: transparent;
  cursor: pointer;
  transition: all var(--admin-transition-fast);
  appearance: none;
}

.admin-checkbox:hover {
  border-color: var(--admin-accent-blue);
}

.admin-checkbox:checked {
  background: var(--admin-accent-blue);
  border-color: var(--admin-accent-blue);
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

/* Bulk Actions Bar */
.admin-bulk-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: var(--admin-bg-tertiary);
  border-top: 1px solid var(--admin-border-subtle);
}

.admin-bulk-count {
  font-size: 0.875rem;
  color: var(--admin-text-secondary);
}

.admin-bulk-count strong {
  color: var(--admin-text-primary);
  font-weight: 600;
}

.admin-bulk-actions {
  display: flex;
  gap: 0.5rem;
}

/* Pagination */
.admin-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--admin-border-subtle);
}

.admin-pagination-info {
  font-size: 0.875rem;
  color: var(--admin-text-muted);
}

.admin-pagination-nav {
  display: flex;
  gap: 0.25rem;
}

.admin-pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--admin-text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--admin-transition-fast);
}

.admin-pagination-btn:hover {
  background: var(--admin-bg-elevated);
  color: var(--admin-text-primary);
}

.admin-pagination-btn--active {
  background: var(--admin-accent-blue);
  color: white;
  border-color: var(--admin-accent-blue);
}

/* Empty State */
.admin-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}

.admin-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--admin-bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--admin-text-faint);
  margin-bottom: 1.5rem;
}

.admin-empty-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--admin-text-primary);
  margin-bottom: 0.5rem;
}

.admin-empty-description {
  font-size: 0.875rem;
  color: var(--admin-text-muted);
  max-width: 320px;
}

/* Tooltip */
.admin-tooltip {
  position: relative;
}

.admin-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--admin-text-primary);
  background: var(--admin-bg-elevated);
  border: 1px solid var(--admin-border-default);
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--admin-transition-fast), transform var(--admin-transition-fast);
  z-index: 10;
}

.admin-tooltip:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-8px);
}

/* Row expansion animation */
.admin-row-expandable {
  cursor: pointer;
}

.admin-row-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--admin-transition-slow);
}

.admin-row-details--expanded {
  max-height: 200px;
}

/* Loading skeleton */
.admin-skeleton {
  background: linear-gradient(
    90deg,
    var(--admin-bg-tertiary) 0%,
    var(--admin-bg-elevated) 50%,
    var(--admin-bg-tertiary) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Kaminari Pagination Styling for Dark Theme */
body.admin-dashboard .pagination {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

body.admin-dashboard .pagination a,
body.admin-dashboard .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--admin-text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  text-decoration: none;
  transition: all var(--admin-transition-fast);
}

body.admin-dashboard .pagination a:hover {
  background: var(--admin-bg-elevated);
  color: var(--admin-text-primary);
}

body.admin-dashboard .pagination .current {
  background: var(--admin-accent-blue);
  color: white;
  border-color: var(--admin-accent-blue);
}

body.admin-dashboard .pagination .disabled,
body.admin-dashboard .pagination .gap {
  color: var(--admin-text-faint);
  cursor: default;
}

body.admin-dashboard .pagination .disabled:hover {
  background: transparent;
  color: var(--admin-text-faint);
}

body.admin-dashboard .pagination .first a,
body.admin-dashboard .pagination .prev a,
body.admin-dashboard .pagination .next a,
body.admin-dashboard .pagination .last a {
  color: var(--admin-text-secondary);
}

body.admin-dashboard .pagination .first a:hover,
body.admin-dashboard .pagination .prev a:hover,
body.admin-dashboard .pagination .next a:hover,
body.admin-dashboard .pagination .last a:hover {
  color: var(--admin-text-primary);
  background: var(--admin-bg-elevated);
}

/* ===== CARD COMPONENT ===== */
.admin-card {
  background: var(--admin-bg-secondary);
  border: 1px solid var(--admin-border-subtle);
  border-radius: 12px;
  overflow: hidden;
}

.admin-card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--admin-border-subtle);
  background: var(--admin-bg-tertiary);
}

.admin-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--admin-text-primary);
}

.admin-card-body {
  padding: 1.25rem;
}

.admin-card--info {
  border-color: rgba(59, 130, 246, 0.3);
  background: rgba(59, 130, 246, 0.05);
}

.admin-card--info .admin-card-header {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.2);
}

.admin-card--info .admin-card-title {
  color: #60a5fa;
}

/* ===== FORM COMPONENTS ===== */
.admin-form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--admin-text-primary);
  margin-bottom: 0.5rem;
}

.admin-form-input,
.admin-form-select,
.admin-form-textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  font-family: var(--admin-font-display);
  color: var(--admin-text-primary);
  background: var(--admin-bg-tertiary);
  border: 1px solid var(--admin-border-default);
  border-radius: 8px;
  transition: all var(--admin-transition-fast);
}

.admin-form-input:focus,
.admin-form-select:focus,
.admin-form-textarea:focus {
  outline: none;
  border-color: var(--admin-accent-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.admin-form-input::placeholder,
.admin-form-textarea::placeholder {
  color: var(--admin-text-faint);
}

.admin-form-textarea {
  resize: vertical;
  min-height: 100px;
}

.admin-form-section {
  background: var(--admin-bg-tertiary);
  border: 1px solid var(--admin-border-default);
  border-radius: 8px;
  padding: 1rem;
}

.admin-form-hint {
  font-size: 0.875rem;
  color: var(--admin-text-muted);
  margin-top: 0.25rem;
}

/* Radio/Checkbox Option Card */
.admin-form-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--admin-border-default);
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--admin-transition-fast);
}

.admin-form-option:hover {
  background: var(--admin-bg-tertiary);
  border-color: var(--admin-border-strong);
}

.admin-form-option-title {
  font-weight: 500;
  color: var(--admin-text-primary);
}

.admin-form-option-desc {
  font-size: 0.875rem;
  color: var(--admin-text-muted);
}

/* ===== DETAIL PAGE STYLES ===== */

/* Detail Header */
.admin-detail-header {
  background: var(--admin-bg-secondary);
  border: 1px solid var(--admin-border-subtle);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.admin-detail-header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.admin-detail-header-left {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.admin-detail-avatar {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}

.admin-detail-avatar--placeholder {
  background: var(--admin-bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--admin-text-faint);
}

.admin-detail-header-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-detail-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--admin-text-primary);
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.admin-detail-badges {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.admin-detail-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Button Variants */
.admin-btn--danger {
  background: var(--status-cancelled-bg);
  color: var(--status-cancelled-text);
  border: 1px solid var(--status-cancelled-border);
}

.admin-btn--danger:hover {
  background: rgba(239, 68, 68, 0.2);
  transform: translateY(-1px);
}

.admin-btn--success {
  background: var(--status-active-bg);
  color: var(--status-active-text);
  border: 1px solid var(--status-active-border);
}

.admin-btn--success:hover {
  background: rgba(34, 197, 94, 0.2);
  transform: translateY(-1px);
}

/* Detail Grid Layout */
.admin-detail-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 1.5rem;
}

@media (max-width: 1024px) {
  .admin-detail-grid {
    grid-template-columns: 1fr;
  }
}

.admin-detail-main {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.admin-detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Detail Cards */
.admin-detail-card {
  background: var(--admin-bg-secondary);
  border: 1px solid var(--admin-border-subtle);
  border-radius: 12px;
  overflow: hidden;
}

.admin-detail-card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--admin-border-subtle);
  background: var(--admin-bg-tertiary);
}

.admin-detail-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--admin-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin-detail-card-body {
  padding: 1.25rem;
}

/* Prose (Description) */
.admin-prose {
  color: var(--admin-text-secondary);
  line-height: 1.7;
  font-size: 0.9375rem;
}

.admin-prose p {
  margin-bottom: 0.75rem;
}

.admin-prose p:last-child {
  margin-bottom: 0;
}

.admin-text-muted {
  color: var(--admin-text-muted);
  font-style: italic;
}

/* Detail Image */
.admin-detail-image {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
}

/* Detail List */
.admin-detail-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.admin-detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.admin-detail-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--admin-text-muted);
}

.admin-detail-label svg {
  flex-shrink: 0;
}

.admin-detail-value {
  font-size: 0.9375rem;
  color: var(--admin-text-primary);
  padding-left: 1.375rem;
}

.admin-detail-value--mono {
  font-family: var(--admin-font-mono);
  font-weight: 500;
}

.admin-detail-subtext {
  display: block;
  font-size: 0.8125rem;
  color: var(--admin-text-muted);
  margin-top: 0.125rem;
}

/* Map Links */
.admin-detail-map-links {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--admin-border-subtle);
}

/* In Progress Status */
.admin-status-badge--progress {
  --status-progress-bg: rgba(59, 130, 246, 0.12);
  --status-progress-text: #60a5fa;
  --status-progress-border: rgba(59, 130, 246, 0.3);
  background: var(--status-progress-bg);
  color: var(--status-progress-text);
  border: 1px solid var(--status-progress-border);
}

.admin-status-badge--progress .admin-status-dot {
  animation: pulse-dot-active 1s ease-in-out infinite;
}

/* Sortable Table Headers */
.admin-sortable-header {
  cursor: pointer;
}

.admin-sort-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--admin-text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.admin-sort-link:hover {
  color: var(--admin-text-primary);
}

.admin-sort-link.active {
  color: var(--admin-accent-blue);
}

.admin-sort-icon {
  flex-shrink: 0;
  opacity: 0.8;
}

/* Quiz Leaderboard Rank Styles */
.quiz-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-weight: 600;
  font-size: 0.875rem;
}

.quiz-rank--gold {
  font-size: 1.25rem;
}

.quiz-rank--silver {
  font-size: 1.25rem;
}

.quiz-rank--bronze {
  font-size: 1.25rem;
}

.quiz-rank--default {
  background: var(--admin-bg-tertiary);
  color: var(--admin-text-muted);
}

.quiz-leaderboard-top3 {
  background: rgba(251, 191, 36, 0.05);
}