/* Admin area shared styles */

:root {
  --admin-max: 1200px;
  --admin-pad: 1rem;
  --admin-gap: 0.75rem;
  --admin-gap-lg: 1.25rem;
  --admin-border: #d0d7de;
  --admin-bg: #ffffff;
  --admin-soft: #f6f8fa;
  --admin-text: #0f172a;
  --admin-sub: #6b7280;
  --admin-accent: #c8102e;
}

/* Containers */
.admin-page,
.admin-container,
.admin-sponsors,
.admin-dashboard {
  max-width: var(--admin-max);
  margin: 0 auto;
  padding: 0 var(--admin-pad) var(--admin-gap-lg);
}

/* Card wrapper if page needs framed background */
.admin-surface {
  background: var(--admin-bg);
  border: 1px solid var(--admin-border);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  overflow: hidden;
}

/* Header */
.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-gap);
  padding: 0.75rem 0;
  margin-bottom: 0.75rem;
  border-bottom: 2px solid var(--admin-border);
}
.admin-header .title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}
.admin-header h1,
.admin-header h2,
.admin-header h3 {
  margin: 0;
  color: var(--admin-text);
  font-weight: 800;
}
.admin-header .subtitle {
  color: var(--admin-sub);
  font-size: 0.95rem;
}

/* Fallback header styling when pages use plain headings instead of .admin-header */
.admin-page > h1, .admin-page > h2,
.admin-container > h1, .admin-container > h2,
.admin-sponsors > h1, .admin-sponsors > h2,
.admin-dashboard > h1, .admin-dashboard > h2 {
  margin: 0 0 0.75rem 0;
  padding: 0.25rem 0;
  border-bottom: 2px solid var(--admin-border);
  color: var(--admin-text);
  font-weight: 800;
}

/* Toolbar / actions */
.admin-toolbar,
.admin-actions,
.admin-links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.admin-toolbar { margin: 0.5rem 0 1rem; }

/* Filters row */
.admin-filter-row {
  display: flex;
  gap: var(--admin-gap);
  flex-wrap: wrap;
  align-items: end;
  margin-bottom: 0.75rem;
}
.admin-filter-row .form-group { display: flex; flex-direction: column; gap: 0.25rem; }
.admin-filter-row label { font-weight: 600; }

/* Forms */
.admin-form,
.admin-form-card {
  background: var(--admin-bg);
  border: 1px solid var(--admin-border);
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 3px 10px rgba(0,0,0,0.06);
}
.admin-form .form-grid,
.admin-form-card .form-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--admin-gap);
}
.admin-form .field,
.admin-form-card .field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.admin-form .field label,
.admin-form-card .field label { font-weight: 600; }

/* Common field spans */
.field.span-12 { grid-column: span 12; }
.field.span-8 { grid-column: span 8; }
.field.span-6 { grid-column: span 6; }
.field.span-4 { grid-column: span 4; }
.field.span-3 { grid-column: span 3; }
.field.span-2 { grid-column: span 2; }

/* Form actions */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--admin-gap);
  margin-top: 0.75rem;
}

/* Tables */
.admin-table-wrapper {
  background: var(--admin-bg);
  border: 1px solid var(--admin-border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
}
/* Prefer .admin-table, but also style Bootstrap tables inside admin containers */
.table.admin-table,
.admin-page table.table,
.admin-container table.table,
.admin-sponsors table.table,
.admin-dashboard table.table {
  width: 100%;
  margin: 0;
  font-size: 0.95rem;
  border-collapse: separate;
  border-spacing: 0;
}
.table.admin-table thead th,
.admin-page table.table thead th,
.admin-container table.table thead th,
.admin-sponsors table.table thead th,
.admin-dashboard table.table thead th {
  background: #f1f5f9;
  border-bottom: 2px solid var(--admin-border);
  font-weight: 700;
  padding: 0.8rem 0.75rem;
}
.table.admin-table tbody td,
.admin-page table.table tbody td,
.admin-container table.table tbody td,
.admin-sponsors table.table tbody td,
.admin-dashboard table.table tbody td {
  border-bottom: 1px solid #e9ecef;
  padding: 0.8rem 0.75rem;
  vertical-align: middle;
}
.table.admin-table tbody tr:hover,
.admin-page table.table tbody tr:hover,
.admin-container table.table tbody tr:hover,
.admin-sponsors table.table tbody tr:hover,
.admin-dashboard table.table tbody tr:hover { background: var(--admin-soft); }

/* Sticky actions column (optional: add class 'col-actions' on the th/td) */
.table.admin-table .col-actions { width: 1%; white-space: nowrap; }

/* Cards grid (for dashboards/lists) */
.admin-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--admin-gap);
}
.admin-card {
  grid-column: span 4;
  background: var(--admin-bg);
  border: 1px solid var(--admin-border);
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
.admin-card .card-title { font-weight: 700; margin-bottom: 0.5rem; }
.admin-card .card-sub { color: var(--admin-sub); font-size: 0.9rem; margin-top: -0.25rem; }

/* Badges */
.badge-pill {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--admin-border);
  background: var(--admin-soft);
  font-weight: 600;
  font-size: 0.8rem;
}

/* Buttons: rely on Bootstrap classes primarily, add a couple helpers */
.button-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.btn-outline-danger { color: #b91c1c; border-color: #b91c1c; }
.btn-outline-danger:hover { color: #fff; background: #b91c1c; border-color: #b91c1c; }
.btn-outline-accent { color: var(--admin-accent); border-color: var(--admin-accent); }
.btn-outline-accent:hover { color: #fff; background: var(--admin-accent); border-color: var(--admin-accent); }

/* Inputs spacing */
.admin-page .form-control,
.admin-page .form-select,
.admin-container .form-control,
.admin-container .form-select,
.admin-sponsors .form-control,
.admin-sponsors .form-select,
.admin-dashboard .form-control,
.admin-dashboard .form-select {
  min-height: 2.25rem;
}
.admin-page .form-group,
.admin-container .form-group,
.admin-sponsors .form-group,
.admin-dashboard .form-group { margin-bottom: 0.75rem; }

/* Utilities */
.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}
.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}
.no-wrap{white-space:nowrap}

/* Responsive */
@media (max-width: 1024px) {
  .admin-card { grid-column: span 6; }
}
@media (max-width: 768px) {
  .admin-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .admin-grid { grid-template-columns: repeat(6, 1fr); }
  .admin-card { grid-column: span 6; }
  .admin-form .form-grid, .admin-form-card .form-grid { grid-template-columns: repeat(6, 1fr); }
  .field.span-8 { grid-column: span 6; }
  .field.span-6 { grid-column: span 6; }
  .field.span-4 { grid-column: span 6; }
  .field.span-3 { grid-column: span 3; }
  .field.span-2 { grid-column: span 3; }
}
@media (max-width: 480px) {
  .admin-grid { grid-template-columns: repeat(4, 1fr); }
  .admin-card { grid-column: span 4; }
  .admin-form .form-grid, .admin-form-card .form-grid { grid-template-columns: repeat(4, 1fr); }
  .field.span-3, .field.span-2 { grid-column: span 4; }
}