/*
 * ICAM Abacus — Django Unfold changelist / listing page polish.
 * Complements static/admin/themes/base.css on all ModelAdmin list views.
 */

/* ── Page canvas ────────────────────────────────────────────────────────── */
body.change-list #content-main {
  background:
    radial-gradient(ellipse 70% 40% at 0% 0%, color-mix(in oklch, var(--admin-accent-soft), transparent 35%), transparent 55%),
    radial-gradient(ellipse 50% 30% at 100% 0%, color-mix(in oklch, var(--admin-primary), transparent 92%), transparent 50%),
    var(--admin-background) !important;
}

body.change-list #changelist {
  padding-top: 2px;
}

/* ── Search + filter toolbar ──────────────────────────────────────────────── */
body.change-list #changelist-search > div,
body.change-list #toolbar form > div {
  border-radius: calc(var(--admin-radius) * 1.1) !important;
  border-color: var(--admin-border) !important;
  background: color-mix(in oklch, white, var(--admin-accent-soft) 18%) !important;
  box-shadow: var(--admin-card-shadow) !important;
  min-height: 42px;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

body.change-list #changelist-search > div:focus-within,
body.change-list #toolbar form > div:focus-within {
  border-color: color-mix(in oklch, var(--admin-primary), transparent 40%) !important;
  box-shadow:
    var(--admin-card-shadow),
    0 0 0 3px color-mix(in oklch, var(--admin-primary), transparent 82%) !important;
}

body.change-list #searchbar,
body.change-list #changelist-search input[type="text"] {
  font-weight: 700 !important;
  font-size: 0.84rem !important;
}

body.change-list #changelist .lg\:border.lg\:p-3 {
  background: color-mix(in oklch, white, var(--admin-accent-soft) 22%) !important;
  border-color: var(--admin-border) !important;
  border-radius: calc(var(--admin-radius) * 1.15) calc(var(--admin-radius) * 1.15) 0 0 !important;
  box-shadow: var(--admin-card-shadow) !important;
}

/* Filter button */
body.change-list #changelist-filter-button,
body.change-list #changelist-filter-button.icam-filter-button,
body.change-list button[aria-controls="changelist-filter"] {
  border-radius: 999px !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0;
}

body.change-list #changelist-filter-button:hover,
body.change-list #changelist-filter-button:focus-visible {
  border-color: color-mix(in oklch, var(--admin-primary), white 45%) !important;
  color: var(--admin-primary) !important;
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--admin-primary), transparent 82%) !important;
}

/* Keep filters in a drawer sheet on all breakpoints (never a permanent sidebar). */
body.change-list #changelist-filter.icam-filter-drawer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 60 !important;
}

body.change-list #changelist-filter.icam-filter-drawer[x-cloak] {
  display: none !important;
}

/* ── Results table shell ──────────────────────────────────────────────────── */
body.change-list #result_list,
body.change-list table.result-list {
  border-radius: var(--admin-radius) !important;
  border: 1px solid var(--admin-border) !important;
  overflow: hidden;
  background: white !important;
  box-shadow: var(--admin-card-shadow) !important;
}

body.change-list #result_list thead {
  background: linear-gradient(
    90deg,
    color-mix(in oklch, var(--admin-accent-soft), white 12%),
    color-mix(in oklch, var(--admin-primary), white 88%)
  ) !important;
}

body.change-list #result_list thead th {
  background: transparent !important;
  color: var(--admin-foreground) !important;
  font-weight: 800 !important;
  font-size: 0.68rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 0.75rem 0.85rem !important;
  border-bottom: 2px solid color-mix(in oklch, var(--admin-primary), transparent 75%) !important;
  white-space: nowrap;
}

body.change-list #result_list thead th a {
  color: var(--admin-foreground) !important;
  font-weight: 800 !important;
}

body.change-list #result_list thead th a:hover {
  color: var(--admin-primary) !important;
}

/* ── Table rows ─────────────────────────────────────────────────────────── */
body.change-list #result_list tbody.data-row,
body.change-list #result_list tbody > tbody {
  transition: background 0.12s ease;
}

body.change-list #result_list tr.data-row:hover td,
body.change-list #result_list tbody:hover > tr.data-row td {
  background: color-mix(in oklch, var(--admin-accent-soft), white 45%) !important;
}

body.change-list #result_list tbody.bg-base-50 td,
body.change-list #result_list tbody:nth-child(even) tr.data-row td {
  background: color-mix(in oklch, var(--admin-background), white 35%) !important;
}

body.change-list #result_list td {
  padding: 0.7rem 0.85rem !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  vertical-align: middle !important;
  border-color: color-mix(in oklch, var(--admin-border), white 25%) !important;
}

/* Primary name / link column */
body.change-list #result_list td.field-name a,
body.change-list #result_list td.field-email a,
body.change-list #result_list td.field-title a,
body.change-list #result_list td a.addlink {
  font-weight: 800 !important;
  color: var(--admin-primary) !important;
  text-decoration: none !important;
}

body.change-list #result_list td.field-name a:hover,
body.change-list #result_list td.field-email a:hover {
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

/* Code columns */
body.change-list #result_list td.field-code,
body.change-list #result_list td.field-level_code,
body.change-list #result_list td.field-centre_code,
body.change-list #result_list td.field-template_code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Order / numeric columns */
body.change-list #result_list td.field-display_order,
body.change-list #result_list td.field-lesson_count,
body.change-list #result_list td.field-question_count,
body.change-list #result_list td.field-student_count {
  text-align: center;
}

/* Date columns */
body.change-list #result_list td.field-created_at,
body.change-list #result_list td.field-updated_at,
body.change-list #result_list td.field-issued_at {
  color: var(--admin-muted-fg) !important;
  font-size: 0.76rem !important;
  white-space: nowrap;
}

/* ── Shared UI chips (admin_ui.py + JS) ───────────────────────────────────── */
.icam-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.62rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  line-height: 1.2;
  white-space: nowrap;
}

.icam-badge-ok {
  background: color-mix(in oklch, oklch(0.58 0.17 145), white 82%);
  color: oklch(0.38 0.14 145);
  border-color: color-mix(in oklch, oklch(0.58 0.17 145), white 65%);
}

.icam-badge-fail {
  background: color-mix(in oklch, oklch(0.58 0.2 25), white 84%);
  color: oklch(0.42 0.18 25);
  border-color: color-mix(in oklch, oklch(0.58 0.2 25), white 68%);
}

.icam-badge-warn {
  background: color-mix(in oklch, oklch(0.72 0.17 85), white 82%);
  color: oklch(0.45 0.16 55);
  border-color: color-mix(in oklch, oklch(0.72 0.17 85), white 65%);
}

.icam-badge-info {
  background: color-mix(in oklch, var(--admin-primary), white 84%);
  color: color-mix(in oklch, var(--admin-primary), black 22%);
  border-color: color-mix(in oklch, var(--admin-primary), white 68%);
}

.icam-badge-muted {
  background: color-mix(in oklch, var(--admin-muted-fg), white 88%);
  color: var(--admin-muted-fg);
  border-color: color-mix(in oklch, var(--admin-border), white 20%);
}

.icam-code {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: calc(var(--admin-radius) * 0.55);
  background: color-mix(in oklch, var(--admin-accent-soft), white 25%);
  border: 1px solid var(--admin-border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: color-mix(in oklch, var(--admin-foreground), transparent 8%);
}

.icam-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--admin-primary), white 86%);
  color: color-mix(in oklch, var(--admin-primary), black 18%);
  font-weight: 900;
  font-size: 0.8rem;
}

.icam-count-label {
  font-weight: 700;
  font-size: 0.68rem;
  opacity: 0.75;
  margin-left: 0.15rem;
}

.icam-empty {
  color: color-mix(in oklch, var(--admin-muted-fg), transparent 25%);
  font-weight: 700;
}

/* Action buttons in list columns */
.icam-admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  text-decoration: none !important;
  border-radius: 999px;
  font-weight: 800;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.icam-admin-btn:hover {
  transform: translateY(-1px);
  text-decoration: none !important;
}

.icam-admin-btn-sm {
  padding: 0.3rem 0.72rem;
  font-size: 0.72rem;
}

.icam-admin-btn-md {
  padding: 0.55rem 1.1rem;
  font-size: 0.82rem;
}

.icam-admin-btn-primary {
  background: linear-gradient(
    90deg,
    var(--admin-primary),
    color-mix(in oklch, var(--admin-primary), black 8%)
  );
  color: #ffffff !important;
  box-shadow: 0 4px 12px -6px color-mix(in oklch, var(--admin-primary), transparent 45%);
}

a.icam-admin-btn-primary,
a.icam-admin-btn-primary:link,
a.icam-admin-btn-primary:visited,
a.icam-admin-btn-primary:hover,
a.icam-admin-btn-primary:focus,
a.icam-admin-btn-primary:active {
  color: #ffffff !important;
}

.icam-admin-btn-primary:hover {
  color: #ffffff !important;
  box-shadow: 0 6px 16px -6px color-mix(in oklch, var(--admin-primary), transparent 35%);
}

.icam-admin-btn-success {
  background: linear-gradient(90deg, oklch(0.58 0.17 145), oklch(0.52 0.15 160));
  color: #ffffff !important;
  box-shadow: 0 4px 12px -6px color-mix(in oklch, oklch(0.58 0.17 145), transparent 50%);
}

a.icam-admin-btn-success,
a.icam-admin-btn-success:link,
a.icam-admin-btn-success:visited,
a.icam-admin-btn-success:hover,
a.icam-admin-btn-success:focus,
a.icam-admin-btn-success:active {
  color: #ffffff !important;
}

.icam-admin-btn-success:hover {
  color: #ffffff !important;
}

.icam-admin-btn-outline {
  background: white;
  color: var(--admin-primary) !important;
  border-color: color-mix(in oklch, var(--admin-primary), white 55%);
}

.icam-admin-btn-outline:hover {
  background: var(--admin-accent-soft);
  color: color-mix(in oklch, var(--admin-primary), black 12%) !important;
}

/* Upgrade legacy inline-styled overview buttons */
body.change-list #result_list td a[style*="background:#1565c0"],
body.change-list #result_list td a[style*="background: #1565c0"] {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.3rem 0.72rem !important;
  background: linear-gradient(90deg, var(--admin-primary), color-mix(in oklch, var(--admin-primary), black 8%)) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: 0 4px 12px -6px color-mix(in oklch, var(--admin-primary), transparent 45%) !important;
}

/* ── Pagination & footer ──────────────────────────────────────────────────── */
body.change-list footer {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: white !important;
  border: 1px solid var(--admin-border) !important;
  border-radius: var(--admin-radius) !important;
  box-shadow: var(--admin-card-shadow) !important;
}

body.change-list .paginator,
body.change-list footer .flex {
  font-weight: 700;
}

body.change-list .paginator a,
body.change-list footer a {
  border-radius: calc(var(--admin-radius) * 0.65) !important;
  padding: 0.25rem 0.55rem;
}

/* ── Empty state ──────────────────────────────────────────────────────────── */
body.change-list .empty-results,
body.change-list [class*="empty_results"] {
  border-radius: var(--admin-radius) !important;
  border: 1px dashed var(--admin-border) !important;
  background: color-mix(in oklch, white, var(--admin-accent-soft) 30%) !important;
  padding: 2rem 1.5rem !important;
  font-weight: 700;
  color: var(--admin-muted-fg) !important;
}

/* ── Object tools (Add button) ────────────────────────────────────────────── */
body.change-list .object-tools a,
body.change-list a.addlink[href*="add/"] {
  border-radius: 999px !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px -6px color-mix(in oklch, var(--admin-primary), transparent 45%) !important;
}

/* ── Collapsible vertical filters ─────────────────────────────────────────── */
#changelist-filter .icam-filter-group {
  gap: 0 !important;
  border: 1px solid color-mix(in oklch, var(--admin-border), white 28%);
  border-radius: calc(var(--admin-radius) * 0.95);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 2px 10px -8px color-mix(in oklch, var(--admin-primary), transparent 75%);
}

#changelist-filter .icam-filter-group__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  margin: 0;
  padding: 0.62rem 0.75rem;
  border: 0;
  border-bottom: 1px solid transparent;
  background: linear-gradient(
    90deg,
    color-mix(in oklch, var(--admin-accent-soft), white 45%) 0%,
    #fff 100%
  );
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--admin-primary), black 14%);
  cursor: pointer;
  text-align: left;
}

#changelist-filter .icam-filter-group:not(.icam-filter-group--collapsed) .icam-filter-group__toggle {
  border-bottom-color: color-mix(in oklch, var(--admin-border), white 28%);
}

#changelist-filter .icam-filter-group__toggle:hover {
  background: linear-gradient(
    90deg,
    color-mix(in oklch, var(--admin-accent-soft), white 30%) 0%,
    color-mix(in oklch, white, var(--admin-accent-soft) 20%) 100%
  );
}

#changelist-filter .icam-filter-group__toggle:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--admin-primary), white 35%);
  outline-offset: -2px;
}

#changelist-filter .icam-filter-group__title {
  min-width: 0;
  flex: 1 1 auto;
}

#changelist-filter .icam-filter-group__chevron {
  flex-shrink: 0;
  font-size: 1.05rem !important;
  width: 1.3rem !important;
  height: 1.3rem !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in oklch, var(--admin-accent-soft), white 55%) !important;
  color: color-mix(in oklch, var(--admin-primary), black 10%) !important;
  transition: transform 0.2s ease;
}

#changelist-filter .icam-filter-group--collapsed .icam-filter-group__chevron {
  transform: rotate(-90deg);
}

#changelist-filter .icam-filter-group--collapsed .icam-filter-group__list {
  display: none !important;
}

#changelist-filter .icam-filter-group__list {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#changelist-filter .icam-filter-group__list li a {
  font-size: 0.8rem;
  font-weight: 600;
}

/* ── Mobile card rows ─────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  body.change-list #result_list tr.data-row {
    border-radius: var(--admin-radius) !important;
    border-color: var(--admin-border) !important;
    box-shadow: var(--admin-card-shadow) !important;
    background: white !important;
  }

  body.change-list #result_list td::before {
    color: var(--admin-muted-fg) !important;
    font-weight: 800 !important;
    font-size: 0.68rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
  }
}