/* ==========================================================================
   Vibe Learning – consolidated stylesheet
   Loaded by all layouts via stylesheet_link_tag :app
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700&display=swap");

/* --- Variables ---------------------------------------------------------- */
:root {
  --admin-primary: #4f46e5;
  --admin-primary-hover: #4338ca;
  --admin-primary-fg: #ffffff;
  --admin-bg: #f9fafb;
  --admin-surface: #ffffff;
  --admin-border: #e5e7eb;
  --admin-text: #111827;
  --admin-text-muted: #6b7280;
  --admin-success: #059669;
  --admin-success-strong: #047857;
  --admin-success-bg: #ecfdf5;
  --admin-success-border: #a7f3d0;
  --admin-warning: #d97706;
  --admin-warning-bg: #fffbeb;
  --admin-warning-border: #fcd34d;
  --admin-info: #2563eb;
  --admin-info-bg: #eff6ff;
  --admin-info-border: #bfdbfe;
  --admin-danger: #dc2626;
  --admin-danger-bg: #fef2f2;
  --admin-danger-border: #fecaca;
  --admin-accent-bg: #eef2ff;
  --admin-purple-bg: #f5f3ff;
  --admin-purple-border: #ddd6fe;
  --admin-purple: #7c3aed;
  --admin-indigo: #4f46e5;
  --admin-shadow: 0 10px 25px rgba(17, 24, 39, 0.08);
}

/* --- Dark mode ---------------------------------------------------------- */
/* Editorial — softened espresso, less-warm ivory, sage primary, copper accent */
[data-theme="dark"] {
  --admin-primary: #9BC3AE;
  --admin-primary-hover: #B8D7C6;
  /* Sage primary is light, so text sitting on a primary fill must be dark, not white. */
  --admin-primary-fg: #181614;
  --admin-bg: #181614;
  --admin-surface: #211F1D;
  --admin-border: #36332F;
  --admin-text: #F0EDE8;
  --admin-text-muted: #ACA59C;
  --admin-success: #8FC2A2;
  --admin-success-strong: #6BA482;
  --admin-success-bg: #1F3329;
  --admin-success-border: #2F5141;
  --admin-warning: #D4A862;
  --admin-warning-bg: #3A2E1A;
  --admin-warning-border: #5A4525;
  --admin-info: #A4BCC9;
  --admin-info-bg: #1F2A32;
  --admin-info-border: #324554;
  --admin-danger: #D8866B;
  --admin-danger-bg: #3A1F18;
  --admin-danger-border: #5A3224;
  --admin-accent-bg: #2E251C;
  --admin-purple-bg: #2F241A;
  --admin-purple-border: #55412C;
  --admin-purple: #D4A270;
  --admin-indigo: #9BC3AE;
  --admin-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

/* Dark mode overrides for hardcoded colors — Editorial espresso palette */
[data-theme="dark"] .badge-draft { background: #3A2E1A; color: #E8C597; }
[data-theme="dark"] .badge-published { background: #1F3329; color: #B5D8C1; }
[data-theme="dark"] .badge-archived { background: #36332F; color: #ACA59C; }
[data-theme="dark"] .badge-pending { background: #1F2A32; color: #BDCED8; }
[data-theme="dark"] .badge-failed { background: #3A1F18; color: #E5B1A0; }
[data-theme="dark"] .badge-warning-soft { background: #3A2E1A; color: #E8C597; }
[data-theme="dark"] .badge-info-soft { background: #1F2A32; color: #BDCED8; }
[data-theme="dark"] .badge-muted { background: #36332F; color: #ACA59C; }
[data-theme="dark"] .badge-accent { background: #2E251C; color: #E5BE87; }
[data-theme="dark"] .badge-danger-soft { background: #3A1F18; color: #E5B1A0; }
[data-theme="dark"] .badge-danger-strong { background: #5A3224; color: #F1C8B9; }
[data-theme="dark"] .badge-active { background: #1F3329; color: #B5D8C1; }
[data-theme="dark"] .badge-inactive { background: #3A1F18; color: #E5B1A0; }
[data-theme="dark"] .badge-admin { background: #1F2A32; color: #BDCED8; }
[data-theme="dark"] .badge-author { background: #1F3329; color: #B5D8C1; }
[data-theme="dark"] .badge-viewer { background: #36332F; color: #ACA59C; }
[data-theme="dark"] .badge-global-admin { background: #3A2E1A; color: #E8C597; }
[data-theme="dark"] .badge-scorm_master { background: #2A2440; color: #C9B8E8; }

[data-theme="dark"] .ai-decided-badge { background: #2E251C; color: #E5BE87; }

[data-theme="dark"] .form-errors { background: #3A1F18; border-color: #5A3224; color: #E5B1A0; }
[data-theme="dark"] .admin-flash-notice { background: #1F3329; border-color: #2F5141; color: #B5D8C1; }
[data-theme="dark"] .admin-flash-warning { background: #3A2E1A; border-color: #5A4525; color: #E8C597; }
[data-theme="dark"] .admin-flash-alert { background: #3A1F18; border-color: #5A3224; color: #E5B1A0; }

/* White text fails contrast on the light sage primary fill, so use the dark primary foreground instead. */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .qe-btn-primary,
[data-theme="dark"] .qe-reorder-btn:hover:not(:disabled),
[data-theme="dark"] .filter-toggle-count,
[data-theme="dark"] .workflow-step--current .workflow-step-circle,
[data-theme="dark"] .wizard-step-indicator--active .wizard-step-dot,
[data-theme="dark"] .bulk-scorm__pill.is-active,
[data-theme="dark"] .auth-submit { color: var(--admin-primary-fg); }

[data-theme="dark"] .btn-secondary { background: var(--admin-surface); border-color: var(--admin-border); color: var(--admin-text); }
[data-theme="dark"] .btn-secondary:hover { background: #36332F; }
[data-theme="dark"] .btn-ghost:hover { background: #36332F; }
[data-theme="dark"] .btn-danger:hover { background: #5A3224; }

[data-theme="dark"] .mode-option { background: var(--admin-surface); border-color: var(--admin-border); }
[data-theme="dark"] .mode-option--active { background: #2E251C; border-color: var(--admin-primary); }
[data-theme="dark"] .mode-option:hover { border-color: var(--admin-primary); }

[data-theme="dark"] .confirm-modal { background: var(--admin-surface); color: var(--admin-text); }
[data-theme="dark"] .toast { background: var(--admin-surface); color: var(--admin-text); border-color: var(--admin-border); }

[data-theme="dark"] table thead { background: #2C2724; }
[data-theme="dark"] tbody tr:hover { background: #2C2724; }

[data-theme="dark"] .auth-flash-alert { background: #3A1F18; border-color: #5A3224; }
[data-theme="dark"] .auth-flash-notice { background: #1F3329; border-color: #2F5141; }
[data-theme="dark"] .auth-form-errors { background: #3A1F18; border-color: #5A3224; }

/* --- Reset & base ------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--admin-bg);
  color: var(--admin-text);
  line-height: 1.5;
}

h1, h2, h3, h4,
.admin-nav-brand,
.show-title,
.card-heading,
.card-subheading,
.admin-panel-title,
.wizard-step-label,
.btn {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Nav ---------------------------------------------------------------- */
.admin-nav {
  background: var(--admin-surface);
  border-bottom: 1px solid var(--admin-border);
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  height: 56px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.admin-nav-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--admin-primary);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.admin-nav-brand:hover { color: var(--admin-primary-hover); }

.admin-nav-logo {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

/* Hamburger — hidden on desktop */
.admin-nav-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--admin-text-muted);
  cursor: pointer;
  padding: 0.35rem;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}

.admin-nav-hamburger:hover {
  background: var(--admin-bg);
  color: var(--admin-text);
}

/* Close button — only visible inside mobile drawer */
.admin-nav-close {
  display: none;
}

/* Links container — row on desktop */
.admin-nav-links {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

/* Individual link */
.admin-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--admin-text-muted);
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 500;
  padding: 0.4rem 0.65rem;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1.5;
}

.admin-nav-link:hover {
  color: var(--admin-text);
  background: var(--admin-bg);
}

.admin-nav-link.is-active {
  color: var(--admin-primary);
  background: var(--admin-accent-bg);
}

/* Icon-only utility controls (the notifications bell) in the nav cluster.
   The label is visually hidden on desktop but kept for assistive tech, and
   returns as visible text in the mobile drawer. */
.admin-nav-link-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  justify-content: center;
}

.admin-nav-utility-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.admin-nav-notifications > summary .admin-nav-caret {
  display: none;
}

.admin-nav-menu {
  position: relative;
}

.admin-nav-menu > summary {
  list-style: none;
}

.admin-nav-menu > summary::-webkit-details-marker {
  display: none;
}

.admin-nav-caret {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transform: rotate(-90deg);
  transition: transform 0.15s ease;
}

.btn .admin-nav-caret {
  vertical-align: -2px;
  margin-left: 0.15rem;
}

#importMenuBtn .admin-nav-caret,
#bulkActionsBtn .admin-nav-caret {
  transform: rotate(-90deg);
}

#importMenuBtn[aria-expanded="true"] .admin-nav-caret,
#bulkActionsBtn[aria-expanded="true"] .admin-nav-caret {
  transform: rotate(0);
}

.admin-nav-menu[open] .admin-nav-caret {
  transform: rotate(0deg);
}

.admin-nav-menu-panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  min-width: 210px;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  box-shadow: var(--admin-shadow);
  padding: 0.35rem;
  z-index: 180;
}

.admin-nav-menu-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--admin-text-muted);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 500;
  padding: 0.55rem 0.65rem;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}

.admin-nav-menu-item:hover {
  color: var(--admin-text);
  background: var(--admin-bg);
}

.admin-nav-menu-item.is-active {
  color: var(--admin-primary);
  background: var(--admin-accent-bg);
}

/* Logout is a button_to inside the account menu; reset it to read as a row. */
button.admin-nav-menu-item {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.admin-nav-menu-divider {
  height: 1px;
  background: var(--admin-border);
  margin: 0.3rem 0;
}

/* --- Notifications dropdown -------------------------------------------- */
.admin-nav-notifications > summary {
  cursor: pointer;
}

.admin-nav-notification-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.admin-nav-notification-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--admin-danger, #dc2626);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-sizing: border-box;
}

.admin-nav-notifications-panel {
  min-width: 320px;
  max-width: 380px;
  padding: 0;
}

.admin-nav-notifications-list {
  list-style: none;
  margin: 0;
  padding: 0.35rem;
  max-height: 360px;
  overflow-y: auto;
}

.admin-nav-notification-item {
  border-radius: 6px;
}

.admin-nav-notification-item + .admin-nav-notification-item {
  margin-top: 0.15rem;
}

.admin-nav-notification-item form {
  margin: 0;
}

.admin-nav-notification-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  width: 100%;
  padding: 0.6rem 0.7rem;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--admin-text-muted);
  font-size: 0.86rem;
  text-align: left;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.admin-nav-notification-link:hover {
  color: var(--admin-text);
  background: var(--admin-bg);
}

.admin-nav-notification-item.is-unread .admin-nav-notification-link {
  color: var(--admin-text);
  font-weight: 600;
}

.admin-nav-notification-item.is-unread .admin-nav-notification-link::before {
  content: "";
  position: absolute;
  margin-left: -0.35rem;
  margin-top: 0.4rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--admin-primary);
}

.admin-nav-notification-message {
  width: 100%;
  white-space: normal;
  line-height: 1.35;
}

.admin-nav-notification-time {
  font-size: 0.74rem;
  color: var(--admin-text-muted);
  font-weight: 500;
}

.admin-nav-notifications-footer {
  display: flex;
  gap: 0.4rem;
  padding: 0.4rem 0.5rem;
  border-top: 1px solid var(--admin-border);
}

.admin-nav-notifications-footer form {
  margin: 0;
  flex: 1;
}

.admin-nav-notifications-action {
  display: block;
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: none;
  border-radius: 5px;
  background: none;
  color: var(--admin-text-muted);
  font-size: 0.8rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.admin-nav-notifications-action:hover {
  color: var(--admin-text);
  background: var(--admin-bg);
}

.admin-nav-notifications-empty {
  padding: 1.4rem 1rem;
  text-align: center;
  color: var(--admin-text-muted);
  font-size: 0.85rem;
  margin: 0;
}

/* Notifications full-page list */
.notifications-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.notifications-list-item + .notifications-list-item {
  border-top: 1px solid var(--admin-border);
}

.notifications-list-item form {
  margin: 0;
}

.notifications-list-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 0.85rem 1rem;
  background: none;
  border: none;
  color: var(--admin-text-muted);
  text-align: left;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.notifications-list-link:hover {
  color: var(--admin-text);
  background: var(--admin-bg);
}

.notifications-list-item.is-unread .notifications-list-link {
  color: var(--admin-text);
  font-weight: 600;
}

.notifications-list-item.is-unread .notifications-list-link::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--admin-primary);
  margin-right: 0.5rem;
  flex-shrink: 0;
}

.notifications-list-message {
  flex: 1;
}

.notifications-list-time {
  font-size: 0.78rem;
  color: var(--admin-text-muted);
  font-weight: 500;
  white-space: nowrap;
}

/* Nav icon */
.admin-nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Logout specific */
.admin-nav-logout {
  color: var(--admin-text-muted);
}

.admin-nav-logout:hover {
  color: var(--admin-danger);
  background: var(--admin-danger-bg);
}

/* Theme toggle */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--admin-text-muted);
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.theme-toggle:hover {
  color: var(--admin-text);
  background: var(--admin-bg);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root:not([data-theme="dark"]) .theme-toggle .icon-moon { display: block; }

/* Divider between link groups */
.admin-nav-divider {
  width: 1px;
  height: 20px;
  background: var(--admin-border);
  margin: 0 0.25rem;
}

/* Overlay — mobile only */
.admin-nav-overlay {
  display: none;
}

/* ---- Mobile nav (≤768px) ---- */
@media (max-width: 768px) {
  .admin-nav { padding: 0 1rem; }

  .admin-nav-hamburger { display: flex; }

  .admin-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 199;
  }

  .admin-nav-overlay.is-open { display: block; }

  .admin-nav-links {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 260px;
    max-width: 80vw;
    background: var(--admin-surface);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem 0.75rem;
    z-index: 200;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    transform: translateX(100%);
    transition: transform 0.2s ease;
  }

  .admin-nav-links.is-open {
    transform: translateX(0);
  }

  .admin-nav-close {
    display: flex;
    align-self: flex-end;
    background: none;
    border: none;
    color: var(--admin-text-muted);
    cursor: pointer;
    padding: 0.35rem;
    border-radius: 6px;
    margin-bottom: 0.5rem;
  }

  .admin-nav-close:hover {
    background: var(--admin-bg);
    color: var(--admin-text);
  }

  .admin-nav-link {
    font-size: 0.9rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
  }

  /* In the mobile drawer, icon-only utility links return to labeled rows. */
  .admin-nav-link-icon {
    width: auto;
    height: auto;
    padding: 0.6rem 0.75rem;
    justify-content: flex-start;
  }

  .admin-nav-utility-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .admin-nav-notifications > summary .admin-nav-caret {
    display: inline-block;
  }

  .admin-nav-divider {
    width: 100%;
    height: 1px;
    margin: 0.35rem 0;
  }

  .admin-nav-menu {
    width: 100%;
  }

  .admin-nav-menu-panel {
    position: static;
    min-width: 0;
    border: none;
    box-shadow: none;
    padding: 0.15rem 0 0.35rem 1rem;
    background: transparent;
  }

  .admin-nav-menu-item {
    font-size: 0.9rem;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
  }
}

/* --- Layout containers -------------------------------------------------- */
.admin-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

/* --- Flash messages (inline, used in warning banners) ------------------- */
.admin-flash {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
}

.admin-flash-notice {
  background: #ecfdf5;
  color: var(--admin-success);
  border: 1px solid #a7f3d0;
}

.admin-flash-alert {
  background: #fef2f2;
  color: var(--admin-danger);
  border: 1px solid #fecaca;
}

.admin-flash-warning {
  background: var(--admin-warning-bg);
  color: #92400e;
  border: 1px solid var(--admin-warning-border);
}

.admin-flash-info {
  background: var(--admin-info-bg);
  color: var(--admin-info);
  border: 1px solid var(--admin-info-border);
}

/* --- Issues panel (consolidated module warnings) ------------------------ */
.issues-panel {
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.issues-panel__title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.75rem 0;
  color: var(--admin-text);
}

.issues-panel__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.issue {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: start;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  border: 1px solid var(--admin-border);
  background: var(--admin-bg);
  font-size: 0.875rem;
}

.issue--group {
  display: block;
  padding: 0;
  background: var(--admin-warning-bg);
  border-color: var(--admin-warning-border);
}

.issue--warning {
  background: var(--admin-warning-bg);
  border-color: var(--admin-warning-border);
}

.issue--error {
  background: var(--admin-danger-bg);
  border-color: var(--admin-danger-border);
}

.issue--info {
  background: var(--admin-info-bg);
  border-color: var(--admin-info-border);
}

.issue__badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.issue__badge--warning {
  background: var(--admin-warning);
  color: #fff;
}

.issue__badge--error {
  background: var(--admin-danger);
  color: #fff;
}

.issue__badge--info {
  background: var(--admin-info);
  color: #fff;
}

.issue__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.issue__title {
  font-weight: 600;
  color: var(--admin-text);
}

.issue__description {
  margin: 0;
  color: var(--admin-text-muted);
  font-size: 0.85rem;
}

.issue__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: flex-start;
}

.issue__preflight-list {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
}

.issue__llm-preview {
  margin-top: 0.5rem;
  font-size: 0.85rem;
}

.issue__llm-preview > summary {
  cursor: pointer;
  color: var(--admin-text-muted);
}

.issue__llm-preview-body {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow: auto;
  font-size: 0.8rem;
}

/* Group (review items) */
.issue-group {
  /* details element */
}

.issue-group__summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  list-style: none;
}

.issue-group__summary::-webkit-details-marker {
  display: none;
}

.issue-group__chevron {
  color: var(--admin-text-muted);
  font-size: 0.85rem;
  transition: transform 0.15s ease;
}

.issue-group[open] .issue-group__chevron {
  transform: rotate(180deg);
}

.issue-group__body {
  padding: 0 1rem 0.75rem 1rem;
  border-top: 1px solid var(--admin-warning-border);
}

.issue-group__bulk-actions {
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem 0;
  margin-bottom: 0.25rem;
}

.issue-group__bulk-form {
  display: inline;
}

.issue-group__items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.issue-group__item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "meta dismiss"
    "description dismiss"
    "checklist dismiss";
  gap: 0.25rem 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--admin-bg);
  border: 1px solid var(--admin-border);
  border-radius: 4px;
}

.issue-group__item-meta {
  grid-area: meta;
  display: flex;
  gap: 0.35rem;
  align-items: center;
  flex-wrap: wrap;
}

.issue-group__item-description {
  grid-area: description;
  margin: 0;
  font-size: 0.85rem;
  color: var(--admin-text);
}

.issue-group__item-checklist {
  grid-area: checklist;
  margin: 0;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--admin-text-muted);
}

.issue-group__item-dismiss {
  grid-area: dismiss;
  align-self: center;
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  white-space: nowrap;
}

/* --- Toast notifications ------------------------------------------------ */
.toast-container {
  position: fixed;
  top: 68px;
  right: 1rem;
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  pointer-events: auto;
  max-width: 420px;
  transform: translateX(calc(100% + 1rem));
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.toast.is-visible {
  transform: translateX(0);
  opacity: 1;
}

.toast-notice {
  background: var(--admin-success);
  color: white;
}

.toast-alert {
  background: var(--admin-danger);
  color: white;
}

.toast-warning {
  background: var(--admin-warning);
  color: white;
}

.toast-info {
  background: var(--admin-info);
  color: white;
}

.toast-close {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0 0.2rem;
  margin-left: auto;
  flex-shrink: 0;
}

.toast-close:hover { opacity: 1; }

/* --- Confirm modal ------------------------------------------------------ */
.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.confirm-overlay.is-visible { opacity: 1; }

.confirm-modal {
  background: var(--admin-surface);
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16);
}

.confirm-message {
  font-size: 0.925rem;
  color: var(--admin-text);
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.confirm-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

/* The <dialog> wrapper around .confirm-modal.
   The dialog controls width so the modal sizes predictably regardless of
   message length; .confirm-modal then fills the dialog. */
.confirm-dialog {
  border: none;
  background: transparent;
  padding: 0;
  margin: auto;
  width: 90vw;
  max-width: 420px;
}

.confirm-dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

/* --- Regenerate dialog -------------------------------------------------- */
.regenerate-dialog {
  border: none;
  padding: 0;
  margin: auto;
  border-radius: 12px;
  background: var(--admin-surface);
  color: var(--admin-text);
  max-width: 640px;
  width: 90%;
  max-height: calc(100vh - 4rem);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
}

/* --- Regenerate dialog mode radios ----------------------------------- */
.regenerate-mode-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 1rem 0;
}

.regenerate-mode-fieldset legend {
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  padding: 0;
}

.regenerate-mode-option {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.35rem;
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  cursor: pointer;
}

.regenerate-mode-option:hover {
  border-color: var(--admin-primary);
}

.regenerate-mode-option--disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.regenerate-mode-option--disabled:hover {
  border-color: var(--admin-border);
}

.regenerate-mode-option > span {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.85rem;
}

.regenerate-mode-option .hint {
  font-size: 0.75rem;
  color: var(--admin-text-muted);
}

/* --- Disclosure (styled <details> summary) ---------------------------- */
.disclosure-summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  user-select: none;
}

.disclosure-summary::-webkit-details-marker { display: none; }

/* Chevron that rotates from ▶ to ▼ when the details is open. */
.disclosure-summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.disclosure[open] > .disclosure-summary::before {
  transform: rotate(90deg);
}

/* --- Image history timeline ------------------------------------------- */
.image-history__summary {
  color: var(--admin-text-muted);
}

.image-history__intro {
  margin: 0.4rem 0 0.6rem;
}

/* History timeline lives in its own modal; let the body scroll when there
   are many versions rather than clipping against the dialog's max-height. */
.image-history-dialog .regenerate-dialog__inner {
  overflow-y: auto;
  max-height: calc(100vh - 4rem);
}

.image-history__timeline {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.image-history__step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0 0 0.9rem 1.1rem;
}

/* Connector line running down the left of the timeline. */
.image-history__step::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.4rem;
  bottom: -0.4rem;
  width: 2px;
  background: var(--admin-border);
}

.image-history__step:last-child::before { display: none; }

.image-history__marker {
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--admin-border);
}

.image-history__step--current .image-history__marker {
  background: var(--admin-primary);
}

.image-history__thumb {
  width: 132px;
  height: 99px;
  object-fit: cover;
  border-radius: 6px;
  cursor: zoom-in;
  flex-shrink: 0;
}

.image-history__body {
  flex: 1;
  min-width: 0;
}

.image-history__headline {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
}

.image-history__current-badge {
  font-size: 0.65rem;
}

.image-history__feedback {
  font-size: 0.75rem;
  margin-top: 0.1rem;
}

.image-history__sub {
  font-size: 0.7rem;
  margin-top: 0.1rem;
}

/* Per-step overflow menu (native <details>). */
.image-history__menu {
  position: relative;
  flex-shrink: 0;
}

.image-history__menu-trigger {
  list-style: none;
  cursor: pointer;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  color: var(--admin-text-muted);
  font-size: 1rem;
  line-height: 1;
  user-select: none;
}

.image-history__menu-trigger::-webkit-details-marker { display: none; }
.image-history__menu-trigger:hover { background: var(--admin-bg); color: var(--admin-text); }

.image-history__menu-items {
  position: absolute;
  right: 0;
  top: 1.6rem;
  z-index: 10;
  min-width: 160px;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
}

/* Flipped above the trigger when there isn't room below (set via JS), so the
   menu never spills past the dialog and spawns a scrollbar. */
.image-history__menu-items--up {
  top: auto;
  bottom: 1.6rem;
}

/* Both link items and button_to forms render as full-width menu rows. */
.image-history__menu-items .image-history__menu-item,
.image-history__menu-items form {
  margin: 0;
}

.image-history__menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  font-size: 0.8rem;
  color: var(--admin-text);
  cursor: pointer;
  text-decoration: none;
}

.image-history__menu-item:hover { background: var(--admin-bg); }
.image-history__menu-item--danger { color: var(--admin-danger); }

/* --- Image preview dialog --------------------------------------------- */
.image-preview-dialog {
  border: none;
  padding: 0;
  margin: auto;
  background: transparent;
  max-width: calc(100vw - 4rem);
  max-height: calc(100vh - 4rem);
  overflow: visible;
}

.image-preview-dialog::backdrop {
  background: rgba(0, 0, 0, 0.75);
}

.image-preview-dialog__image {
  display: block;
  max-width: calc(100vw - 4rem);
  max-height: calc(100vh - 4rem);
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
}

.image-preview-dialog__close {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: none;
  background: var(--admin-surface);
  color: var(--admin-text);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.image-preview-dialog__close:hover {
  background: var(--admin-bg);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.regenerate-dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.regenerate-dialog__inner {
  padding: 1.5rem;
}

.regenerate-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.regenerate-dialog__title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
}

.regenerate-dialog__close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--admin-text-muted);
  padding: 0.25rem 0.5rem;
}

.regenerate-dialog__close:hover { color: var(--admin-text); }

.regenerate-dialog__lead {
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

/* ── Content-block help gallery ── */
.cb-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.4rem;
  padding: 0;
  border: 1px solid var(--admin-border);
  border-radius: 50%;
  background: var(--admin-bg);
  color: var(--admin-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}

.cb-help-btn:hover {
  border-color: var(--admin-primary);
  color: var(--admin-primary);
}

.cb-gallery {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cb-gallery__item {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 1.25rem;
  align-items: center;
}

@media (max-width: 640px) {
  .cb-gallery__item { grid-template-columns: 1fr; gap: 0.6rem; }
}

.cb-gallery__name {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
}

.cb-gallery__desc {
  font-size: 0.825rem;
  margin: 0;
}

.cb-gallery__preview {
  padding: 0.85rem;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-bg);
}

/* Static replicas of the real learner blocks (decorative, locale-free) */
.cb-sample { width: 100%; }

.cb-line {
  display: block;
  height: 7px;
  border-radius: 4px;
  background: var(--admin-border);
  margin: 0.35rem 0;
}
.cb-line--label { width: 60%; height: 9px; background: var(--admin-text-muted); opacity: 0.55; }
.cb-line--short { width: 75%; }

/* Short real sample text used in preview headings */
.cb-sample-head {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--admin-text);
}

/* Comparison: tone-tinted columns with a heading and bullet lines. The real
   block tints the whole cell (background + border), not just a top accent. */
.cb-sample--comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.cb-sample-col {
  padding: 0.5rem 0.55rem;
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  background: var(--admin-surface);
}

.cb-sample-col--good { background: var(--admin-success-bg); border-color: var(--admin-success-border); }
.cb-sample-col--warn { background: var(--admin-warning-bg); border-color: var(--admin-warning-border); }
.cb-sample-col--good .cb-sample-head { color: var(--admin-success-strong); }
.cb-sample-col--warn .cb-sample-head { color: var(--admin-warning); }

/* Stepper: progress track, one numbered step, prev/next nav */
.cb-stepper-track { display: flex; gap: 0.35rem; margin-bottom: 0.85rem; }
.cb-stepper-bar {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--admin-border);
}
.cb-stepper-bar--on { background: var(--admin-primary); }

.cb-stepper-head { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.5rem; }
.cb-stepper-head .cb-line { margin: 0; flex: 1; }
.cb-stepper-num {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--admin-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
}

.cb-stepper-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.85rem;
}
.cb-stepper-navbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9rem;
  height: 1.6rem;
  padding: 0 0.45rem;
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  background: var(--admin-surface);
  color: var(--admin-text-muted);
  font-size: 0.95rem;
  line-height: 1;
}
.cb-stepper-navbtn--primary {
  background: var(--admin-primary);
  border-color: var(--admin-primary);
  color: #fff;
}
.cb-stepper-count { font-size: 0.8rem; color: var(--admin-text-muted); }

/* Hub: centre node with a stacked accordion of spokes */
.cb-sample--hub { display: flex; flex-direction: column; }

.cb-hub-center {
  align-self: center;
  width: 72%;
  margin-bottom: 0.7rem;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--admin-primary);
  border-radius: 12px;
  background: var(--admin-primary-soft);
  text-align: center;
}
.cb-hub-center .cb-line { margin-left: auto; margin-right: auto; }
.cb-hub-center .cb-line--short { width: 80%; margin-top: 0.3rem; }
.cb-sample-head--center { color: var(--admin-primary); }

.cb-hub-spokes { display: flex; flex-direction: column; gap: 0.4rem; }
.cb-hub-spoke {
  border: 1px solid var(--admin-border);
  border-radius: 10px;
  background: var(--admin-surface);
  overflow: hidden;
}
.cb-hub-spoke__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
}
.cb-hub-spoke__head .cb-line { margin: 0; flex: 1; }
/* Disclosure caret: points right when collapsed, down when open (matches the real block) */
.cb-hub-caret {
  flex: 0 0 auto;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--admin-text-muted);
  border-bottom: 2px solid var(--admin-text-muted);
  transform: rotate(-45deg);
}
.cb-hub-spoke.is-open .cb-hub-caret { transform: rotate(45deg); }
.cb-hub-spoke__body { padding: 0 0.7rem 0.6rem; }
.cb-hub-spoke__body .cb-line { margin: 0; }

/* Tabs: a tab strip with one active tab over a content panel */
.cb-sample--tabs {
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--admin-surface);
}
.cb-tabs-list {
  display: flex;
  border-bottom: 1px solid var(--admin-border);
  background: var(--admin-bg);
}
.cb-tab {
  padding: 0.5rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--admin-text-muted);
  border-bottom: 2px solid transparent;
}
.cb-tab.is-active {
  color: var(--admin-primary);
  border-bottom-color: var(--admin-primary);
  background: var(--admin-surface);
}
.cb-tabs-panel { padding: 0.75rem 0.85rem; }
.cb-tabs-panel .cb-line:first-child { margin-top: 0; }

.cb-sample--flashcard {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cb-flash-card {
  border: 1px solid var(--admin-border);
  background: var(--admin-accent-bg);
  border-radius: 10px;
  padding: 1rem 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
}
.cb-flash-cue {
  font-size: 0.7rem;
  color: var(--admin-text-muted);
}
.cb-flash-rate {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  margin-top: 0.3rem;
}
.cb-flash-pill {
  width: 3.5rem;
  height: 1.1rem;
  border-radius: 999px;
}
.cb-flash-pill--warn { background: var(--admin-warning-bg); border: 1px solid var(--admin-warning-border); }
.cb-flash-pill--ok { background: var(--admin-success-bg); border: 1px solid var(--admin-success-border); }

.cb-sample--timeline {
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface);
  padding: 0.75rem 0.85rem;
}
.cb-tl-rail {
  display: flex;
  position: relative;
  padding-top: 0.15rem;
  margin-bottom: 0.85rem;
}
.cb-tl-rail::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0.45rem;
  height: 2px;
  background: var(--admin-border);
}
.cb-tl-node {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.cb-tl-dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--admin-surface);
  border: 2px solid var(--admin-border);
}
.cb-tl-node.is-active .cb-tl-dot {
  border-color: var(--admin-primary);
  background: var(--admin-primary);
}
.cb-tl-date {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--admin-text-muted);
}
.cb-tl-panel {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.cb-sample--chart {
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface);
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cb-chart-bars {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background-image: linear-gradient(to right, var(--admin-border) 0, var(--admin-border) 1px, transparent 1px);
  background-repeat: repeat-x;
  background-size: 25% 100%;
  border-right: 1px solid var(--admin-border);
}
.cb-chart-bar {
  height: 1.1rem;
  display: flex;
  align-items: center;
  border-radius: 5px;
}
/* The highlighted row gets a subtle band; the bars themselves stay one colour. */
.cb-chart-bar--highlight { background: color-mix(in srgb, var(--admin-text-muted) 22%, transparent); }
.cb-chart-fill {
  display: block;
  height: 0.55rem;
  background: var(--admin-primary);
  background: color-mix(in srgb, var(--admin-primary) 85%, var(--admin-surface));
  border-radius: 4px;
}
.cb-chart-fill--lg { width: 85%; }
.cb-chart-fill--md { width: 55%; }
.cb-chart-fill--sm { width: 30%; }
/* Dark: keep bars light (don't darken toward the near-black surface) and fade the
   gridlines so they sit behind the data. */
[data-theme="dark"] .cb-chart-bars {
  background-image: linear-gradient(to right, rgba(240, 232, 220, 0.10) 0, rgba(240, 232, 220, 0.10) 1px, transparent 1px);
  border-right-color: rgba(240, 232, 220, 0.10);
}
[data-theme="dark"] .cb-chart-fill { background: var(--admin-primary); }

/* Decision-tree gallery sample: a prompt line above two answer chips. */
.cb-sample--decision-tree {
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface);
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.cb-dt-option {
  font-size: 0.8rem;
  color: var(--admin-text);
  background: color-mix(in srgb, var(--admin-primary) 10%, var(--admin-surface));
  border: 1px solid color-mix(in srgb, var(--admin-primary) 35%, var(--admin-surface));
  border-radius: 6px;
  padding: 0.35rem 0.55rem;
}

.regenerate-options {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.regenerate-option {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-bg);
}

.regenerate-option--recommended {
  border-color: var(--admin-primary);
  background: var(--admin-primary-soft, var(--admin-bg));
}

.regenerate-option--disabled {
  opacity: 0.55;
  background: var(--admin-surface-2, var(--admin-bg));
}

.regenerate-option--disabled .btn[disabled] {
  cursor: not-allowed;
  background: var(--admin-border);
  color: var(--admin-text-muted);
  border-color: var(--admin-border);
}

.regenerate-option--disabled .btn[disabled]:hover {
  background: var(--admin-border);
}

.regenerate-option__info {
  flex: 1;
  min-width: 0;
}

.regenerate-option__label {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.regenerate-option__badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 500;
  background: var(--admin-primary);
  color: var(--admin-primary-fg, #fff);
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.regenerate-option__description {
  font-size: 0.85rem;
  margin: 0;
  line-height: 1.4;
}

.regenerate-option__unavailable {
  font-size: 0.8rem;
  margin: 0.375rem 0 0;
  font-style: italic;
}

.regenerate-option__action {
  flex-shrink: 0;
}

.regenerate-option__action form {
  margin: 0;
}

.image-download-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}

#image-download-dialog .form-group {
  margin-bottom: 0;
}

.image-download-dialog__filename {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  background: var(--admin-surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.image-download-dialog__filename:focus-within {
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

#image-download-dialog input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 6px 0 0 6px;
  font-size: 0.875rem;
  font-family: inherit;
  background: transparent;
}

#image-download-dialog input[type="text"]:focus {
  outline: none;
}

.image-download-dialog__extension {
  display: inline-flex;
  align-items: center;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  color: var(--admin-text-muted);
  background: var(--admin-bg);
  border-left: 1px solid var(--admin-border);
  border-radius: 0 6px 6px 0;
  user-select: none;
}

#image-download-dialog label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
}

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  border: none;
  cursor: pointer;
  line-height: 1.5;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

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

.btn-primary:hover { background: var(--admin-primary-hover); }

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

.btn-secondary:hover { background: var(--admin-bg); }

.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* `.btn` sets an explicit display, which beats the user-agent
   `[hidden] { display: none }` rule — so a button hidden via the
   `hidden` attribute would still show. Restore the expected behaviour
   so JS toggling `button.hidden` works (e.g. the block-copy popover's
   confirm button in explainer mode). */
.btn[hidden] {
  display: none !important;
}

.btn-danger {
  background: var(--admin-danger);
  color: white;
}

.btn-danger:hover { background: #b91c1c; }

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

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

.btn-sm { padding: 0.25rem 0.75rem; font-size: 0.8rem; }

.btn:focus-visible,
.admin-nav-link:focus-visible,
.tab-btn:focus-visible,
.wizard-step-indicator:focus-visible,
.dropdown-menu-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}

/* --- Admin header ------------------------------------------------------- */
.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.admin-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
}

/* --- Tables ------------------------------------------------------------- */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--admin-surface);
  border-radius: 8px;
  border: 1px solid var(--admin-border);
}

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

th {
  background: var(--admin-bg);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--admin-text-muted);
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

td { font-size: 0.875rem; color: var(--admin-text); }
td code, td a:not(.btn) { overflow-wrap: anywhere; }
th.nowrap, td.nowrap { white-space: nowrap; }

/* Sortable column headers: the label is a link that toggles the sort
   direction; the active column is tinted and shows a direction arrow. */
.sort-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.sort-link:hover { color: var(--admin-primary); }
.sort-link--active { color: var(--admin-primary); }
/* Neutral glyph stays faint so it reads as "sortable" without shouting; the
   active column's direction arrow shows at full strength. */
.sort-link-arrow { font-size: 0.6rem; line-height: 1; opacity: 0.35; }
.sort-link:hover .sort-link-arrow { opacity: 0.7; }
.sort-link--active .sort-link-arrow { opacity: 1; }

/* Row above a table for its controls (bulk actions, reset sort). */
.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
/* Reset-sort lives in its own band. Reserve the height even when the link is
   absent so it fades in on sort without pushing the table down. */
.table-toolbar--end { justify-content: flex-end; min-height: 1.25rem; }
/* Page-feedback thumb glyph in the learner-feedback table. */
.page-feedback-thumb { font-size: 1.1rem; }
.sort-reset { font-size: 0.8rem; }

/* Row hover */
tbody tr { transition: background 0.1s ease; }
tbody tr:hover { background: var(--admin-bg); }

/* Last row — no bottom border */
tbody tr:last-child td { border-bottom: none; }

/* Muted secondary columns */
td.text-secondary { color: var(--admin-text-muted); font-size: 0.82rem; }

/* Modules index table — fixed layout so columns stay stable across both
   scopes (the <colgroup> sets widths; title is the one flexible column). */
.modules-table { table-layout: fixed; }

/* Organisation: single line, ellipsis when it exceeds its column */
.modules-table .col-org {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Title: wrap on word boundaries, clamp to 2 lines within its column */
.modules-table .col-title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
  text-decoration: none;
}

.modules-table .col-title a:hover {
  text-decoration: underline;
}

/* Organisation shown as a muted subtitle under the title or name rather than in its own column,
   which would squeeze whatever column it sits beside. Used by the global-admin hosted modules view
   and by both model preset tables. */
.title-org {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: var(--admin-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* SCORM runtime status table — fixed layout so the long, space-less
   suspend_data value wraps inside its own cell instead of stretching the
   table past the page and squeezing the field column to one char per line. */
.scorm-runtime-table { table-layout: fixed; }
.scorm-runtime-table td:first-child { width: 16rem; }
.scorm-runtime-table td:last-child {
  overflow-wrap: anywhere;
  word-break: break-all;
}

/* Clickable row — whole row links to detail page */
tr[data-href] { cursor: pointer; }


/* --- Badges ------------------------------------------------------------- */
.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.badge-clickable {
  border: none;
  font-family: inherit;
  cursor: pointer;
}
.badge-clickable:hover { filter: brightness(0.95); }

.extraction-badge { margin-left: 0.25rem; }

.badge-draft { background: #fef3c7; color: #92400e; }
.badge-published { background: #d1fae5; color: #065f46; }
.badge-archived { background: #e5e7eb; color: #374151; }
.badge-pending { background: #dbeafe; color: #1e40af; }
.badge-failed { background: #fee2e2; color: #991b1b; }
.badge-warning { background: var(--admin-warning); color: #fff; }
.badge-warning-soft { background: #fef3c7; color: #92400e; }
.badge-info-soft { background: #dbeafe; color: #1e40af; }
.badge-muted { background: #e5e7eb; color: #374151; }
.badge-accent { background: #ede9fe; color: #5b21b6; }
.badge-danger-soft { background: #fee2e2; color: #991b1b; }
.badge-danger-strong { background: #fecaca; color: #7f1d1d; }
.badge-sm { font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 4px; }

/* Platform tags in the hosted-modules "Published on" column. Capped to a couple
   of chips plus a "+N more" overflow so a widely-published module stays compact. */
.publish-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.publish-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  background: var(--admin-surface);
  color: var(--admin-text);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.5;
}

.publish-chip::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--admin-success);
}

.publish-chip__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.publish-chip--more {
  color: var(--admin-text-muted);
}

.publish-chip--more::before { display: none; }

.ai-decided-badge {
  font-size: 0.7rem;
  font-style: italic;
  color: #6b7280;
  margin-left: 0.35rem;
}

/* --- Cards -------------------------------------------------------------- */
.card {
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

/* --- Stat cards (tinted dashboard tiles) -------------------------------- */
.stat-card {
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
}

.stat-card__value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}

.stat-card__label {
  font-size: 0.8rem;
  color: var(--admin-text-muted);
  margin-top: 0.25rem;
}

.stat-card--indigo {
  background: var(--admin-accent-bg);
  border-color: var(--admin-indigo);
}
.stat-card--indigo .stat-card__value { color: var(--admin-indigo); }

.stat-card--info {
  background: var(--admin-info-bg);
  border-color: var(--admin-info-border);
}
.stat-card--info .stat-card__value { color: var(--admin-info); }

.stat-card--purple {
  background: var(--admin-purple-bg);
  border-color: var(--admin-purple-border);
}
.stat-card--purple .stat-card__value { color: var(--admin-purple); }

.stat-card--success {
  background: var(--admin-success-bg);
  border-color: var(--admin-success-border);
}
.stat-card--success .stat-card__value { color: var(--admin-success); }

/* --- Forms -------------------------------------------------------------- */
.form-group {
  margin-bottom: 1.15rem;
}

.form-group label,
.form-group .form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
}

.form-group label.required::after {
  content: " *";
  color: var(--admin-danger);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group input[type="url"],
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  font-size: 0.875rem;
  font-family: inherit;
  background: var(--admin-surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.form-group input[type="checkbox"] {
  accent-color: var(--admin-primary);
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="password"]:focus,
.form-group input[type="number"]:focus,
.form-group input[type="url"]:focus,
.form-group textarea:focus,
.form-group select:focus,
.filter-input:focus {
  outline: none;
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.form-group select:disabled {
  background: var(--admin-bg);
  color: var(--admin-text-muted);
  cursor: not-allowed;
}

.form-group textarea { min-height: 120px; resize: vertical; }
.form-group textarea.tall { min-height: 300px; }

.form-group .hint {
  font-size: 0.8rem;
  color: var(--admin-text-muted);
  margin-top: 0.3rem;
  line-height: 1.4;
}

.hint {
  font-size: 0.8rem;
  color: var(--admin-text-muted);
  line-height: 1.4;
}

.form-errors {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1rem;
  color: var(--admin-danger);
  font-size: 0.875rem;
}

.branding-logo-preview {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
  padding: 0.75rem;
  background: var(--admin-bg);
  border: 1px solid var(--admin-border);
  border-radius: 6px;
}

.branding-logo-preview-image {
  max-height: 64px;
  max-width: 200px;
  object-fit: contain;
}

.branding-logo-remove {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--admin-text-muted);
}

.branding-color-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.branding-color-row input[type="color"] {
  width: 56px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--admin-border);
  border-radius: 4px;
  cursor: pointer;
}

.branding-color-display {
  font-family: var(--font-mono, monospace);
  font-size: 0.85rem;
  color: var(--admin-text-muted);
}

.form-errors ul { margin-left: 1rem; }

/* --- File upload -------------------------------------------------------- */
.file-upload-area {
  border: 2px dashed var(--admin-border);
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.file-upload-area:hover,
.file-upload-area.drag-over {
  border-color: var(--admin-primary);
  background: #f5f3ff;
}

.file-upload-area input[type="file"] {
  display: none;
}

.file-upload-area .upload-icon {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
  color: var(--admin-text-muted);
}

.file-upload-area .upload-text {
  font-size: 0.875rem;
  color: var(--admin-text-muted);
}

.file-upload-area .upload-text strong {
  color: var(--admin-primary);
}

.file-upload-area .file-names {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--admin-text);
}

/* --- SCORM upload ------------------------------------------------------- */
.scorm-upload-progress {
  margin-top: 0.75rem;
  width: 100%;
}

.progress-bar-track {
  width: 100%;
  height: 8px;
  background: var(--admin-border);
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: var(--admin-primary);
  border-radius: 4px;
  transition: width 0.2s ease;
}

.progress-text {
  display: block;
  font-size: 0.75rem;
  color: var(--admin-text-muted);
  margin-top: 0.25rem;
}

.scorm-upload-status {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
}

.scorm-upload-success {
  color: var(--admin-success, #16a34a);
}

.scorm-upload-warning {
  color: var(--admin-warning);
  background: var(--admin-warning-bg);
  border: 1px solid var(--admin-warning-border);
  border-radius: 6px;
  padding: 8px 12px;
}

.scorm-upload-error {
  color: var(--admin-danger, #dc2626);
}

/* --- Utility classes ---------------------------------------------------- */
.actions { display: flex; gap: 0.5rem; align-items: center; }
/* In a table cell the flex layout above is reset to table-cell, so the gap is
   lost. `button_to` also renders a block-level <form>, which would otherwise
   drop the delete button onto its own line. Lay the action items out inline
   with spacing between them instead. */
td.actions { display: table-cell; white-space: nowrap; }
td.actions > * { vertical-align: middle; }
td.actions > form { display: inline-block; margin: 0; }
td.actions > * + * { margin-left: 0.5rem; }
.flex-between { display: flex; justify-content: space-between; }
.flex-gap-sm { display: flex; gap: 0.5rem; }
.align-center { align-items: center; }
.wrap { flex-wrap: wrap; }
.nowrap { white-space: nowrap; }
.text-muted { color: var(--admin-text-muted); }
.link-muted { color: var(--admin-text-muted); text-decoration: none; }
.link-muted:hover { color: var(--admin-text); }
.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: 0.75rem; }
.mb-md { margin-bottom: 1rem; }
.mt-sm { margin-top: 0.5rem; }

.text-warning { color: var(--admin-warning); }
.text-success { color: var(--admin-success); }
.text-danger { color: var(--admin-danger); }
.text-sm { font-size: 0.85rem; }
.text-xs { font-size: 0.8rem; }
.gap-sm { gap: 0.5rem; }
.gap-md { gap: 0.75rem; }

/* --- Admin panels ------------------------------------------------------- */
.admin-panel {
  border: 1px solid var(--admin-border);
  border-radius: 12px;
  padding: 1rem;
  background: var(--admin-surface);
}

.admin-panel--spaced {
  margin-bottom: 1rem;
}

.admin-panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.admin-panel-title {
  font-size: 1rem;
  margin: 0 0 0.35rem;
}

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

/* --- Organization settings ------------------------------------------------ */
.organization-settings-org-card {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
}

.organization-settings-org-label {
  margin-right: 0.25rem;
}

.organization-settings-org-combobox {
  min-width: 18rem;
}

.organization-settings-combobox-empty {
  margin: 0.3rem 0 0;
}

.organization-settings-card-spaced {
  margin-top: 1.5rem;
}

.organization-settings-section-header {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.organization-settings-section-header .card-heading,
.organization-settings-section-header h3 {
  margin: 0;
}

.organization-settings-lti-header {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.organization-settings-lti-header .hint {
  margin: 0;
}

.organization-settings-copy-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.organization-settings-hint-spaced {
  margin-bottom: 1.5rem;
}

.organization-settings-tool-config-domain + .organization-settings-tool-config-domain {
  border-top: 1px solid var(--admin-border);
  margin-top: 1.5rem;
  padding-top: 1.5rem;
}

.organization-settings-tool-config-domain-heading {
  color: var(--admin-text-muted);
  font-size: 0.9rem;
  margin: 0;
}

.organization-settings-form-spaced {
  margin-top: 1.5rem;
}

.checkbox-label {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  accent-color: var(--admin-primary);
}

/* --- Model preset tables -------------------------------------------------- */

/* Seven columns including an action cell holding a button and a menu trigger.
   `table-layout: fixed` with a colgroup stops the name column collapsing and breaking the model id a
   character per line. The action cell then needs `white-space: normal`, because the global
   `td.actions { white-space: nowrap }` is what makes content escape a fixed-width column: with
   wrapping allowed the trigger drops below the button on a narrow viewport instead of spilling out of
   the card. Deliberately NOT solved with an `overflow-x` wrapper: that establishes a scroll container,
   which clips the row menu's absolutely positioned dropdown and makes it unopenable. */
.preset-table { table-layout: fixed; }

.preset-table td.actions {
  white-space: normal;
}

/* Column headings are single uppercase words, so they cannot wrap at a space. Left alone they overlap
   the next column; allowed to break they split mid-word ("STANDAAR/D"). Truncating is the one failure
   mode that is neither, and the full text stays available as a title. Columns are sized so this does
   not trigger at normal widths. */
.preset-table th {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Six columns of mostly short values, so the default 1rem of horizontal padding is a large share of a
   narrow column. Trimming it is what lets the headings fit without truncation. */
.preset-table th,
.preset-table td {
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}

.preset-table th:first-child,
.preset-table td:first-child { padding-left: 1rem; }

/* The model id is long and hyphen-heavy, so it gets one line and an ellipsis rather than being broken
   mid-token by the global `td code { overflow-wrap: anywhere }`. Full value is in a title. */
.preset-table .preset-model-id {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* One tbody per preset (so each preset's copies expand on their own) turns the global
   `tbody tr:last-child td { border-bottom: none }` into "no border after any preset", which runs the
   last copy row into the next preset. Restore it everywhere except the genuinely final row. */
.preset-table tbody tr:last-child td { border-bottom: 1px solid var(--admin-border); }
.preset-table tbody:last-of-type tr:last-child td { border-bottom: none; }

/* Owning organization, under the preset name and only when it is not the viewer's own, so a preset a
   customer created is labelled without putting "Defacto" under every one of ours. */
.preset-owner-org {
  color: var(--admin-text-muted);
  display: block;
  font-size: 0.75rem;
  margin-top: 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Default marker. A pill saying "default" cost a whole column for one bit of information; a check in a
   narrow column says the same and gives the space to the name and the actions. */
.preset-default-mark {
  color: var(--admin-success, #15803d);
  font-size: 1rem;
  font-weight: 700;
}

/* The copy count expands the list of organizations holding one, so it is a button. It should still
   read as the badge it replaced, hence no button chrome, plus a caret to show it opens. */
.preset-copies-toggle {
  align-items: center;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.7rem;
  gap: 0.3rem;
}

/* Underline the label only. On the button itself the decoration propagates into the caret, and the
   caret's rotation turns that underline on its side, leaving a stray vertical bar beside it. */
.preset-copies-toggle:hover .preset-copies-label { text-decoration: underline; }

.preset-copies-caret { transition: transform 0.15s; }
.preset-copies-toggle[aria-expanded="true"] .preset-copies-caret { transform: rotate(90deg); }

/* Revealed copies: tinted, and indented past the name of the preset they belong to, with a spine down
   their left edge. An arrow glyph was tried first and read backwards, because it sat to the left of
   the parent's name rather than inside it. Consecutive rows put their spine segments end to end, so a
   run of copies reads as one branch hanging off the preset above. */
.preset-table__copy > td { background: var(--admin-bg); }

.preset-table__copy > td:first-child {
  border-left: 2px solid var(--admin-text-muted);
  color: var(--admin-text-muted);
  padding-left: 2.25rem;
}

/* --- Preset copy form ----------------------------------------------------- */

/* Indented to line up with the content inside the panel below it, rather than sitting against that
   panel's rounded corner. */
.preset-copy-lead { padding: 0 1rem; }

/* Target organizations: a scrollable list of selectable rows, styled like the question-editor radio
   list, so it stays usable at fifty organizations instead of running off the page. */
.preset-copy-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-height: 320px;
  overflow-y: auto;
}

.preset-copy-row {
  align-items: center;
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  color: var(--admin-text);
  cursor: pointer;
  display: flex;
  font-size: 0.9rem;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  transition: background 0.15s, border-color 0.15s;
}

.preset-copy-row:hover { border-color: var(--admin-primary); }
.preset-copy-row:has(input:checked) { border-color: var(--admin-primary); background: var(--admin-bg); }
.preset-copy-row input { flex-shrink: 0; }

/* `display: flex` above beats the user-agent `[hidden] { display: none }` on a specificity tie, so
   filtering the list would set the attribute and change nothing. Same guard as .placement-card. */
.preset-copy-row[hidden] { display: none; }

.preset-copy-row--taken {
  cursor: default;
  color: var(--admin-text-muted);
}

.preset-copy-row--taken:hover { border-color: var(--admin-border); }

.preset-copy-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

.preset-copy-count,
.preset-copy-empty {
  color: var(--admin-text-muted);
  font-size: 0.8rem;
}

.preset-copy-empty { padding: 0.4rem 0; }

.action-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}

/* --- Filters ------------------------------------------------------------ */
.filter-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.filter-input {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  font-size: 0.85rem;
  background: var(--admin-surface);
  color: inherit;
}

input[type="date"].filter-input {
  color: inherit;
}

input[type="date"].filter-input:not(:valid),
input[type="date"].filter-input[value=""] {
  color: var(--admin-text-muted);
}

select.filter-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  padding-right: 2rem;
}

.filter-search {
  width: 200px;
}

.filter-bar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

/* Quick-filter segmented control: a filled track in which the active option
   floats as a solid pill. The bg-vs-surface contrast makes the track read in
   both themes (light: gray on white card; dark: darker inset on the card). */
.filter-segment {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--admin-bg);
  border: 1px solid var(--admin-border);
  border-radius: 10px;
}

.filter-segment .btn {
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--admin-text-muted);
}

.filter-segment .btn:hover {
  background: var(--admin-surface);
  color: var(--admin-text);
}

.filter-segment .btn-primary,
.filter-segment .btn-primary:hover {
  background: var(--admin-primary);
  color: white;
}

/* Stacked filter-bar layout (modules index): search + status quick filters on
   the first row, the labeled type row below it, panel fields underneath. */
.filter-bar--stacked .filter-bar-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.filter-bar--stacked .filter-bar-row + .filter-bar-row {
  border-top: 1px solid var(--admin-border);
  margin-top: 0.25rem;
  padding-top: 0.75rem;
}

/* The row divider already separates the sections, so the panel drops its own
   top rule in the stacked layout. */
.filter-bar--stacked .filter-panel {
  border-top: 0;
  margin-top: 0;
  padding-top: 0.25rem;
}

.filter-bar--stacked .filter-bar-row--end {
  align-items: flex-end;
}

/* Right-hand cluster of the type row (clear link + panel toggle), pulled up
   slightly so it reads as centered against the segment track it bottom-aligns
   with. */
.filter-bar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
  margin-bottom: 4px;
}

.filter-quick-label {
  display: block;
  font-size: 0.8rem;
  color: var(--admin-text-muted);
  margin-bottom: 0.35rem;
}

.filter-search-wrap {
  position: relative;
  flex: 1;
  min-width: 220px;
  max-width: 420px;
}

.filter-search-wrap .filter-search {
  width: 100%;
  padding-left: 2.1rem;
}

.filter-search-icon {
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--admin-text-muted);
  pointer-events: none;
}

.filter-panel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
  padding-top: 0.75rem;
  margin-top: 0.75rem;
  border-top: 1px solid var(--admin-border);
  width: 100%;
}

.filter-panel-group label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--admin-text-muted);
  margin-bottom: 0.25rem;
}

.filter-panel-group .filter-input {
  width: 100%;
  box-sizing: border-box;
}

.filter-toggle-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--admin-primary);
  color: white;
  font-size: 0.65rem;
  font-weight: 600;
  min-width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  margin-left: 0.25rem;
}

/* --- Dropdowns ---------------------------------------------------------- */
.dropdown {
  display: inline-block;
  position: relative;
}

.dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  min-width: 190px;
  padding: 0.35rem;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  box-shadow: var(--admin-shadow);
  z-index: 10;
}

.dropdown-menu.is-open {
  display: block;
}

.dropdown-menu--start {
  left: 0;
  right: auto;
}

.dropdown-menu form {
  margin: 0;
}

.dropdown-menu-item {
  display: block;
  width: 100%;
  padding: 0.45rem 0.75rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--admin-text);
  font-size: 0.85rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.dropdown-menu-item:hover {
  background: var(--admin-bg);
  color: var(--admin-text);
}

.dropdown-menu-item--danger {
  color: var(--admin-danger);
}

.dropdown-menu-divider {
  border-top: 1px solid var(--admin-border);
  margin: 0.35rem 0;
}

/* --- Status text -------------------------------------------------------- */
.status-text--pending { color: var(--admin-warning); }
.status-text--processing { color: var(--admin-info); }
.status-text--completed { color: var(--admin-success); }
.status-text--failed { color: var(--admin-danger); }

/* --- Admin banner ------------------------------------------------------- */
.admin-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  margin-bottom: 1rem;
  border-radius: 8px;
}

.admin-banner--published {
  background: var(--admin-success-bg);
  border: 1px solid var(--admin-success-border);
}

.admin-banner__content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  min-width: 0;
}

.admin-banner__label {
  color: var(--admin-success);
  font-weight: 600;
  white-space: nowrap;
}

.admin-banner__code {
  color: var(--admin-text);
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- AI review live banner ---------------------------------------------- */
.review-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  margin-bottom: 1rem;
  border-radius: 8px;
  background: var(--admin-accent-bg);
  border: 1px solid var(--admin-border);
}

.review-banner__label {
  font-weight: 600;
  white-space: nowrap;
  color: var(--admin-text);
}

.review-banner__status {
  flex: 1;
  min-width: 0;
}

.review-banner__link {
  flex-shrink: 0;
  white-space: nowrap;
}

/* --- Mode picker -------------------------------------------------------- */
.mode-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
}

.mode-option {
  border: 1px solid var(--admin-border);
  border-radius: 10px;
  padding: 0.9rem;
  background: var(--admin-surface);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.mode-option:hover {
  border-color: var(--admin-primary);
  box-shadow: 0 10px 24px rgba(79, 70, 229, 0.08);
}

.mode-option--active {
  border-color: var(--admin-primary);
  background: var(--admin-accent-bg);
}

.mode-option__radio {
  margin-right: 0.4rem;
}

.mode-option__label {
  font-size: 0.92rem;
}

.mode-option__description {
  font-size: 0.78rem;
  color: var(--admin-text-muted);
  margin-top: 0.25rem;
}

/* --- Source URL fields -------------------------------------------------- */
.source-url-row {
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.5rem;
}

.source-url-fields {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.source-url-input {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  font-size: 0.875rem;
  font-family: inherit;
  background: var(--admin-surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.source-url-input:focus,
.author-image-field input[type="text"]:focus {
  outline: none;
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.source-url-follow {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8rem;
  white-space: nowrap;
}

.source-url-status {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--admin-text-muted);
}

.icon-button {
  min-width: 2rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* --- Remove button (subtle × icon) -------------------------------------- */
.remove-btn {
  background: none;
  border: none;
  color: var(--admin-text-muted);
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  padding: 0.25rem;
  opacity: 0.45;
  transition: opacity 0.15s, color 0.15s;
}

.remove-btn:hover {
  color: var(--admin-danger);
  opacity: 1;
}

/* --- Styled file input -------------------------------------------------- */
.file-input-styled {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.file-input-styled input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.file-input-styled .file-input-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  background: var(--admin-surface);
  color: var(--admin-text);
  transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
}

.file-input-styled .file-input-label:hover {
  border-color: var(--admin-primary);
  background: var(--admin-bg);
}

.file-input-styled .file-input-name {
  font-size: 0.8rem;
  color: var(--admin-text-muted);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Styled select (outside .form-group) -------------------------------- */
.styled-select {
  -webkit-appearance: none;
  appearance: none;
  padding: 0.4rem 2rem 0.4rem 0.75rem;
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  font-size: 0.85rem;
  font-family: inherit;
  background: var(--admin-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E") no-repeat right 0.6rem center;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.styled-select:focus {
  outline: none;
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

/* --- Combobox (typeahead) ------------------------------------------------ */
.combobox {
  position: relative;
}

/* Combobox sized to sit inline in a filter bar alongside the native selects. */
.filter-combobox {
  flex: 0 1 16rem;
  min-width: 12rem;
}

.combobox .styled-input {
  width: 100%;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  font-size: 0.85rem;
  font-family: inherit;
  background: var(--admin-surface);
  color: var(--admin-text);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.combobox .styled-input:focus {
  outline: none;
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.styled-textarea {
  width: 100%;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  font-size: 0.85rem;
  font-family: inherit;
  line-height: 1.4;
  background: var(--admin-surface);
  color: var(--admin-text);
  resize: vertical;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.styled-textarea:focus {
  outline: none;
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.combobox-listbox {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin: 0.25rem 0 0;
  padding: 0.25rem;
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  box-shadow: var(--admin-shadow);
  z-index: 100;
}

.combobox-option {
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--admin-text);
  transition: background 0.1s;
}

.combobox-option:hover,
.combobox-option.is-active {
  background: var(--admin-bg);
}

/* Separates a pinned sentinel (e.g. "All organizations") from the regular options below it. */
.combobox-option--pinned-last {
  margin-bottom: 0.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--admin-border);
}

/* --- Block-copy wizard: two-pane visual layout (B.6) -------------------- */
/* Let the wizard escape .admin-container's 1100px cap so the two panes
   can stretch on wider monitors. Caps at 2400px (≈1200px per pane,
   which is enough for the module's ~800px content + comfortable
   margins). On ultrawide / 4K+ the extra space sits as page margins
   rather than stretching iframe contents further. */
body.block-copy-wide .admin-container {
  max-width: min(2400px, calc(100vw - 3rem));
}

.block-copy-panes {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  /* Generous gap on each side of the divider so the panes don't crowd
     it. Visual rhythm is pane | gap | divider | gap | pane. */
  gap: clamp(1.5rem, 4vw, 5rem);
  margin-top: 0.5rem;
}

.block-copy-panes__divider {
  position: relative;
  width: 1px;
  background: var(--admin-border);
  align-self: stretch;
}

.block-copy-panes__arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 1px solid var(--admin-border);
  background: var(--admin-surface);
  color: var(--admin-primary);
  font-size: 1.1rem;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

@media (max-width: 1100px) {
  .block-copy-panes {
    grid-template-columns: 1fr;
  }
  .block-copy-panes__divider {
    display: none;
  }
}

.block-copy-pane {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface);
  overflow: hidden;
}

.block-copy-pane__header {
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--admin-border);
  background: var(--admin-bg);
  text-align: center;
}

.block-copy-pane__heading {
  margin: 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--admin-text-muted);
}

.block-copy-pane__subheading {
  margin: 0.15rem 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--admin-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.block-copy-pane__frame {
  flex: 1 1 auto;
  width: 100%;
  /* Fixed responsive pane height. Each pane scrolls its module
     content internally (the module template's native .content-area
     overflow handles it). Floor keeps the pane usable, cap prevents
     absurdly tall panes on 4K displays, mid-range tracks viewport
     so taller windows give more vertical real estate. */
  height: clamp(500px, calc(100vh - 280px), 1100px);
  border: 0;
  display: block;
  background: var(--admin-surface);
}

/* On narrower viewports the admin chrome takes proportionally less
   vertical space and the 500px floor overshoots — leaving the pane
   taller than the comfortable visible area. Drop the reservation
   and floor so the pane fits the available room. */
@media (max-width: 1100px) {
  .block-copy-pane__frame {
    height: clamp(380px, calc(100vh - 200px), 800px);
  }
}

.block-copy-pane__empty {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: var(--admin-text-muted);
  font-size: 0.9rem;
  text-align: center;
}

/* --- Block-copy wizard -------------------------------------------------- */
/* Class rules below (e.g. display: flex on .placement-card__field) would
   otherwise win against [hidden]'s display: none on a specificity tie.
   Force the attribute to win for the wizard's hideable containers. */
.placement-card[hidden],
.placement-card__field[hidden] {
  display: none !important;
}

.block-tree {
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface);
  overflow: hidden;
}

.block-tree__section {
  border-bottom: 1px solid var(--admin-border);
}

.block-tree__section:last-child {
  border-bottom: none;
}

.block-tree__row {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  transition: background 0.1s;
}

.block-tree__row:hover {
  background: var(--admin-bg);
}

.block-tree__checkbox {
  margin-top: 0.2rem;
  flex: 0 0 auto;
}

.block-tree__row-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.block-tree__children {
  list-style: none;
  margin: 0;
  padding: 0 0 0.25rem 1.5rem;
  border-top: 1px solid var(--admin-border);
}

.block-tree__children > li {
  border-bottom: 1px solid var(--admin-border);
}

.block-tree__children > li:last-child {
  border-bottom: none;
}

.block-tree__orphans-heading {
  padding: 0.5rem 0.9rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--admin-text-muted);
  background: var(--admin-bg);
}

.placement-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.placement-card {
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  background: var(--admin-surface);
}

.placement-card__header {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.6rem;
}

.placement-card__title {
  font-size: 0.85rem;
  color: var(--admin-text);
  overflow: hidden;
  text-overflow: ellipsis;
}

.placement-card__fields {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.placement-card__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.placement-card__modes {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.placement-card__mode {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--admin-text);
  background: var(--admin-surface);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.placement-card__mode:hover {
  background: var(--admin-bg);
}

.placement-card__mode:has(input[type="radio"]:checked) {
  background: var(--admin-bg);
  border-color: var(--admin-primary);
  color: var(--admin-primary);
}

.placement-card__mode input[type="radio"] {
  accent-color: var(--admin-primary);
  margin: 0;
}

/* --- Block-copy sticky action bar --------------------------------------- */
/* Pins the primary Copy action to the bottom of the viewport so it stays
   reachable on a long two-pane page. The wizard reserves bottom padding
   so page content never hides behind it. */
.block-copy-actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--admin-surface);
  border-top: 1px solid var(--admin-border);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
  padding: 0.6rem 1.5rem;
}

.block-copy-actionbar__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  max-width: min(2400px, calc(100vw - 3rem));
  margin: 0 auto;
}

/* Reserve room so the last panes/content clear the fixed bar. */
body.block-copy-wide .admin-container {
  padding-bottom: 5rem;
}

/* --- Block-copy target picker ------------------------------------------- */
.block-copy-target-picker {
  padding: 0.6rem 1rem;
  margin-bottom: 0.75rem;
}

/* --- Block-copy selection card ------------------------------------------ */
/* Mirrors .block-copy-plan structure so the two cards read as parallel
   stages ("what's picked" → "where each picked thing is going"). */
.block-copy-selection {
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface);
  padding: 0.85rem 1rem;
  margin-bottom: 0.75rem;
}

.block-copy-selection__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.block-copy-selection__heading {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--admin-text);
}

.block-copy-selection__actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-left: auto;
}

.block-copy-selection__empty {
  margin: 0;
  font-size: 0.85rem;
  color: var(--admin-text-muted);
}

.block-copy-selection__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* display: flex above beats [hidden]'s display: none, so make the
   hidden (empty) state explicit. */
.block-copy-selection__list[hidden] {
  display: none !important;
}

.block-copy-selection__row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  background: var(--admin-bg);
}

.block-copy-selection__row-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.block-copy-selection__row-label {
  font-size: 0.9rem;
  color: var(--admin-text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* "Body only" scope tag on selection + plan rows. */
.block-copy-scope-tag {
  flex: 0 0 auto;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  color: var(--admin-primary);
  background: rgba(79, 70, 229, 0.1);
}

/* Compact per-row remove button used by both selection and plan cards. */
.btn-xs {
  padding: 0.18rem 0.55rem;
  font-size: 0.78rem;
  line-height: 1.25;
}

/* --- Block-copy plan summary -------------------------------------------- */
.block-copy-plan {
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface);
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
}

.block-copy-plan__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.block-copy-plan__heading {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--admin-text);
}

.block-copy-plan__actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-left: auto;
}

.block-copy-plan__empty {
  margin: 0;
  font-size: 0.85rem;
  color: var(--admin-text-muted);
}

.block-copy-plan__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* display: flex above beats [hidden]'s display: none, so make the
   hidden (empty) state explicit. */
.block-copy-plan__list[hidden] {
  display: none !important;
}

.block-copy-plan__row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  background: var(--admin-bg);
}

.block-copy-plan__row-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.block-copy-plan__row-heading {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.block-copy-plan__row-label {
  font-size: 0.9rem;
  color: var(--admin-text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.block-copy-plan__row-detail {
  margin: 0;
  font-size: 0.82rem;
  color: var(--admin-text-muted);
}

/* --- Block-copy placement popover --------------------------------------- */
.block-copy-popover {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}

.block-copy-popover[hidden] {
  display: none !important;
}

.block-copy-popover__panel {
  position: fixed;
  pointer-events: auto;
  min-width: 320px;
  max-width: min(540px, calc(100vw - 2rem));
  border: 1px solid var(--admin-border);
  border-radius: 10px;
  background: var(--admin-surface);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.block-copy-popover__header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem 0.5rem;
  border-bottom: 1px solid var(--admin-border);
}

.block-copy-popover__eyebrow {
  margin: 0 0 0.1rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--admin-text-muted);
}

.block-copy-popover__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--admin-text);
  word-break: break-word;
}

.block-copy-popover__close {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--admin-text-muted);
  cursor: pointer;
  padding: 0 0.25rem;
  margin-left: auto;
}

.block-copy-popover__close:hover {
  color: var(--admin-text);
}

.block-copy-popover__rows {
  padding: 0.5rem 1rem;
  overflow-y: auto;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.block-copy-popover__footer {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 0.6rem 1rem 0.75rem;
  border-top: 1px solid var(--admin-border);
  background: var(--admin-bg);
}

.block-copy-popover-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.6rem 0.65rem;
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  background: var(--admin-bg);
}

.block-copy-popover-row__header {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.block-copy-popover-row__label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--admin-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.block-copy-popover-row__modes {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.block-copy-popover-row__modes .placement-card__mode {
  font-size: 0.8rem;
  padding: 0.3rem 0.55rem;
}

.block-copy-popover-row__new-title {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.block-copy-popover-row__new-title[hidden] {
  display: none !important;
}

.block-copy-popover-row__new-title input[type="text"] {
  width: 100%;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--admin-border);
  border-radius: 5px;
  font-size: 0.85rem;
  background: var(--admin-surface);
  color: var(--admin-text);
}

.block-copy-popover-row__new-title input[type="text"].is-invalid {
  border-color: var(--admin-danger, #d34545);
  box-shadow: 0 0 0 2px rgba(211, 69, 69, 0.18);
}

/* Generic invalid-field state (red border), toggled by JS validation such as
   the YouTube URL check across the media forms. */
.is-invalid {
  border-color: var(--admin-danger, #d34545) !important;
  box-shadow: 0 0 0 2px rgba(211, 69, 69, 0.18);
}

/* Inline explanation line shown under an invalid field. */
.field-inline-error {
  color: var(--admin-danger, #d34545);
  font-size: 0.8rem;
  margin-top: 0.25rem;
}

/* Inline advisory line (amber) for soft, non-blocking hints such as the YouTube
   availability check. */
.field-inline-warning {
  color: var(--admin-warning, #b45309);
  font-size: 0.8rem;
  margin-top: 0.25rem;
}

.block-copy-popover-row__warning {
  margin: 0;
  font-size: 0.8rem;
  color: var(--admin-danger, #b14848);
  background: rgba(211, 69, 69, 0.08);
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
}

/* Explainer text shown in the popover when the clicked anchor has
   no valid placements for the current selection. Sits where the row
   list normally goes; the surrounding chrome (header eyebrow + title,
   confirm button) is hidden by the popover controller in this mode. */
.block-copy-popover__explainer {
  margin: 0;
  font-size: 0.9rem;
  color: var(--admin-text);
  background: var(--admin-bg);
  padding: 0.75rem;
  border-radius: 6px;
  line-height: 1.4;
}

/* Inline hint inside the source pane explaining why some blocks are
   dimmed. Sits between the pane header and the iframe; surface tone
   matches other admin warnings without being alarming. */
.block-copy-pane__hint {
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--admin-border);
  background: rgba(34, 197, 94, 0.06);
  color: var(--admin-text);
  font-size: 0.82rem;
  line-height: 1.4;
}

/* Persistent legend under the source pane header explaining the two
   section click targets (title = whole section, body = content only). */
.block-copy-pane__legend {
  margin: 0;
  padding: 0.5rem 0.9rem;
  border-bottom: 1px solid var(--admin-border);
  background: var(--admin-bg);
  color: var(--admin-text-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.block-copy-popover-row__include {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.block-copy-popover-row__include[hidden] {
  display: none !important;
}

.block-copy-popover-row__include input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  accent-color: var(--admin-primary);
}

/* Unchecked rows stay visible but visually inert — the mode pills,
   label, and new-section title field grey out so the user can see
   they won't be placed by the next Confirm click. */
.block-copy-popover-row--excluded .block-copy-popover-row__label,
.block-copy-popover-row--excluded [data-role="badge"],
.block-copy-popover-row--excluded .block-copy-popover-row__modes,
.block-copy-popover-row--excluded .block-copy-popover-row__new-title {
  opacity: 0.45;
}

.block-copy-popover-row--excluded .placement-card__mode {
  pointer-events: none;
}

/* Disabled mode pill — pointer-cursor + tooltip suppressed so users
   can see the option exists but understand it isn't available for
   the section they clicked. */
.placement-card__mode--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.placement-card__mode--disabled:hover {
  background: var(--admin-surface);
  border-color: var(--admin-border);
  color: var(--admin-text);
}

/* --- Current files ------------------------------------------------------ */
.current-files {
  margin-top: 0.5rem;
}

.current-files__label {
  margin-bottom: 0.35rem;
  font-weight: 500;
  color: var(--admin-text);
}

/* --- Author images ------------------------------------------------------ */
.author-image-row {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  padding: 0.75rem;
}

.author-image-field {
  flex: 1;
  min-width: 180px;
}

.author-image-field input[type="text"] {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  font-size: 0.875rem;
  font-family: inherit;
  background: var(--admin-surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* --- Section slots ------------------------------------------------------ */
.section-slot-row {
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
}

.section-slot-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--admin-text-muted);
  margin-bottom: 0.4rem;
}

.section-slot-fields {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: end;
}

/* --- Summary card ------------------------------------------------------- */
.summary-card {
  border: 1px solid var(--admin-border);
  border-radius: 12px;
  padding: 1rem;
  background: linear-gradient(180deg, var(--admin-surface) 0%, var(--admin-bg) 100%);
  position: sticky;
  top: 1.5rem;
}

.summary-lines {
  display: grid;
  gap: 0.55rem;
  font-size: 0.86rem;
}

.summary-line {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: baseline;
}

.summary-line__label {
  color: var(--admin-text-muted);
}

.summary-line__value {
  text-align: right;
  font-size: 0.83rem;
}

.metric-bar {
  background: var(--admin-bg);
  border-radius: 4px;
  height: 4px;
  margin-top: 0.25rem;
}

.metric-bar__fill {
  background: var(--admin-warning);
  border-radius: 4px;
  height: 4px;
}

/* --- Cost chart (Generation Cost analytics section) -------------------- */
.cost-chart {
  position: relative;
}

.cost-chart .cost-day .cost-bar {
  fill: var(--admin-success);
  transition: fill 80ms ease-out;
}

.cost-chart .cost-day:hover .cost-bar {
  fill: var(--admin-success-strong);
}

.cost-tooltip {
  position: absolute;
  pointer-events: none;
  display: none;
  z-index: 10;
  background: var(--admin-text);
  color: var(--admin-surface);
  padding: 0.35rem 0.55rem;
  border-radius: 4px;
  font-size: 0.78rem;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* --- Preview ------------------------------------------------------------ */
.preview-frame {
  width: 100%;
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  height: 80vh;
  min-height: 400px;
  background: var(--admin-surface);
}

/* --- Detail grid -------------------------------------------------------- */
.detail-grid {
  display: grid;
  grid-template-columns: minmax(12rem, max-content) minmax(0, 1fr);
  gap: 0.5rem 1.5rem;
  font-size: 0.875rem;
}

.detail-grid dt {
  font-weight: 500;
  color: var(--admin-text-muted);
}

.detail-grid dd {
  margin: 0;
  word-break: break-word;
}

.organization-login-url {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* --- Glossary ----------------------------------------------------------- */
.glossary-list {
  margin: 0;
}

.glossary-list > div {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--admin-border);
}

.glossary-list > div:first-child {
  padding-top: 0;
}

.glossary-list > div:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.glossary-list dt {
  font-weight: 600;
  color: var(--admin-text);
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}

.glossary-list dd {
  margin: 0;
  color: var(--admin-text-muted);
  font-size: 0.875rem;
  line-height: 1.55;
}

/* --- Release notes ------------------------------------------------------ */
.release-notes-content h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--admin-text);
  margin: 1.75rem 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--admin-border);
}

.release-notes-content h2:first-child {
  margin-top: 0;
}

.release-notes-content h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--admin-text);
  margin: 1.25rem 0 0.5rem;
}

.release-notes-content p {
  color: var(--admin-text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.release-notes-content ul {
  margin: 0.5rem 0;
  padding-left: 1.25rem;
}

.release-notes-content li {
  color: var(--admin-text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 0.4rem;
}

.release-notes-content li strong {
  color: var(--admin-text);
}

.release-notes-content hr {
  border: none;
  border-top: 1px solid var(--admin-border);
  margin: 1.5rem 0;
}

.release-notes-content a {
  color: var(--admin-primary);
}

/* --- Show page ---------------------------------------------------------- */
/* Title and status line on the left, page actions opposite them on the right.
   Wraps to stacked rows when the two columns no longer fit, at which point the
   row gap provides the separation the actions used to get from a top margin. */
.show-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* min-width lets a long title wrap inside this column instead of stretching it
   and pushing the actions out of the header. */
.show-header__main {
  flex: 1 1 20rem;
  min-width: 0;
}

.show-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
}

.show-meta {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.85rem;
}

.show-header__actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.card-heading {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
}

.card-subheading {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.bordered-item {
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  padding: 0.75rem 0.85rem;
}

.bordered-item + .bordered-item {
  margin-top: 0.5rem;
}

.tab-panel > .action-row {
  margin-bottom: 1.25rem;
}

.tab-panel > .card + .card {
  margin-top: 0;
}

.source-url-entry + .source-url-entry {
  margin-top: 0.5rem;
}

/* --- Change history entries -------------------------------------------- */
.change-entry {
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  padding: 0.75rem;
  font-size: 0.8rem;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.change-entry--quiet {
  opacity: 0.86;
}

.change-entry__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.change-entry__badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.35;
}

.change-entry__badge--redo {
  background: var(--admin-info-bg);
  color: var(--admin-info);
}

.change-entry__badge--muted {
  background: var(--admin-border);
  color: var(--admin-text-muted);
}

.change-entry__badge--media {
  background: var(--admin-purple-bg);
  color: var(--admin-purple);
}

.change-entry__badge--correction {
  background: var(--admin-warning-bg);
  color: var(--admin-warning);
}

.change-entry__badge--edit {
  background: var(--admin-purple-bg);
  color: var(--admin-purple);
}

.change-entry__time {
  color: var(--admin-text-muted);
  font-size: 0.7rem;
  white-space: nowrap;
}

.change-entry__title {
  margin: 0 0 0.25rem;
  line-height: 1.4;
}

.change-entry__scope {
  color: var(--admin-text-muted);
  font-size: 0.7rem;
  margin: 0 0 0.5rem;
}

.change-entry__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.change-entry__actions .btn-sm {
  font-size: 0.7rem;
}

.change-entry__actions .btn-sm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.change-value-preview {
  color: var(--admin-text-muted);
  font-size: 0.72rem;
}

.change-value-preview--compact {
  display: grid;
  gap: 0.25rem;
  margin: 0.45rem 0 0.55rem;
}

.change-value-preview__label {
  font-weight: 600;
  color: var(--admin-text-muted);
}

/* --- Version diff previews --------------------------------------------- */
.version-diff-empty,
.version-diff-summary {
  color: var(--admin-text-muted);
  font-size: 0.85rem;
}

.version-diff-summary {
  margin: 0 0 1rem;
}

.version-diff-group {
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  margin-bottom: 1rem;
  background: var(--admin-surface);
  border-left: 3px solid var(--admin-warning);
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.version-diff-group[open] {
  background: color-mix(in srgb, var(--admin-bg) 48%, var(--admin-surface));
}

.version-diff-group__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.75rem;
  padding: 1rem 1rem 1rem 1.15rem;
  cursor: pointer;
  list-style: none;
  transition: background-color 0.15s;
}

.version-diff-group__summary::-webkit-details-marker {
  display: none;
}

.version-diff-group__summary:hover {
  background: color-mix(in srgb, var(--admin-warning-bg) 42%, transparent);
}

.version-diff-list {
  display: grid;
  gap: 0.35rem;
}

.version-restore-workspace {
  display: grid;
  grid-template-columns: minmax(18rem, 0.9fr) minmax(24rem, 1.35fr);
  gap: 1rem;
  align-items: start;
}

.version-restore-workspace__changes {
  min-width: 0;
}

.version-restore-workspace__preview {
  position: sticky;
  top: 1rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 620px;
  height: calc(100vh - 2rem);
  max-height: calc(100vh - 2rem);
}

.version-restore-workspace__preview h3 {
  margin: 0 0 0.65rem;
  font-size: 0.9rem;
}

.version-restore-workspace__preview .preview-frame {
  flex: 1 1 auto;
  min-height: 620px;
  display: block;
  height: auto;
}

.version-diff-card {
  position: relative;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-left: 3px solid var(--admin-border);
  border-radius: 6px;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.version-diff-card[open] {
  background: color-mix(in srgb, var(--admin-bg) 48%, var(--admin-surface));
}

.version-diff-card.is-preview-linked {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--admin-primary) 42%, transparent);
}

.version-diff-area-header {
  width: fit-content;
  max-width: 100%;
  margin-top: 0.95rem;
  padding: 0.22rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--admin-primary) 30%, var(--admin-border));
  border-radius: 4px;
  background: color-mix(in srgb, var(--admin-primary) 8%, var(--admin-surface));
  color: var(--admin-text-muted);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
}

.version-diff-area-header:first-child {
  margin-top: 0;
}

.version-diff-card--added {
  border-left-color: var(--admin-success);
}

.version-diff-card--removed {
  border-left-color: var(--admin-danger);
}

.version-diff-card--changed {
  border-left-color: var(--admin-warning);
}

.version-diff-card__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.75rem;
  padding: 1rem 1rem 1rem 1.15rem;
  cursor: pointer;
  list-style: none;
  transition: background-color 0.15s;
}

.version-diff-card__summary::-webkit-details-marker {
  display: none;
}

.version-diff-card__summary:hover {
  background: color-mix(in srgb, var(--admin-bg) 70%, var(--admin-surface));
}

.version-diff-card--added > .version-diff-card__summary:hover {
  background: color-mix(in srgb, var(--admin-success-bg) 42%, transparent);
}

.version-diff-card--removed > .version-diff-card__summary:hover {
  background: color-mix(in srgb, var(--admin-danger-bg) 42%, transparent);
}

.version-diff-card--changed > .version-diff-card__summary:hover {
  background: color-mix(in srgb, var(--admin-warning-bg) 42%, transparent);
}

.version-diff-card__badge {
  color: var(--admin-text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
}

.version-diff-card--added .version-diff-card__badge {
  color: var(--admin-success-strong);
}

.version-diff-card--removed .version-diff-card__badge {
  color: var(--admin-danger);
}

.version-diff-card--changed .version-diff-card__badge {
  color: var(--admin-warning);
}

.version-diff-card__heading {
  min-width: 0;
}

.version-diff-card__item-label {
  margin-bottom: 0.25rem;
  color: var(--admin-text-muted);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.35;
  text-transform: uppercase;
}

.version-diff-card__eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
  margin-bottom: 0.25rem;
  color: var(--admin-text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.35;
  text-transform: uppercase;
}

.version-diff-card__eyebrow span + span::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: 0.5rem;
  border-radius: 9999px;
  background: currentColor;
  vertical-align: middle;
}

.version-diff-card__heading h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
}

.version-diff-card__heading p {
  margin: 0.3rem 0 0;
  color: var(--admin-text-muted);
  font-size: 0.78rem;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
}

.version-diff-card__meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  white-space: nowrap;
}

.version-diff-card__preview-link {
  border: 0;
  background: none;
  color: var(--admin-primary);
  cursor: pointer;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0;
}

.version-diff-card__preview-link:hover {
  color: var(--admin-primary-hover);
  text-decoration: underline;
}

.version-diff-card__fields {
  display: grid;
  gap: 0;
  margin: 0 1rem 1rem 1.15rem;
  padding: 0 0 0 0.85rem;
  border-left: 1px solid var(--admin-border);
}

.version-diff-field {
  border-top: 1px solid var(--admin-border);
}

.version-diff-field__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0;
  cursor: pointer;
  list-style: none;
  border-radius: 4px;
  transition: background-color 0.15s, padding-inline 0.15s;
}

.version-diff-field__summary::-webkit-details-marker {
  display: none;
}

.version-diff-field__summary:hover {
  background: color-mix(in srgb, var(--admin-bg) 72%, var(--admin-surface));
  padding-inline: 0.45rem;
}

.version-diff-field__summary::after {
  content: "+";
  color: var(--admin-text-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.version-diff-field[open] > .version-diff-field__summary::after {
  content: "-";
}

.version-diff-field__label {
  color: var(--admin-text);
  font-size: 0.8rem;
  font-weight: 700;
}

.version-diff-field__values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.75rem;
  padding: 0.1rem 0 0.8rem;
}

.version-diff-value {
  min-width: 0;
  padding: 0.1rem 0 0.1rem 0.75rem;
  border-left: 2px solid var(--admin-border);
}

.version-diff-value--old {
  border-left-color: var(--admin-danger-border);
}

.version-diff-value--new {
  border-left-color: var(--admin-success-border);
}

.version-diff-value__eyebrow {
  margin-bottom: 0.25rem;
  color: var(--admin-text-muted);
  font-size: 0.7rem;
  font-weight: 700;
}

.version-diff-value__body {
  color: var(--admin-text);
  font-size: 0.84rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.version-diff-value__body p,
.version-diff-value__body ul,
.version-diff-value__body ol,
.version-diff-value__body dl {
  margin-top: 0;
  margin-bottom: 0;
}

.version-diff-value__body ul,
.version-diff-value__body ol {
  padding-left: 1.35rem;
}

.version-diff-value__body p + p,
.version-diff-value__body ul + p,
.version-diff-value__body ol + p,
.version-diff-value__body dl + p {
  margin-top: 0.5rem;
}

.content-version-options {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding-left: 1.2rem;
}

.content-version-option {
  padding: 0.45rem 0.6rem;
  border-left: 3px solid var(--admin-border);
  border-radius: 4px;
}

.content-version-option--correct {
  border-left-color: var(--admin-success);
  background: color-mix(in srgb, var(--admin-success-bg) 58%, transparent);
}

.content-version-option--incorrect {
  border-left-color: var(--admin-danger-border);
  background: color-mix(in srgb, var(--admin-danger-bg) 34%, transparent);
}

.content-version-option__text {
  font-weight: 600;
}

.content-version-option__explanation {
  margin-top: 0.25rem;
  color: var(--admin-text-muted);
  font-size: 0.78rem;
}

@media (max-width: 1100px) {
  .version-restore-workspace {
    grid-template-columns: 1fr;
  }

  .version-restore-workspace__preview {
    position: static;
    min-height: 0;
    height: auto;
    max-height: none;
  }

  .version-restore-workspace__preview .preview-frame {
    height: min(78vh, 760px);
    min-height: 420px;
  }
}

/* --- Source file chips -------------------------------------------------- */
.source-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.source-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 100%;
  min-width: 0;
  padding: 0.25rem 0.6rem 0.25rem 0.35rem;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: 9999px;
  font-size: 0.8rem;
  line-height: 1.25;
}

.source-chip__ext {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.source-chip__ext--pdf { background: #fee2e2; color: #991b1b; }
.source-chip__ext--docx,
.source-chip__ext--doc { background: #dbeafe; color: #1e40af; }
.source-chip__ext--pptx,
.source-chip__ext--ppt { background: #fef3c7; color: #92400e; }
.source-chip__ext--txt,
.source-chip__ext--md { background: #e5e7eb; color: #374151; }
.source-chip__ext--html,
.source-chip__ext--htm { background: #dcfce7; color: #166534; }
.source-chip__ext--other { background: #ede9fe; color: #5b21b6; }

[data-theme="dark"] .source-chip__ext--pdf { background: #3A1F18; color: #E5B1A0; }
[data-theme="dark"] .source-chip__ext--docx,
[data-theme="dark"] .source-chip__ext--doc { background: #1F2A32; color: #BDCED8; }
[data-theme="dark"] .source-chip__ext--pptx,
[data-theme="dark"] .source-chip__ext--ppt { background: #3A2E1A; color: #E8C597; }
[data-theme="dark"] .source-chip__ext--txt,
[data-theme="dark"] .source-chip__ext--md { background: #36332F; color: #ACA59C; }
[data-theme="dark"] .source-chip__ext--html,
[data-theme="dark"] .source-chip__ext--htm { background: #16291C; color: #9FD8AE; }
[data-theme="dark"] .source-chip__ext--other { background: #2E251C; color: #E5BE87; }

.source-chip__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.source-chip-list__toggle {
  background: transparent;
  border: 1px dashed var(--admin-border);
  border-radius: 9999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.78rem;
  color: var(--admin-text-muted);
  cursor: pointer;
  font-family: inherit;
}

.source-chip-list__toggle:hover {
  color: var(--admin-text);
  border-style: solid;
}

.review-item {
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  padding: 0.6rem 0.85rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.review-item + .review-item {
  margin-top: 0.4rem;
}

.section-plan-card {
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  padding: 0.7rem 0.85rem;
}

.placeholder-card {
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  padding: 1rem;
}

.placeholder-card + .placeholder-card {
  margin-top: 0.75rem;
}

/* A labeled box that ties an input (file picker / section dropdown) to its
   action button so the pairing is unambiguous. */
.placeholder-actions__group {
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.5rem;
}

.image-meta {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  color: var(--admin-text-muted);
}

.placeholder-actions__label {
  display: block;
  font-size: 0.72rem;
  color: var(--admin-text-muted);
  margin-bottom: 0.3rem;
}

.placeholder-actions__row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

/* --- Collapsible -------------------------------------------------------- */
.collapsible-details > summary { list-style: none; }
.collapsible-details > summary::-webkit-details-marker { display: none; }

.collapsible-summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  transition: background 0.15s;
}

.collapsible-summary:hover {
  background: var(--admin-bg);
}

.collapsible-chevron {
  font-size: 0.7rem;
  color: var(--admin-text-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.collapsible-details[open] > .collapsible-summary .collapsible-chevron {
  transform: rotate(180deg);
}

.collapsible-body {
  padding: 0 1.25rem 1rem;
}

/* --- Workflow stepper --------------------------------------------------- */
.workflow-stepper {
  display: flex;
  align-items: center;
  margin-bottom: 1.25rem;
  padding: 0.75rem 1rem;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: 8px;
}

.workflow-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--admin-text-muted);
  white-space: nowrap;
}

.workflow-step-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--admin-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--admin-surface);
  flex-shrink: 0;
}

.workflow-step--completed .workflow-step-circle {
  background: var(--admin-success);
  border-color: var(--admin-success);
  color: #fff;
}

.workflow-step--current .workflow-step-circle {
  background: var(--admin-primary);
  border-color: var(--admin-primary);
  color: #fff;
}

.workflow-step--current { color: var(--admin-text); font-weight: 600; }
.workflow-step--completed { color: var(--admin-success); }

.workflow-step a { color: inherit; text-decoration: none; }
.workflow-step a:hover { text-decoration: underline; }

.workflow-connector {
  flex: 1;
  height: 2px;
  background: var(--admin-border);
  margin: 0 0.5rem;
  min-width: 1.5rem;
}

.workflow-connector--completed {
  background: var(--admin-success);
}

/* --- Tabs --------------------------------------------------------------- */
.tab-nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--admin-border);
  margin-bottom: 1.5rem;
}

.tab-btn {
  padding: 0.6rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--admin-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.tab-btn:hover { color: var(--admin-text); }

.tab-btn--active {
  color: var(--admin-primary);
  border-bottom-color: var(--admin-primary);
  font-weight: 600;
}

.tab-btn--disabled {
  color: var(--admin-text-muted);
  cursor: not-allowed;
  opacity: 0.5;
}

.tab-panel { display: none; }
.tab-panel--active { display: block; }

/* Anchor-as-tab: when a tab uses <a> instead of <button>, drop default underline */
a.tab-btn { text-decoration: none; display: inline-block; }
a.tab-btn:hover { text-decoration: none; }

/* --- LTI platform show ------------------------------------------------- */
.lti-insights-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
}

.lti-insight-card__label {
  font-size: 0.8125rem;
  color: var(--admin-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lti-insight-card__value {
  font-size: 1.75rem;
  font-weight: 600;
  margin-top: 0.25rem;
}

.lti-logs-search {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--admin-border);
}

.lti-logs-search__bar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.lti-logs-search__group {
  display: flex;
  align-items: stretch;
  width: min(100%, 32rem);
  border: 1.5px solid color-mix(in srgb, var(--admin-text-muted) 35%, var(--admin-border));
  border-radius: 6px;
  overflow: hidden;
  background: var(--admin-surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--admin-text) 6%, transparent);
}

.lti-logs-search__group:focus-within {
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--admin-primary) 18%, transparent);
}

.lti-logs-search__field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.lti-logs-search__icon {
  position: absolute;
  left: 0.7rem;
  top: 50%;
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
  color: var(--admin-text-muted);
  pointer-events: none;
}

.lti-logs-search__group:focus-within .lti-logs-search__icon {
  color: var(--admin-primary);
}

.lti-logs-search__input {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0.4rem 0.75rem 0.4rem 2.35rem;
  border: 0;
  border-radius: 0;
  font-family: inherit;
  font-size: 0.85rem;
  background: transparent;
  color: inherit;
}

.lti-logs-search__input::placeholder {
  color: var(--admin-text-muted);
}

.lti-logs-search__input:focus {
  outline: none;
  box-shadow: none;
}

.lti-logs-search__submit {
  flex-shrink: 0;
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--admin-text-muted) 35%, var(--admin-border));
  border-radius: 0;
  padding-left: 1rem;
  padding-right: 1rem;
}

.lti-logs-search__clear {
  font-size: 0.85rem;
  white-space: nowrap;
}

.lti-logs-updated {
  white-space: nowrap;
}

.lti-logs-updated__primary {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.lti-logs-updated__secondary {
  font-size: 0.8125rem;
  color: var(--admin-text-muted);
}

.lti-return-status--ok { color: var(--admin-success); margin-left: 0.25rem; }
.lti-return-status--fail { color: var(--admin-danger); margin-left: 0.25rem; }

.lti-logs-score {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  width: 1%;
}

.lti-platform-log-row,
.lti-activity-error-log-row {
  cursor: pointer;
}

.lti-platform-attempt-detail {
  margin-top: 0;
}

.lti-platform-attempt-summary {
  margin-bottom: 1.5rem;
}

.lti-platform-attempt-summary .lti-platform-attempt-summary-head {
  align-items: center;
  border-bottom: 1px solid var(--admin-border);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1rem;
  min-height: 2.5rem;
  padding-bottom: 0.75rem;
}

.lti-platform-attempt-summary .lti-platform-attempt-summary-head .card-heading {
  flex: 1;
  margin: 0;
  min-width: 0;
}

.lti-platform-attempt-summary .lti-activity-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
}

.lti-platform-attempt-summary .lti-platform-attempt-send {
  flex-shrink: 0;
}

.lti-platform-attempt-summary .lti-platform-attempt-send form {
  margin: 0;
}

.lti-platform-attempt-summary .lti-platform-attempt-summary-columns {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
}

@media (min-width: 44rem) {
  .lti-platform-attempt-summary .lti-platform-attempt-summary-columns {
    gap: 0 2.5rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: repeat(8, auto);
  }

  .lti-platform-attempt-summary .lti-platform-attempt-summary-columns > .lti-activity-summary-fields {
    display: grid;
    grid-row: 1 / span 8;
    grid-template-rows: subgrid;
  }

  .lti-platform-attempt-summary .lti-platform-attempt-summary-columns > .lti-activity-summary-fields:nth-child(2) {
    padding-left: 3rem;
  }
}

.lti-platform-attempt-summary .detail-grid,
.lti-platform-attempt-summary .lti-activity-summary-fields {
  align-items: baseline;
  display: grid;
  gap: 0.75rem 2.5rem;
  grid-template-columns: minmax(12rem, max-content) minmax(0, 1fr);
  margin: 0;
}

.lti-platform-attempt-summary .lti-activity-summary-fields dt {
  color: var(--admin-text-muted);
  font-size: 0.875rem;
  font-weight: 600;
}

.lti-platform-attempt-summary .lti-activity-summary-fields dd {
  margin: 0;
}

.lti-platform-attempt-summary .lti-activity-summary-spacer {
  margin: 0;
  min-height: 0;
  padding: 0;
  visibility: hidden;
}

.lti-platform-attempt-summary .lti-platform-attempt-ags-services {
  align-items: center;
  border-top: 1px solid var(--admin-border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
}

.lti-platform-attempt-summary .lti-platform-attempt-ags-services-label {
  color: var(--admin-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lti-platform-attempt-summary .lti-platform-attempt-ags-services-list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0;
}

.lti-platform-attempt-summary .lti-platform-attempt-ags-service {
  align-items: center;
  display: inline-flex;
  font-size: 0.875rem;
  gap: 0.3rem;
  line-height: 1.4;
}

.lti-platform-attempt-summary .lti-platform-attempt-ags-service:not(:first-child)::before {
  color: var(--admin-border);
  content: "·";
  margin: 0 0.45rem;
}

.lti-platform-attempt-summary .lti-platform-attempt-ags-service--disabled {
  color: var(--admin-text-muted);
}

.lti-platform-attempt-summary .lti-platform-attempt-ags-service-label {
  font-weight: 400;
}

.lti-platform-attempt-detail .lti-activity-logs-section {
  margin-top: 0;
}

.lti-platform-attempt-detail .lti-activity-logs-section .lti-activity-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 1rem;
}

.lti-activity-empty-state {
  color: var(--admin-text-muted);
  margin: 0;
}

.lti-activity-log-entry {
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  overflow: hidden;
}

.lti-activity-log-entry:last-child {
  margin-bottom: 0;
}

.lti-activity-log-entry-header {
  background: color-mix(in srgb, var(--admin-text) 3%, var(--admin-surface));
  border-bottom: 1px solid var(--admin-border);
  border-left: 4px solid var(--admin-danger);
  padding: 0.85rem 1rem;
}

.lti-activity-log-entry-title {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  font-size: 1rem;
  font-weight: 700;
  gap: 0.35rem 0.75rem;
  margin: 0;
}

.lti-activity-log-entry-date {
  color: var(--admin-text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

.lti-activity-log-entry-content {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
}

.lti-activity-payload-block {
  border: 1px solid var(--admin-border);
  border-radius: 0.375rem;
  overflow: hidden;
}

.lti-activity-payload-block--request {
  border-left: 3px solid var(--admin-primary);
}

.lti-activity-payload-block--response {
  border-left: 3px solid var(--admin-danger);
}

.lti-activity-payload-title {
  background: color-mix(in srgb, var(--admin-text) 2.5%, var(--admin-surface));
  border-bottom: 1px solid var(--admin-border);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0;
  padding: 0.55rem 0.75rem;
  text-transform: uppercase;
}

.lti-activity-payload-origin {
  color: var(--admin-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: normal;
  margin-left: 0.35rem;
  text-transform: none;
}

.lti-activity-code-block {
  background: var(--admin-surface);
  border: 0;
  color: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
  margin: 0;
  max-width: 100%;
  overflow-x: auto;
  padding: 0.85rem 0.75rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.lti-activity-table-narrow {
  white-space: nowrap;
  width: 1%;
}

.lti-activity-table-nowrap {
  white-space: nowrap;
}

.lti-activity-table-actions {
  text-align: right;
  white-space: nowrap;
  width: 1%;
}

.lti-activity-attempt-link {
  white-space: nowrap;
}

.lti-back-link { color: var(--admin-text-muted); text-decoration: none; font-size: 0.875rem; }
.lti-back-link:hover { text-decoration: underline; }

.lti-page-header {
  margin-bottom: 1.5rem;
}

.lti-page-header > p {
  margin: 0 0 0.5rem;
}

.lti-page-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.lti-page-header .hint {
  margin: 0.5rem 0 0;
  max-width: 42rem;
}

.lti-platforms-unattributed-errors-notice {
  margin-bottom: 1rem;
}

.lti-platforms-unattributed-errors-notice .hint {
  margin: 0.5rem 0 0;
}

/* --- Admin pagination (Pagy) -------------------------------------------- */
/* A turbo-frame is display: inline by default, which disrupts the layout of a
   table wrapped inside it. The paginated-table frames wrap block content, so
   they render as blocks. */
turbo-frame[data-controller~="frame-pagination"] {
  display: block;
}

.admin-pagination {
  border-top: 1px solid var(--admin-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 1rem;
}

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

.admin-pagination .pagy {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.875rem;
  font-weight: 500;
  gap: 0.35rem;
  justify-content: center;
}

.admin-pagination .pagy a:not([role="separator"]) {
  align-items: center;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  color: var(--admin-text);
  display: inline-flex;
  justify-content: center;
  min-width: 2.25rem;
  padding: 0.35rem 0.65rem;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.admin-pagination .pagy a[href]:hover {
  background: var(--admin-bg);
  border-color: color-mix(in srgb, var(--admin-text-muted) 35%, var(--admin-border));
  color: var(--admin-text);
}

.admin-pagination .pagy a[aria-current] {
  background: var(--admin-primary);
  border-color: var(--admin-primary);
  color: var(--admin-primary-fg);
  font-weight: 600;
}

.admin-pagination .pagy a[role="link"]:not([aria-current]) {
  cursor: default;
  opacity: 0.45;
}

.admin-pagination .pagy a[role="separator"] {
  background: none;
  border: none;
  color: var(--admin-text-muted);
  min-width: auto;
  padding: 0 0.15rem;
  pointer-events: none;
}

/* --- Empty state -------------------------------------------------------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--admin-text-muted);
  font-size: 0.9rem;
  gap: 0.5rem;
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  padding: 14px;
  color: var(--admin-primary);
  background: var(--admin-accent-bg);
  border-radius: 50%;
  margin-bottom: 0.5rem;
}

.empty-state-heading {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--admin-text);
}

.empty-state .btn {
  margin-top: 0.5rem;
}

/* Compact variant for inline/nested contexts (e.g. inside tabs, timelines) */
.empty-state-compact {
  text-align: center;
  padding: 1.5rem 1rem;
  color: var(--admin-text-muted);
  font-size: 0.85rem;
}

/* --- Wizard ------------------------------------------------------------- */
.wizard-progress {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.wizard-step-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--admin-text-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease;
}

.wizard-step-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--admin-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--admin-surface);
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
}

.wizard-step-label {
  white-space: nowrap;
}

.wizard-step-indicator--active .wizard-step-dot {
  background: var(--admin-primary);
  border-color: var(--admin-primary);
  color: #fff;
}

.wizard-step-indicator--active {
  color: var(--admin-text);
  font-weight: 600;
}

.wizard-step-indicator--completed .wizard-step-dot {
  background: var(--admin-success);
  border-color: var(--admin-success);
  color: #fff;
}

.wizard-step-indicator--completed { color: var(--admin-success); }

.wizard-connector {
  flex: 1;
  height: 2px;
  background: var(--admin-border);
  margin: 0 0.5rem;
  min-width: 1rem;
  transition: background 0.2s;
}

.wizard-connector--completed { background: var(--admin-success); }

.wizard-panel { display: none; }
.wizard-panel--active { display: block; }

.wizard-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid var(--admin-border);
  margin-top: 1.25rem;
}

.wizard-nav__secondary,
.wizard-nav__primary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.wizard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 800px) {
  .wizard-layout { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Review layout overrides
   ========================================================================== */

.review-body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.review-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.review-body .admin-flash {
  margin: 0.5rem 1rem;
  flex-shrink: 0;
}

.review-body .tab-nav {
  margin-bottom: 0;
}

.review-layout .tab-btn {
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Review sidebar tab nav: scroll horizontally when narrow rather than
   clipping or wrapping. Mirrors the in-module tab-list pattern; the
   review controller centers the active tab into view on switch and
   converts vertical wheel scroll to horizontal. */
.review-sidebar .tab-nav {
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.review-sidebar .tab-nav::-webkit-scrollbar {
  display: none;
}

.review-layout .tab-panel--active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* --- Content comments panel ---------------------------------------- */
.content-comments {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.content-comments-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.content-comments-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  font-size: 0.85rem;
  font-family: inherit;
  resize: vertical;
}

.content-comments-form-actions {
  display: flex;
  justify-content: flex-end;
}

.content-comments-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.content-comments-item {
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  background: var(--admin-bg);
}

.content-comments-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.35rem;
  font-size: 0.75rem;
}

.content-comments-author {
  color: var(--admin-text);
  font-weight: 600;
}

.content-comments-time {
  color: var(--admin-text-muted);
}

.content-comments-body {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--admin-text);
  white-space: pre-wrap;
  word-wrap: break-word;
}

.comment-mention {
  display: inline-block;
  padding: 0 0.25rem;
  border-radius: 3px;
  background: var(--admin-accent-bg);
  color: var(--admin-primary);
  font-weight: 600;
}

@keyframes comment-highlight-flash {
  0%   { background: var(--admin-accent-bg); }
  100% { background: var(--admin-bg); }
}

.content-comments-item.comment-highlight {
  animation: comment-highlight-flash 2.5s ease-out;
  outline: 2px solid var(--admin-primary);
}

.content-comments-input-wrapper {
  position: relative;
}

.mention-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 0.25rem;
  max-height: 220px;
  overflow-y: auto;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  box-shadow: var(--admin-shadow);
  padding: 0.25rem;
  z-index: 100;
}

.mention-suggestion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  width: 100%;
  padding: 0.4rem 0.6rem;
  background: none;
  border: none;
  border-radius: 4px;
  text-align: left;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--admin-text);
  transition: background 0.1s;
}

.mention-suggestion:hover,
.mention-suggestion.is-active {
  background: var(--admin-bg);
}

.mention-suggestion-handle {
  font-weight: 600;
  color: var(--admin-primary);
}

.mention-suggestion-name {
  font-size: 0.75rem;
  color: var(--admin-text-muted);
}

.content-comments-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.25rem;
  margin-top: 0.4rem;
}

.content-comments-actions form {
  margin: 0;
}

.content-comments-delete,
.content-comments-flag {
  background: none;
  border: none;
  padding: 0.2rem 0.4rem;
  font-size: 0.75rem;
  color: var(--admin-text-muted);
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}

.content-comments-delete:hover {
  color: var(--admin-danger);
  background: var(--admin-danger-bg);
}

.content-comments-flag:hover {
  color: var(--admin-warning);
  background: var(--admin-warning-bg);
}

.content-comments-flag-chip {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.05rem 0.4rem;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--admin-warning);
  background: var(--admin-warning-bg);
  border-radius: 999px;
}

.content-comments-empty {
  text-align: center;
  color: var(--admin-text-muted);
  font-size: 0.85rem;
  padding: 1.25rem 0.5rem;
  margin: 0;
}

/* Sidebar */
.review-sidebar {
  flex: 3;
  min-width: 250px;
  max-width: 480px;
  border-left: 1px solid var(--admin-border);
  display: flex;
  flex-direction: column;
  background: var(--admin-surface);
  overflow: hidden;
  transition: max-width 0.2s, min-width 0.2s, flex 0.2s;
}
.review-sidebar--collapsed {
  flex: 0 0 auto;
  min-width: 0;
  max-width: 0;
  border-left: none;
  overflow: hidden;
}
.sidebar-toggle {
  align-self: center;
  flex: 0 0 auto;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-right: none;
  border-radius: 6px 0 0 6px;
  padding: 0.5rem 0.25rem;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--admin-text-muted);
  line-height: 1;
  transition: color 0.15s;
}
.sidebar-toggle:hover { color: var(--admin-text); }

/* Question editor form */
.qe-form { font-size: 0.82rem; }
.qe-field { margin-bottom: 0.75rem; }
.qe-objective-row {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}
.qe-objective-editor {
  flex: 1;
  min-width: 0;
}
.qe-objective-remove {
  flex: 0 0 auto;
  margin-top: 1.55rem;
  min-width: 30px;
  padding-inline: 0.45rem;
}
.qe-objective-add { margin-top: -0.25rem; }
.qe-label { display: block; font-weight: 600; margin-bottom: 0.25rem; color: var(--admin-text); font-size: 0.8rem; }
/* Informational note inside a question editor: a display contract the block
   carries (outcome feedback, reusable matching answers) made visible. */
.qe-hint { font-size: 0.78rem; color: var(--admin-text-muted); background: var(--admin-bg); border: 1px solid var(--admin-border); border-radius: 6px; padding: 0.4rem 0.6rem; margin-bottom: 0.75rem; }
/* Interactive-block forms stack label+field pairs directly (no .qe-field wrapper),
   so give the top-level fields a bottom margin to keep successive groups from
   crowding. Most visible on the chart form, which stacks type, title, and unit. */
[data-icb-form] > .qe-input,
[data-icb-form] > .qe-select { margin-bottom: 0.6rem; }
.qe-optional { font-weight: 400; color: var(--admin-text-muted); font-size: 0.75rem; }

/* Pie-slice colour control: a compact chip at the head of each data-point row
   that opens a popover with the palette, an Automatisch option, and a custom
   colour. Themed via --admin-* tokens so it reads in both light and dark. */
.cbcolor-chip-wrap { position: relative; flex: 0 0 auto; }
.cbcolor-chip {
  display: flex; align-items: center; gap: 2px;
  height: 34px; padding: 0 5px 0 6px;
  border: 1px solid var(--admin-border); border-radius: 5px;
  background: var(--admin-surface); cursor: pointer;
}
.cbcolor-chip:hover { border-color: var(--admin-text-muted); }
.cbcolor-chip-swatch { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.15); }
.cbcolor-chip-caret { font-size: 10px; color: var(--admin-text-muted); line-height: 1; }
.cbcolor-popover {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; width: 214px;
  background: var(--admin-surface); border: 1px solid var(--admin-border); border-radius: 10px;
  box-shadow: var(--admin-shadow); padding: 12px;
}
.cbcolor-popover[hidden] { display: none; }
.cbcolor-popover-heading { font-size: 11px; color: var(--admin-text-muted); margin-bottom: 8px; letter-spacing: 0.02em; text-transform: uppercase; }
.cbcolor-swatch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; justify-items: center; }
.cbcolor-swatch {
  width: 26px; height: 26px; padding: 0; border-radius: 6px; cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.15); box-sizing: border-box;
}
.cbcolor-swatch:hover { outline: 2px solid var(--admin-border); outline-offset: 1px; }
.cbcolor-swatch.is-selected { border: 2px solid var(--admin-text); outline: 2px solid var(--admin-surface); outline-offset: -4px; }
.cbcolor-popover-divider { border-top: 1px solid var(--admin-border); margin: 12px 0 4px; }
.cbcolor-popover-option {
  width: 100%; display: flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 6px; border: none; background: none; cursor: pointer;
  font-size: 13px; color: var(--admin-text); border-radius: 6px; text-align: left;
}
.cbcolor-popover-option:hover { background: var(--admin-bg); }
.cbcolor-check { color: var(--admin-primary); font-size: 13px; width: 14px; }
.cbcolor-check[hidden] { visibility: hidden; display: inline-block; }
/* Strip the native colour-input chrome (inner padding + swatch border) so the
   whole square is just the colour, matching the palette swatches. */
.cbcolor-custom-input {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  width: 16px; height: 16px; padding: 0; flex: 0 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; background: none; cursor: pointer;
}
.cbcolor-custom-input::-webkit-color-swatch-wrapper { padding: 0; }
.cbcolor-custom-input::-webkit-color-swatch { border: none; border-radius: 3px; }
.cbcolor-custom-input::-moz-color-swatch { border: none; border-radius: 3px; }
.cbcolor-reset-row { display: flex; justify-content: flex-end; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--admin-border); }
.cbcolor-reset { border: none; background: none; cursor: pointer; font-size: 12px; color: var(--admin-text-muted); }
.cbcolor-reset:hover { color: var(--admin-text); }
.qe-select, .qe-input, .qe-textarea {
  width: 100%; padding: 0.4rem 0.5rem; border: 1px solid var(--admin-border); border-radius: 5px;
  font-family: inherit; font-size: 0.82rem; box-sizing: border-box; background: var(--admin-surface); color: var(--admin-text);
}
.qe-select:focus, .qe-input:focus, .qe-textarea:focus { outline: none; border-color: var(--admin-primary); box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1); }
.qe-textarea { min-height: 44px; resize: vertical; }
.qe-textarea-small { min-height: 32px; font-size: 0.78rem; }
.qe-rich-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.3rem;
  border: 1px solid var(--admin-border);
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  background: color-mix(in srgb, var(--admin-bg) 70%, var(--admin-surface));
}
.qe-rich-select,
.qe-rich-btn {
  min-height: 26px;
  padding: 0.2rem 0.4rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--admin-text-muted);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}
.qe-rich-select {
  max-width: 140px;
  border-color: var(--admin-border);
  background: var(--admin-surface);
  color: var(--admin-text);
  font-weight: 500;
}
.qe-rich-btn:hover {
  border-color: var(--admin-border);
  background: var(--admin-surface);
  color: var(--admin-text);
}
.qe-rich-btn.is-active {
  border-color: var(--admin-primary);
  background: var(--admin-accent-bg);
  color: var(--admin-primary);
}
.qe-rich-link-form,
.qe-rich-link-inspector {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-basis: 100%;
  min-width: 0;
  margin-top: 0.25rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--admin-border);
}
.qe-rich-link-form[hidden] { display: none; }
.qe-rich-link-inspector[hidden] { display: none; }
.qe-rich-link-url {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--admin-text-muted);
  font-size: 0.72rem;
}
.qe-rich-link-input {
  flex: 1;
  min-width: 140px;
  min-height: 26px;
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--admin-border);
  border-radius: 4px;
  background: var(--admin-surface);
  color: var(--admin-text);
  font-family: inherit;
  font-size: 0.75rem;
}
.qe-rich-link-input:focus {
  outline: none;
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}
.qe-rich-editor {
  width: 100%;
  min-height: 180px;
  max-height: 420px;
  overflow: hidden auto;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--admin-border);
  border-radius: 0 0 5px 5px;
  box-sizing: border-box;
  background: var(--admin-surface);
  color: var(--admin-text);
  font-family: inherit;
  font-size: 0.82rem;
  line-height: 1.55;
}
.qe-rich-editor:focus {
  outline: none;
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}
.qe-rich-editor--inline {
  min-height: 70px;
  max-height: 180px;
}
.qe-rich-editor p,
.qe-rich-editor ul,
.qe-rich-editor ol,
.qe-rich-editor pre { margin: 0 0 0.65rem; }
/* The global reset zeroes list padding, which pushes the markers outside the
   editor's clipped box; restore them so authored lists look like lists. */
.qe-rich-editor ul { padding-left: 1.3rem; list-style: disc; }
.qe-rich-editor ol { padding-left: 1.3rem; list-style: decimal; }
.qe-rich-editor h3,
.qe-rich-editor h4 { margin: 0.8rem 0 0.4rem; }
.qe-rich-editor code {
  padding: 0.05rem 0.25rem;
  border-radius: 3px;
  background: var(--admin-bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
.qe-rich-editor pre {
  padding: 0.55rem;
  border-radius: 5px;
  background: var(--admin-bg);
  white-space: pre-wrap;
}
.qe-rich-link-pending {
  background: var(--admin-accent-bg);
  box-shadow: 0 0 0 2px var(--admin-primary);
  border-radius: 3px;
}
.qe-rich-diff-preview {
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  padding: 0.75rem;
  max-height: 260px;
  overflow-y: auto;
  font-size: 0.85rem;
  line-height: 1.55;
}
.qe-rich-diff-preview--old { background: #fef2f2; border-color: #fecaca; }
.qe-rich-diff-preview--new { background: #f0fdf4; border-color: #bbf7d0; }
.qe-diff-highlight {
  border-radius: 3px;
  padding: 0.05rem 0.14rem;
  color: inherit;
}
.qe-diff-highlight--old {
  background: #fecaca;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.qe-diff-highlight--new {
  background: #fef08a;
}
.qe-rich-diff-preview p,
.qe-rich-diff-preview ul,
.qe-rich-diff-preview ol,
.qe-rich-diff-preview pre { margin: 0 0 0.65rem; }
.qe-rich-diff-preview h3,
.qe-rich-diff-preview h4 { margin: 0.8rem 0 0.4rem; }

/* Option rows */
.qe-option-row {
  background: var(--admin-bg, #f9fafb); border: 1px solid var(--admin-border); border-radius: 6px;
  padding: 0.5rem; margin-bottom: 0.5rem;
}
.qe-option-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem; }
.qe-option-correct { display: flex; align-items: center; gap: 0.35rem; cursor: pointer; }
.qe-correct-label { font-size: 0.78rem; color: var(--admin-text-muted); }
.qe-option-correct input:checked + .qe-correct-label { color: #059669; font-weight: 600; }
.qe-option-row .qe-input { margin-bottom: 0.3rem; }

/* Pair rows */
.qe-pair-row { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.4rem; }
.qe-pair-arrow { color: var(--admin-text-muted); font-size: 0.9rem; flex-shrink: 0; }
.qe-input-half { flex: 1; min-width: 0; }

/* Item rows */
.qe-item-row { display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.35rem; }
.qe-item-number { font-weight: 600; color: var(--admin-text-muted); min-width: 1.4em; text-align: right; flex-shrink: 0; }
.qe-input-flex { flex: 1; min-width: 0; }
.qe-item-controls { display: flex; gap: 2px; flex-shrink: 0; }

/* QE Buttons */
.qe-btn { padding: 0.4rem 0.85rem; border-radius: 5px; font-size: 0.82rem; font-family: inherit; cursor: pointer; border: 1px solid var(--admin-border); }
.qe-btn-primary { background: var(--admin-primary, #4f46e5); color: #fff; border-color: var(--admin-primary, #4f46e5); }
.qe-btn-primary:hover { opacity: 0.9; }
.qe-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.qe-btn-secondary { background: var(--admin-surface); color: var(--admin-text); }
.qe-btn-secondary:hover { background: var(--admin-bg, #f3f4f6); }
.qe-btn-regenerate { background: #f5f3ff; color: #7c3aed; border-color: #c4b5fd; }
.qe-btn-regenerate:hover { background: #ede9fe; }
.qe-btn-regenerate:disabled { opacity: 0.5; cursor: not-allowed; }
.qe-btn-small { font-size: 0.78rem; padding: 0.25rem 0.6rem; }

/* Reorder controls */
.qe-reorder { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; padding: 0.5rem 0.65rem; background: var(--admin-bg, #f9fafb); border: 1px solid var(--admin-border); border-radius: 8px; }
.qe-reorder-note { flex-basis: 100%; margin-top: -0.35rem; font-size: 0.75rem; color: var(--admin-text-muted); }
.qe-reorder-controls { display: flex; gap: 0.25rem; }
.qe-reorder-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: var(--admin-surface); border: 1px solid var(--admin-border); border-radius: 6px; cursor: pointer; color: var(--admin-text-muted); transition: all 0.15s; }
.qe-reorder-btn:hover:not(:disabled) { background: var(--admin-primary, #4f46e5); color: #fff; border-color: var(--admin-primary, #4f46e5); }
.qe-reorder-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.qe-reorder-label { font-size: 0.8rem; color: var(--admin-text-muted); font-weight: 500; }
.qe-btn-add { color: var(--admin-primary, #4f46e5); border-style: dashed; background: transparent; margin-top: 0.3rem; }
.qe-btn-add:hover { background: rgba(79, 70, 229, 0.05); }
.qe-btn-delete { background: none; border: none; color: #dc2626; cursor: pointer; font-size: 1.1rem; padding: 0 0.3rem; line-height: 1; flex-shrink: 0; }
.qe-btn-delete:hover { color: #b91c1c; }
.qe-btn-move { background: none; border: 1px solid var(--admin-border); border-radius: 3px; cursor: pointer; font-size: 0.75rem; padding: 1px 4px; color: var(--admin-text-muted); }
.qe-btn-move:hover { background: var(--admin-bg, #f3f4f6); color: var(--admin-text); }
.qe-btn-move:disabled { opacity: 0.3; cursor: not-allowed; }

/* True/False toggle */
.qe-tf-toggle { display: flex; gap: 0.5rem; }
.qe-tf-option {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.35rem;
  padding: 0.5rem; border: 1px solid var(--admin-border); border-radius: 6px; cursor: pointer;
  font-size: 0.82rem; transition: all 0.15s;
}
.qe-tf-option:hover { border-color: var(--admin-primary); }
.qe-tf-active { background: #f0fdf4; border-color: #059669; color: #059669; font-weight: 600; }

/* Actions bar */
.qe-actions { display: flex; gap: 0.5rem; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--admin-border); }
.qe-btn-danger { background: #ef4444; color: #fff; border-color: #ef4444; }
.qe-btn-danger:hover { background: #dc2626; border-color: #dc2626; }

/* Form-level and field-level error messages */
.qe-form-error {
  margin-top: 0.75rem; padding: 0.5rem 0.75rem;
  background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
  border-radius: 6px; font-size: 0.8rem;
}
.qe-form-error[hidden] { display: none; }
.qe-field-error {
  margin-top: 0.25rem; color: #b91c1c; font-size: 0.75rem;
}
.qe-field-error[hidden] { display: none; }
.qe-row--invalid > .qe-objective-editor .qe-input,
.qe-row--invalid > .qe-objective-editor .qe-rich-editor {
  border-color: #ef4444; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
}

/* Add question button (sidebar) */
.add-question-btn {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  width: 100%; padding: 8px; margin: 4px 0;
  background: transparent; color: #7c3aed; border: 2px dashed #c4b5fd;
  border-radius: 8px; font-size: 13px; font-family: inherit; cursor: pointer;
  transition: all 0.15s;
}
.add-question-btn:hover { background: #f5f3ff; border-color: #7c3aed; }

/* "+ Add" menu: a plain list of options, styled like the content-overview rows
   rather than a stack of dashed add buttons. */
.qe-add-menu-group {
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--admin-text-muted); margin: 0.85rem 0 0.4rem;
}
.qe-add-menu-group:first-of-type { margin-top: 0.25rem; }
.qe-add-menu-item {
  display: flex; align-items: center; gap: 0.65rem; width: 100%; text-align: left;
  padding: 0.5rem 0.6rem; margin-bottom: 0.3rem;
  background: var(--admin-surface); color: var(--admin-text);
  border: 1px solid var(--admin-border); border-radius: 6px;
  font-size: 0.85rem; font-family: inherit; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.qe-add-menu-item:hover { border-color: var(--admin-primary); }
.qe-add-menu-item__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 6px; background: var(--admin-bg); color: var(--admin-text-muted);
  transition: background 0.15s, color 0.15s;
}
.qe-add-menu-item__icon svg { width: 15px; height: 15px; }
.qe-add-menu-item:hover .qe-add-menu-item__icon { background: var(--admin-primary); color: #fff; }

/* Read-only "Adding to: <section>" context banner in the new-block editors. */
.qe-target-label {
  font-size: 0.78rem; color: var(--admin-text-muted);
  padding: 0.4rem 0.6rem; margin-bottom: 0.6rem;
  background: var(--admin-bg); border: 1px solid var(--admin-border); border-radius: 6px;
}
.qe-target-label strong { color: var(--admin-text); font-weight: 600; }

/* Back arrow inside the "+ Add" flow, returning to the menu. */
.qe-back-btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: none; border: none; padding: 0; margin: 0 0 0.6rem;
  color: var(--admin-text-muted); font-size: 0.8rem; font-family: inherit; cursor: pointer;
}
.qe-back-btn:hover { color: var(--admin-primary); }
.qe-back-btn svg { width: 14px; height: 14px; }

/* Position picker for adding a section: a radio list so full section titles wrap
   and stay readable instead of being clipped by a narrow native select. */
.qe-radio-list { display: flex; flex-direction: column; gap: 0.3rem; max-height: 220px; overflow-y: auto; }
.qe-radio-row {
  display: flex; align-items: flex-start; gap: 0.5rem;
  padding: 0.45rem 0.55rem; border: 1px solid var(--admin-border); border-radius: 6px;
  font-size: 0.85rem; color: var(--admin-text); cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.qe-radio-row:hover { border-color: var(--admin-primary); }
.qe-radio-row:has(input:checked) { border-color: var(--admin-primary); background: var(--admin-bg); }
.qe-radio-row input { margin-top: 0.15rem; flex-shrink: 0; }
.qe-radio-row span { word-break: break-word; }

/* Pause point position picker: the section's blocks as muted rows with a
   selectable insertion slot between them, styled like the in-module marker. */
.qe-pause-position-list { max-height: 300px; gap: 0; }
.qe-pause-block {
  display: flex; align-items: baseline; gap: 0.5rem; min-width: 0;
  padding: 0.4rem 0.6rem; border: 1px solid var(--admin-border); border-radius: 6px;
  background: var(--admin-bg); font-size: 0.75rem;
}
.qe-pause-block-type { color: var(--admin-text-muted); white-space: nowrap; flex-shrink: 0; }
.qe-pause-block-preview {
  color: var(--admin-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qe-insert-slot { display: block; padding: 0.25rem 0; cursor: pointer; }
.qe-insert-slot input { position: absolute; opacity: 0; pointer-events: none; }
.qe-insert-slot-line { display: flex; align-items: center; gap: 0.5rem; color: var(--admin-text-muted); }
.qe-insert-slot-line::before,
.qe-insert-slot-line::after { content: ""; flex: 1; border-top: 2px dashed var(--admin-border); }
.qe-insert-slot-pill {
  font-size: 0.7rem; padding: 0.15rem 0.7rem; white-space: nowrap;
  border: 1px solid var(--admin-border); border-radius: 999px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
/* A selectable slot reads as an action (accent, dashed, like add buttons);
   an existing pause in the list stays gray and solid. */
.qe-insert-slot input + .qe-insert-slot-line .qe-insert-slot-pill {
  color: var(--admin-primary); border: 1px dashed var(--admin-primary);
}
.qe-insert-slot:hover .qe-insert-slot-pill { background: rgba(79, 70, 229, 0.08); }
.qe-insert-slot:has(input:checked) .qe-insert-slot-line { color: var(--admin-primary); }
.qe-insert-slot:has(input:checked) .qe-insert-slot-line::before,
.qe-insert-slot:has(input:checked) .qe-insert-slot-line::after { border-color: var(--admin-primary); }
.qe-insert-slot:has(input:checked) .qe-insert-slot-pill {
  border-color: var(--admin-primary); background: var(--admin-primary);
  color: var(--admin-primary-fg, #fff); font-weight: 600;
}
.qe-insert-slot:has(input:focus-visible) .qe-insert-slot-pill {
  outline: 2px solid var(--admin-primary); outline-offset: 2px;
}
.qe-pause-existing { padding: 0.25rem 0; opacity: 0.65; }

/* ==========================================================================
   Auth pages (application layout)
   ========================================================================== */

body.auth-page {
  min-height: 100vh;
  background: var(--admin-bg);
  color: var(--admin-text);
}

.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.auth-card {
  width: min(100%, 28rem);
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}

.auth-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: rgba(79, 70, 229, 0.12);
  color: var(--admin-primary);
  font-size: 1.25rem;
  font-weight: 700;
}

.auth-card h1 {
  margin: 1rem 0 0.5rem;
  font-size: 1.875rem;
  line-height: 1.1;
}

.auth-subtitle {
  margin: 0 0 1.5rem;
  color: var(--admin-text-muted);
  font-size: 0.95rem;
}

.auth-flash {
  margin-bottom: 1rem;
  padding: 0.875rem 1rem;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 0.9rem;
}

.auth-flash-alert {
  background: #fef2f2;
  border-color: #fecaca;
  color: var(--admin-danger);
}

.auth-flash-notice {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: var(--admin-success);
}

.auth-form-errors {
  margin-bottom: 1rem;
  padding: 1rem;
  border-radius: 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: var(--admin-danger);
}

.auth-form-errors h2 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.auth-form-errors ul {
  margin: 0;
  padding-left: 1.25rem;
}

.auth-field {
  margin-bottom: 1rem;
}

.auth-field label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.auth-field input {
  width: 100%;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--admin-border);
  border-radius: 12px;
  font: inherit;
  color: var(--admin-text);
  background: var(--admin-surface);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.auth-field input:focus {
  outline: none;
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.14);
}

.auth-submit {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.9rem 1rem;
  border: none;
  border-radius: 12px;
  background: var(--admin-primary);
  color: #ffffff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.auth-submit:hover {
  background: var(--admin-primary-hover);
}

.auth-submit--link {
  display: block;
  text-align: center;
  text-decoration: none;
}

.auth-links {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.95rem;
}

.auth-links a,
.auth-inline-link {
  color: var(--admin-primary);
  text-decoration: none;
  font-weight: 500;
}

.auth-links a:hover,
.auth-inline-link:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .auth-shell {
    padding: 1rem;
  }

  .auth-card {
    padding: 1.5rem;
    border-radius: 16px;
  }

  .auth-card h1 {
    font-size: 1.6rem;
  }
}

/* --- Badge variants ---------------------------------------------------- */
.badge-active { background: #d1fae5; color: #065f46; }
.badge-inactive { background: #fee2e2; color: #991b1b; }
.badge-admin { background: #dbeafe; color: #1e40af; }
.badge-author { background: #d1fae5; color: #065f46; }
.badge-viewer { background: #e5e7eb; color: #374151; }
.badge-global-admin { background: #fef3c7; color: #92400e; }
.badge-scorm_master { background: #ede9fe; color: #5b21b6; }

/* --- Organization index ------------------------------------------------ */
.org-search { margin-bottom: 1.5rem; }
.org-search-input {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  font-size: 0.875rem;
  font-family: inherit;
}
.org-list { display: flex; flex-direction: column; gap: 0.75rem; }
.org-card {
  display: block;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.org-card:hover {
  border-color: var(--admin-primary);
  box-shadow: 0 1px 4px rgba(79, 70, 229, 0.1);
}
.org-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.org-card-header h2 { font-size: 1.1rem; font-weight: 600; }
.org-card-meta {
  display: flex;
  gap: 1.5rem;
  font-size: 0.8rem;
  color: var(--admin-text-muted);
}

/* --- Feedback expandable details --------------------------------------- */
.feedback-expandable summary { list-style: none; cursor: pointer; }
.feedback-expandable summary::-webkit-details-marker { display: none; }
.feedback-expandable .when-open { display: none; }
.feedback-expandable[open] .when-closed { display: none; }
.feedback-expandable[open] .when-open { display: inline; }

/* --- Viewer (full-screen iframe) --------------------------------------- */
.viewer-frame { width: 100%; height: 100vh; border: none; }
html:has(.viewer-body) { height: 100%; overflow: hidden; }
.viewer-body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
.preview-banner { position: fixed; top: 0; left: 0; right: 0; background: #fef3c7; color: #92400e; text-align: center; padding: 0.35rem; font-size: 0.8rem; z-index: 9999; border-bottom: 1px solid #fcd34d; }
.preview-banner a { color: #92400e; font-weight: 600; margin-left: 0.5rem; }
.preview-view-toggle { display: inline-flex; align-items: center; gap: 0.25rem; margin: 0 0.75rem; }
.preview-view-caption { font-weight: 600; }
.preview-view-toggle .preview-view-btn { margin-left: 0; padding: 0.05rem 0.45rem; border: 1px solid #92400e; border-radius: 4px; text-decoration: none; }
.preview-view-toggle .preview-view-btn.is-active { background: #92400e; color: #fef3c7; }
.viewer-body:has(.preview-banner) .viewer-frame { margin-top: var(--preview-banner-height, 1.6rem); height: calc(100vh - var(--preview-banner-height, 1.6rem)); }

/* --- SCORM loading overlay -------------------------------------------- */
.scorm-loading-overlay { position: fixed; inset: 0; z-index: 9998; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--admin-surface); }
.scorm-loading-overlay[hidden] { display: none; }
.scorm-loading-overlay.is-error .scorm-spinner { display: none; }
.scorm-loading-overlay.is-error .scorm-error-msg { display: block; }
.scorm-spinner { width: 40px; height: 40px; border: 4px solid #e5e7eb; border-top-color: #6366f1; border-radius: 50%; animation: scorm-spin 0.8s linear infinite; }
.scorm-loading-text { margin-top: 1rem; color: #6b7280; font-family: sans-serif; font-size: 0.9rem; }
.scorm-error-msg { display: none; color: #dc2626; font-family: sans-serif; font-size: 0.95rem; text-align: center; max-width: 28rem; line-height: 1.5; }
@keyframes scorm-spin { to { transform: rotate(360deg); } }
.viewer-body:has(.preview-banner) .scorm-loading-overlay { top: var(--preview-banner-height, 1.6rem); }

.scorm-preparing { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--admin-surface); padding: 2rem; }
.scorm-preparing__inner { max-width: 28rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.scorm-preparing__icon { font-size: 2.5rem; line-height: 1; }
.scorm-preparing__heading { font-size: 1.25rem; font-weight: 600; color: var(--admin-text); margin: 0.5rem 0 0; }
.scorm-preparing__body { color: var(--admin-text-muted); margin: 0; line-height: 1.5; }
.scorm-preparing__hint { color: var(--admin-text-muted); font-size: 0.85rem; margin: 0; font-style: italic; }

/* --- Module analytics -------------------------------------------------- */
.module-analytics-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1rem;
}

.module-analytics-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.module-analytics-stat-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--admin-text-muted);
  font-weight: 600;
}

.module-analytics-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--admin-text);
}

.module-analytics-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.module-analytics-section-header .card-heading {
  margin: 0;
}

.trend-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
}

@media (max-width: 720px) {
  .trend-grid {
    grid-template-columns: 1fr;
  }
}

.trend-cell {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.trend-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--admin-text-muted);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.trend-chart-wrapper {
  position: relative;
}

.trend-chart {
  width: 100%;
  height: auto;
  display: block;
}

.trend-point {
  cursor: pointer;
  transition: r 120ms ease;
}

.trend-point:hover,
.trend-point:focus {
  r: 5;
  outline: none;
}

.trend-tooltip {
  position: absolute;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 10px));
  background: var(--admin-text);
  color: var(--admin-surface);
  padding: 0.5rem 0.65rem;
  border-radius: 6px;
  font-size: 0.8rem;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease;
  z-index: 10;
}

.trend-tooltip-visible {
  opacity: 1;
  visibility: visible;
}

.trend-tooltip-date {
  font-size: 0.7rem;
  opacity: 0.7;
  margin-bottom: 0.15rem;
}

.trend-tooltip-value {
  font-weight: 600;
  font-size: 0.95rem;
}

.trend-tooltip-count {
  font-size: 0.7rem;
  opacity: 0.7;
  margin-top: 0.15rem;
}

.trend-axis {
  stroke: var(--admin-border);
  stroke-width: 1;
}

.trend-gridline {
  stroke: var(--admin-border);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0.6;
}

.trend-axis-label {
  fill: var(--admin-text-muted);
  font-size: 11px;
  font-family: inherit;
}

.trend-axis-label-end {
  text-anchor: end;
}

.trend-axis-label-mid {
  text-anchor: middle;
}

.trend-line {
  fill: none;
  stroke: var(--admin-primary);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.trend-point {
  fill: var(--admin-primary);
  stroke: var(--admin-surface);
  stroke-width: 1.5;
}

.item-analysis-table th.numeric,
.item-analysis-table td.numeric {
  text-align: right;
  white-space: nowrap;
}

.item-analysis-table .muted {
  color: var(--admin-text-muted);
}

.item-analysis-table .stat-ok { color: var(--admin-text); }
.item-analysis-table .stat-warn { color: var(--admin-warning); font-weight: 600; }
.item-analysis-table .stat-bad { color: var(--admin-danger); font-weight: 600; }

/* --- Bulk SCORM import ------------------------------------------------- */
.bulk-scorm__meter {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.bulk-scorm__warning {
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}

.bulk-scorm__warning.is-warn {
  background: #fef3c7;
  color: #92400e;
}

.bulk-scorm__warning.is-block {
  background: #fee2e2;
  color: #991b1b;
}

[data-theme="dark"] .bulk-scorm__warning.is-warn { background: #3A2E1A; color: #E8C597; }
[data-theme="dark"] .bulk-scorm__warning.is-block { background: #3A1F18; color: #E5B1A0; }

.bulk-scorm__empty {
  margin-top: 1rem;
  padding: 1.5rem;
  text-align: center;
  border: 1px dashed var(--admin-border);
  border-radius: 8px;
}

.bulk-scorm__table-wrap {
  margin-top: 1rem;
  overflow-x: auto;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
}

.bulk-scorm__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: none;
  border-radius: 0;
  table-layout: fixed;
}

.bulk-scorm__table th,
.bulk-scorm__table td {
  padding: 0.6rem 0.75rem;
  vertical-align: middle;
}

.bulk-scorm__col-file   { width: 22%; }
.bulk-scorm__col-title  { width: 36%; }
.bulk-scorm__col-lang   { width: 14%; }
.bulk-scorm__col-status { width: 16%; }
.bulk-scorm__col-action { width: 12%; text-align: right; white-space: nowrap; }

.bulk-scorm__filename {
  font-size: 0.875rem;
  color: var(--admin-text);
  word-break: break-all;
  line-height: 1.3;
}

.bulk-scorm__rowmeta {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.25rem;
  flex-wrap: wrap;
}

.bulk-scorm__tool {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

.bulk-scorm__tool[data-tool="internal"]      { background: #ede9fe; color: #5b21b6; }
.bulk-scorm__tool[data-tool="rise"]          { background: #fef3c7; color: #92400e; }
.bulk-scorm__tool[data-tool="storyline"]     { background: #dbeafe; color: #1e40af; }
.bulk-scorm__tool[data-tool="mokick"]        { background: #fee2e2; color: #991b1b; }
.bulk-scorm__tool[data-tool="easygenerator"] { background: #d1fae5; color: #065f46; }
.bulk-scorm__tool[data-tool="ispring"]       { background: #cffafe; color: #155e75; }
.bulk-scorm__tool[data-tool="tts"]           { background: #fae8ff; color: #86198f; }
.bulk-scorm__tool[data-tool="lectora"]       { background: #ffedd5; color: #9a3412; }
.bulk-scorm__tool[data-tool="chemmedia"]     { background: #ccfbf1; color: #115e59; }
.bulk-scorm__tool[data-tool="generic"]       { background: #e5e7eb; color: #374151; }

[data-theme="dark"] .bulk-scorm__tool[data-tool="internal"]      { background: #2E251C; color: #E5BE87; }
[data-theme="dark"] .bulk-scorm__tool[data-tool="rise"]          { background: #3A2E1A; color: #E8C597; }
[data-theme="dark"] .bulk-scorm__tool[data-tool="storyline"]     { background: #1F2A32; color: #BDCED8; }
[data-theme="dark"] .bulk-scorm__tool[data-tool="mokick"]        { background: #3A1F18; color: #E5B1A0; }
[data-theme="dark"] .bulk-scorm__tool[data-tool="easygenerator"] { background: #1F3329; color: #B5D8C1; }
[data-theme="dark"] .bulk-scorm__tool[data-tool="ispring"]       { background: #1F2A32; color: #BDCED8; }
[data-theme="dark"] .bulk-scorm__tool[data-tool="tts"]           { background: #2E1F2E; color: #D8B5D8; }
[data-theme="dark"] .bulk-scorm__tool[data-tool="lectora"]       { background: #3A2418; color: #E5B891; }
[data-theme="dark"] .bulk-scorm__tool[data-tool="chemmedia"]     { background: #182F2D; color: #9DD9CE; }
[data-theme="dark"] .bulk-scorm__tool[data-tool="generic"]       { background: #36332F; color: #ACA59C; }

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

.bulk-scorm__state.is-queued    { color: var(--admin-text-muted); }
.bulk-scorm__state.is-uploading { color: var(--admin-primary); }
.bulk-scorm__state.is-ready     { color: #065f46; font-weight: 600; }
.bulk-scorm__state.is-error     { color: var(--admin-danger); font-weight: 600; }
.bulk-scorm__state.is-saved     { color: #065f46; font-weight: 600; }

[data-theme="dark"] .bulk-scorm__state.is-ready,
[data-theme="dark"] .bulk-scorm__state.is-saved { color: #B5D8C1; }

.bulk-scorm__input {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  background: var(--admin-surface);
  color: var(--admin-text);
  font-size: 0.875rem;
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.bulk-scorm__input:focus {
  outline: none;
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

textarea.bulk-scorm__input {
  resize: vertical;
  line-height: 1.4;
  min-height: 2.25rem;
  overflow-wrap: anywhere;
}

textarea.bulk-scorm__title {
  min-height: 2.5rem;
}

.bulk-scorm__remove {
  color: var(--admin-danger);
  background: transparent;
  border: none;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
}

.bulk-scorm__remove:hover {
  color: #b91c1c;
  text-decoration: underline;
}

[data-theme="dark"] .bulk-scorm__remove:hover { color: #F1C8B9; }

.bulk-scorm__footer {
  margin-top: 1rem;
  display: flex;
  gap: 0.5rem;
}

.bulk-scorm__stack {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.bulk-scorm__slug-inline {
  font-size: 0.8rem;
}

.bulk-scorm__pills {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.bulk-scorm__pill {
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--admin-border);
  border-radius: 9999px;
  background: var(--admin-surface);
  color: var(--admin-text);
  font-size: 0.75rem;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bulk-scorm__pill:hover:not(.is-active) {
  background: rgba(79, 70, 229, 0.08);
  border-color: var(--admin-primary);
  color: var(--admin-primary);
}

.bulk-scorm__pill.is-active {
  background: var(--admin-primary);
  border-color: var(--admin-primary);
  color: white;
}

.bulk-scorm__pill.is-active:hover {
  background: var(--admin-primary-hover);
  border-color: var(--admin-primary-hover);
}

/* --- AI Review panel ---------------------------------------------------- */
.review-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.review-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.review-panel__title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
  color: var(--admin-text);
}

.review-panel__empty {
  font-size: 0.85rem;
  color: var(--admin-text-muted);
  text-align: center;
  padding: 1.5rem 0.5rem;
}

.review-panel__group {
  margin-bottom: 0.5rem;
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  background: var(--admin-surface);
}

.review-panel__group-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--admin-text);
}

.review-panel__group-summary::-webkit-details-marker { display: none; }
.review-panel__group-summary::after {
  content: "▸";
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.75rem;
  color: var(--admin-text-muted);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.review-panel__group[open] > .review-panel__group-summary::after {
  transform: rotate(90deg);
}

.review-panel__group-summary:hover {
  background: var(--admin-accent-bg);
}

.review-panel__group-summary:focus-visible {
  outline: 2px solid var(--admin-primary);
  outline-offset: -2px;
}

.review-panel__group[open] > .review-panel__group-summary {
  border-bottom: 1px solid var(--admin-border);
}

.review-panel__group-title {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--admin-text);
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  /* Wrap long titles to at most 2 lines so authors can read the full
     section name; the panel is narrow, so single-line ellipsis was hiding
     too much context. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.review-panel__group-index {
  color: var(--admin-text-muted);
  font-weight: 500;
  margin-right: 0.25rem;
}

.review-panel__group-counts {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}

.review-panel__sev-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #fff;
}

.review-panel__sev-pill--info { background: var(--admin-info); }
.review-panel__sev-pill--warning { background: var(--admin-warning); }
.review-panel__sev-pill--error { background: var(--admin-danger); }

.review-panel__group-actions {
  display: flex;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid var(--admin-border);
  background: var(--admin-accent-bg);
}

.review-panel__group-actions form { margin: 0; }
.review-panel__group > .review-finding { margin: 0.5rem 0.75rem; }
.review-panel__group > .review-finding:first-of-type { margin-top: 0.5rem; }
.review-panel__group > .review-finding:last-of-type { margin-bottom: 0.5rem; }

/* --- Severity filter ---------------------------------------------------- */
.review-panel__controls {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

/* Underlined tabs switching the findings list between Active and Dismissed.
   Sits above the severity chips, which filter within the selected view. */
.review-panel__tabs {
  display: flex;
  gap: 1rem;
  border-bottom: 1px solid var(--admin-border);
}

.review-panel__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.1rem;
  margin-bottom: -1px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--admin-text-muted);
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
}

.review-panel__tab:hover {
  color: var(--admin-text);
}

.review-panel__tab.is-active {
  color: var(--admin-text);
  font-weight: 600;
  border-bottom-color: var(--admin-primary);
}

.review-panel__tab-count {
  font-size: 0.7rem;
  color: var(--admin-text-muted);
  background: var(--admin-bg);
  border-radius: 999px;
  padding: 0 0.4rem;
}

.review-run-row,
.generation-run-row {
  cursor: pointer;
}

.review-run-row:hover,
.generation-run-row:hover {
  background: var(--admin-bg);
}

.review-run-row__chevron,
.generation-run-row__chevron {
  display: inline-block;
  margin-right: 0.4rem;
  color: var(--admin-text-muted);
  transition: transform 0.15s ease;
}

.review-run-row.is-open .review-run-row__chevron,
.generation-run-row.is-open .generation-run-row__chevron {
  transform: rotate(90deg);
}

.review-run-detail > td,
.generation-run-detail > td {
  background: var(--admin-bg);
}

.review-run-detail__label {
  margin: 0.5rem 0 0.15rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--admin-text-muted);
}

.review-run-checks__list {
  margin: 0.25rem 0 0.5rem;
  padding: 0;
  list-style: none;
  max-width: 32rem;
}

.review-run-check {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.4rem 0;
  border-top: 1px solid var(--admin-border);
  font-size: 0.85rem;
}

.review-run-check:first-child {
  border-top: none;
}

.review-run-check__model {
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  color: var(--admin-text);
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  white-space: nowrap;
}

.review-run-check__skipped {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--admin-text-muted);
  white-space: nowrap;
}

.review-finding__dismiss-reason {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--admin-text-muted);
}

.review-panel__filter {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.review-panel__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--admin-border);
  border-radius: 999px;
  background: var(--admin-bg);
  color: var(--admin-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  opacity: 0.6;
  transition: opacity 0.12s, border-color 0.12s, background 0.12s;
}

.review-panel__chip:hover {
  opacity: 0.9;
  background: var(--admin-accent-bg);
}

.review-panel__chip.is-active {
  opacity: 1;
  color: var(--admin-text);
}

.review-panel__chip.is-active:hover {
  background: var(--admin-accent-bg);
}

.review-panel__chip:focus-visible {
  outline: 2px solid var(--admin-primary);
  outline-offset: 2px;
}

.review-panel__chip--error.is-active { border-color: var(--admin-danger); }
.review-panel__chip--warning.is-active { border-color: var(--admin-warning); }
.review-panel__chip--info.is-active { border-color: var(--admin-info); }

.review-panel__chip-count {
  display: inline-block;
  min-width: 1.1rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--admin-border);
  font-size: 0.7rem;
  text-align: center;
  color: var(--admin-text);
}

.review-panel--hide-info .review-finding--info,
.review-panel--hide-warning .review-finding--warning,
.review-panel--hide-error .review-finding--error {
  display: none;
}

/* Hide the per-severity pill on group summaries when that severity is muted,
   so the summary count reflects what the author can actually see. */
.review-panel--hide-info .review-panel__sev-pill--info,
.review-panel--hide-warning .review-panel__sev-pill--warning,
.review-panel--hide-error .review-panel__sev-pill--error {
  display: none;
}

.review-status {
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  background: var(--admin-accent-bg);
  border: 1px solid var(--admin-border);
}

.review-status__progress {
  height: 4px;
  background: var(--admin-border);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 0.4rem;
}

.review-status__bar {
  height: 100%;
  background: var(--admin-primary);
  transition: width 0.3s ease;
}

.review-status__label {
  font-size: 0.8rem;
  color: var(--admin-text-muted);
}

.review-status__label--error {
  color: var(--admin-danger);
}

.review-status__label--muted {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  color: var(--admin-text-muted);
}

.review-status__label small {
  display: block;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.review-finding {
  border: 1px solid var(--admin-border);
  border-left-width: 3px;
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  background: var(--admin-surface);
  margin-bottom: 0.5rem;
}

.review-finding--info { border-left-color: var(--admin-info); }
.review-finding--warning { border-left-color: var(--admin-warning); }
.review-finding--error { border-left-color: var(--admin-danger); }

.review-finding__header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  row-gap: 0.25rem;
  margin-bottom: 0.35rem;
}

.review-finding__badge {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
}

.review-finding__badge--info { background: var(--admin-info); }
.review-finding__badge--warning { background: var(--admin-warning); }
.review-finding__badge--error { background: var(--admin-danger); }

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

.review-finding__stale {
  margin-left: auto;
  display: inline-block;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--admin-warning-bg);
  color: var(--admin-warning);
}

/* Always-visible explanation for a stale finding (replaces the old hover-only
   tooltip, which was undiscoverable). */
.review-finding__stale-note {
  margin: 0 0 0.4rem;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  font-size: 0.72rem;
  line-height: 1.35;
  background: var(--admin-warning-bg);
  color: var(--admin-warning);
  border: 1px solid var(--admin-warning-border);
}

.review-finding__title {
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0 0 0.35rem;
  color: var(--admin-text);
}

.review-finding__excerpt {
  font-size: 0.8rem;
  color: var(--admin-text-muted);
  border-left: 2px solid var(--admin-border);
  padding-left: 0.6rem;
  margin: 0 0 0.4rem;
  font-style: italic;
}

.review-finding__body {
  font-size: 0.8rem;
  color: var(--admin-text);
  margin: 0 0 0.4rem;
  line-height: 1.45;
}

.review-finding__fix {
  font-size: 0.8rem;
  background: var(--admin-success-bg);
  border-radius: 4px;
  padding: 0.35rem 0.5rem;
  margin-bottom: 0.4rem;
  color: var(--admin-text);
}

.review-finding__footer {
  display: flex;
  justify-content: flex-end;
}

.review-finding__footer form {
  margin: 0;
}

/* --- Review run dialog -------------------------------------------------- */
.review-dialog {
  max-width: 560px;
}

.review-dialog__fieldset {
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin: 0 0 1rem;
}

.review-dialog__legend {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--admin-text-muted);
  padding: 0 0.4rem;
}

.review-dialog .confirm-modal { position: relative; }

.review-dialog__close {
  position: absolute;
  top: 0.75rem;
  right: 0.85rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--admin-text-muted);
  padding: 0.25rem 0.5rem;
}

.review-dialog__close:hover { color: var(--admin-text); }

.review-dialog__hint {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  color: var(--admin-text-muted);
}

/* A <summary> styled as a button: drop the default disclosure marker so the
   .btn chrome reads cleanly. Visual styling comes from .btn .btn-secondary. */
.review-dialog__advanced-summary {
  list-style: none;
}

.review-dialog__advanced-summary::-webkit-details-marker {
  display: none;
}

.review-dialog__advanced[open] .review-dialog__advanced-summary {
  margin-bottom: 0.5rem;
}

/* Positioning only; visual styling comes from .btn .btn-secondary .btn-xs. */
.review-dialog__select-all {
  margin-bottom: 0.5rem;
}

.review-dialog__cluster + .review-dialog__cluster {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--admin-border);
}

.review-dialog__cluster-heading {
  margin: 0 0 0.1rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--admin-text-muted);
}

.review-dialog__check {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.6rem;
  row-gap: 0.15rem;
  align-items: baseline;
  padding: 0.4rem 0;
  cursor: pointer;
}

.review-dialog__check input { grid-row: span 2; }

.review-dialog__check-name {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--admin-text);
}

.review-dialog__check-description {
  font-size: 0.8rem;
  color: var(--admin-text-muted);
}

.review-dialog__check--disabled { opacity: 0.55; }

.review-dialog__check-unavailable {
  grid-column: 2;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--admin-text-muted);
}

.review-dialog__model-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  align-items: center;
  padding: 0.3rem 0;
}

/* Explicit display:grid above overrides the implicit display:none that the
   hidden attribute applies, so we have to re-assert it here. */
.review-dialog__model-row[hidden] {
  display: none;
}

.review-dialog__model-row label {
  font-size: 0.85rem;
  color: var(--admin-text);
}

.review-dialog__model-row select {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--admin-border);
  border-radius: 4px;
  background: var(--admin-bg);
  color: var(--admin-text);
  font-size: 0.85rem;
}

.btn-xs {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
}

/* --- CAPP publish picker (global_admin multi-environment) ------------- */
.publish-targets {
  position: relative;
  display: inline-block;
}

.publish-targets__summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.publish-targets__summary::-webkit-details-marker { display: none; }

.publish-targets__menu {
  position: absolute;
  right: 0;
  top: 2.2rem;
  z-index: 10;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 0.25rem;
}

.publish-targets__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.publish-targets__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  font-size: 0.8rem;
  color: var(--admin-text);
  text-decoration: none;
  cursor: pointer;
}

.publish-targets__item:hover { background: var(--admin-bg); }

.publish-targets__item--disabled {
  color: var(--admin-text-muted);
  cursor: not-allowed;
}

.publish-targets__item--disabled:hover { background: none; }

.publish-targets__empty {
  margin: 0;
  padding: 0.4rem 0.6rem;
}

/* --- Module publications ---------------------------------------------- */
/* Spacing around the "Published on N environments" link on the show page.
   Lives on the inner element (rendered only when there are publications) so an
   empty turbo-stream target adds no stray gap. */
.published-on-link {
  margin: 1rem 0;
}

/* Bottom-align the filter actions with the input boxes (the labeled field
   groups are taller, and .filter-bar centers items vertically). */
.publications-filter-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-end;
}

.publications-filter-bar {
  align-items: flex-end;
}

/* One explicit height on the fields, the combobox input, and the action button
   so they line up exactly. Matching padding/border alone left sub-pixel
   differences between the native inputs and the button. */
.publications-filter-bar .filter-input,
.publications-filter-bar .combobox .styled-input,
.publications-filter-bar .publications-filter-actions .btn {
  box-sizing: border-box;
  height: 2.25rem;
}

.publications-filter-bar .publications-filter-actions .btn {
  display: inline-flex;
  align-items: center;
  font-size: 0.85rem;
}

.publications-table {
  width: 100%;
  border-collapse: collapse;
}

.publications-table th,
.publications-table td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--admin-border);
}

.publications-table th {
  font-size: 0.75rem;
  color: var(--admin-text-muted);
  font-weight: 600;
}