/* ============================================================
   QRTask Admin App Styles
   ============================================================ */

/* ---- App Shell ---- */
#admin-app {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--color-neutral-50);
}

.admin-menu-btn,
.sidebar-close-btn,
.admin-sidebar-backdrop {
  display: none;
}

/* ---- Sidebar ---- */
.admin-sidebar {
  width: 260px;
  min-width: 260px;
  background: var(--color-neutral-800);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  flex-shrink: 0;
  transition: transform 0.25s ease;
  z-index: 20;
  color: var(--color-neutral-50);
}

.sidebar-logo {
  padding: 1.25rem 1.25rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.sidebar-logo-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  background: transparent;
  border-radius: var(--radius-md);
  display: block;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  flex-shrink: 0;
}
.sidebar-logo-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sidebar-logo-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-white);
  letter-spacing: -0.01em;
}
.sidebar-logo-sub {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sidebar-event-badge {
  margin: 0.875rem 1rem;
  padding: 0.625rem 0.875rem;
  background: rgba(255,255,255,0.07);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  color: rgba(255,255,255,0.9);
}
.sidebar-nav-item.disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}
.sidebar-event-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.4);
  font-weight: 600;
}
.sidebar-event-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-event-change {
  font-size: 0.7rem;
  color: var(--color-primary);
  cursor: pointer;
  font-weight: 500;
}
.sidebar-event-change:hover { color: #818cf8; }

.sidebar-nav {
  flex: 1;
  padding: 0.5rem 0;
  overflow-y: auto;
}
.sidebar-nav-section {
  padding: 0.875rem 1rem 0.25rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.3);
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1.25rem;
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-size: 0.9rem;
  font-weight: 500;
  font-family: var(--font-sans);
  border-radius: 0;
  transition: color 0.15s, background 0.15s;
  border-left: 3px solid transparent;
  text-decoration: none;
}
.sidebar-nav-item:hover {
  color: var(--color-white);
  background: rgba(255,255,255,0.06);
  text-decoration: none;
}
.sidebar-nav-item.active {
  color: var(--color-white);
  background: rgba(99,102,241,0.2);
  border-left-color: var(--color-primary);
}
.sidebar-nav-item-icon {
  font-size: 1.0625rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.sidebar-nav-item-badge {
  margin-left: auto;
  background: var(--color-primary);
  color: white;
  border-radius: var(--radius-full);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  min-width: 18px;
  text-align: center;
}

.sidebar-bottom {
  padding: 1rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name { font-size: 0.875rem; font-weight: 600; color: rgba(255,255,255,0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { font-size: 0.7rem; color: rgba(255,255,255,0.4); }
.sidebar-logout-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  font-size: 1rem;
  padding: 0.25rem;
  border-radius: var(--radius-sm);
  transition: color 0.15s;
}
.sidebar-logout-btn:hover { color: var(--color-danger); }

/* ---- Admin Main ---- */
.admin-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  min-width: 0;
}

/* ---- Admin Topbar ---- */
.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  height: 60px;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-neutral-200);
  flex-shrink: 0;
  gap: 1rem;
}
.admin-topbar-left { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.admin-page-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-neutral-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-breadcrumb {
  font-size: 0.8125rem;
  color: var(--color-neutral-500);
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
}
.admin-breadcrumb-item { color: var(--color-neutral-500); }
.admin-breadcrumb-sep  { color: var(--color-neutral-300); }
.admin-breadcrumb-item.current { color: var(--color-neutral-800); font-weight: 500; }

.admin-topbar-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

/* ---- Admin Content ---- */
.admin-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

/* ---- Page Header ---- */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.page-header-left {}
.page-header h1 { font-size: 1.5rem; font-weight: 800; color: var(--color-neutral-900); margin-bottom: 0.25rem; }
.page-header-sub { font-size: 0.875rem; color: var(--color-neutral-500); }
.page-header-actions { display: flex; gap: 0.625rem; align-items: center; flex-shrink: 0; }

/* ---- Stats Cards ---- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.stat-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  border: 1px solid var(--color-neutral-200);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.stat-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}
.stat-card-value { font-size: 1.875rem; font-weight: 800; color: var(--color-neutral-900); line-height: 1; }
.stat-card-label { font-size: 0.8125rem; color: var(--color-neutral-500); font-weight: 500; }
.stat-card-delta {
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
.stat-card-delta.up   { color: var(--color-success); }
.stat-card-delta.down { color: var(--color-danger); }

/* ---- Data Table ---- */
.table-wrapper {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-neutral-200);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-neutral-200);
  gap: 0.75rem;
}
.table-search { position: relative; }
.table-search-input {
  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
  border: 1.5px solid var(--color-neutral-300);
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  background: var(--color-neutral-50);
  color: var(--color-neutral-800);
  transition: border-color 0.15s, box-shadow 0.15s;
  min-width: 220px;
}
.table-search-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
  outline: none;
  background: var(--color-white);
}
.table-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-neutral-400);
  font-size: 0.875rem;
  pointer-events: none;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

/* Every admin table keeps its intrinsic content width and scrolls in both axes. */
.admin-table-scroll,
.admin-content div:has(> table) {
  max-width: 100%;
  max-height: min(70vh, calc(100dvh - 11rem));
  overflow: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.admin-content table {
  width: 100% !important;
  min-width: 720px;
}
.admin-content table td {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}
.admin-content table th,
.admin-content table .td-actions,
.admin-content table td:has(> button),
.admin-content table td:has(> .btn) {
  white-space: nowrap;
}
.admin-content table td > div,
.admin-content table td > p,
.admin-content table td details {
  white-space: normal;
}
.admin-content table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
}
.data-table thead tr {
  background: var(--color-neutral-50);
  border-bottom: 1px solid var(--color-neutral-200);
}
.data-table th {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-neutral-500);
  padding: 0.75rem 1.25rem;
  text-align: left;
  white-space: nowrap;
}
.data-table td {
  padding: 0.875rem 1.25rem;
  font-size: 0.9rem;
  color: var(--color-neutral-700);
  border-bottom: 1px solid var(--color-neutral-100);
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--color-neutral-50); }
.data-table .td-actions { white-space: nowrap; }
.data-table .td-bold { font-weight: 600; color: var(--color-neutral-900); }

.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.25rem;
  border-top: 1px solid var(--color-neutral-200);
  font-size: 0.8125rem;
  color: var(--color-neutral-500);
}

/* ---- Login screen ---- */
.admin-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-neutral-900) 0%, var(--color-neutral-800) 100%);
  padding: 1.5rem;
}
.admin-login-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  max-width: 420px;
  width: 100%;
  box-shadow: var(--shadow-lg);
}
.admin-login-brand {
  text-align: center;
  margin-bottom: 2rem;
}
.admin-login-brand-logo {
  display: block;
  width: min(280px, 100%);
  height: auto;
  margin: 0 auto 0.35rem;
}
.admin-login-brand-subtitle {
  color: var(--color-neutral-500);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.admin-login-logo {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 2rem;
}
.admin-login-logo-icon {
  width: 48px;
  height: 48px;
  background: var(--color-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: white;
}
.admin-login-title { font-size: 1.5rem; font-weight: 800; color: var(--color-neutral-900); margin-bottom: 0.25rem; }
.admin-login-sub { font-size: 0.875rem; color: var(--color-neutral-500); margin-bottom: 2rem; }

/* ---- Task Builder ---- */
.task-builder {
  display: flex;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.task-builder-mobile-btn,.task-builder-backdrop,.task-list-close-btn { display:none; }

.task-builder-sidebar {
  width: 320px;
  min-width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--color-neutral-200);
  background: var(--color-white);
  overflow: hidden;
}
.task-builder-sidebar-header {
  padding: 1rem;
  border-bottom: 1px solid var(--color-neutral-200);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  flex-shrink: 0;
}
.task-builder-sidebar-actions {
  display: flex;
  gap: 0.5rem;
}
.task-builder-sidebar-body {
  flex: 1;
  overflow-y: auto;
}

.task-list-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid var(--color-neutral-100);
  border-left: 3px solid transparent;
  transition: background 0.12s;
  position: relative;
}
.task-list-item:hover { background: var(--color-neutral-50); }
.task-list-item.active { background: var(--color-primary-light); border-left-color: var(--color-primary); }
.task-list-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-neutral-300);
}
.task-list-item.published .task-list-item-dot { background: var(--color-success); }
.task-list-item.unpublished .task-list-item-dot { background: var(--color-neutral-300); }
.task-list-item-body { flex: 1; min-width: 0; }
.task-list-item-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-neutral-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.task-list-item.active .task-list-item-name { color: var(--color-primary-darker); }
.task-list-item-meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.2rem;
  flex-wrap: nowrap;
  overflow: hidden;
}
.task-list-item-count {
  font-size: 0.7rem;
  background: var(--color-neutral-100);
  color: var(--color-neutral-500);
  border-radius: var(--radius-full);
  padding: 0.1rem 0.45rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ---- Task editor panel ---- */
.task-builder-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
.task-editor-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-neutral-400);
  gap: 0.75rem;
  text-align: center;
  padding: 2rem;
}
.task-editor-empty-icon { font-size: 3rem; opacity: 0.4; }
.task-editor-empty p { font-size: 0.9rem; color: var(--color-neutral-500); }

.task-editor {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.task-editor-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--color-neutral-200);
  background: var(--color-white);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.task-editor-name {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-neutral-900);
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  padding: 0.25rem 0.375rem;
  border-radius: var(--radius-sm);
  min-width: 0;
  flex: 1;
  cursor: text;
}
.task-editor-name:hover { background: var(--color-neutral-100); }
.task-editor-name:focus { background: var(--color-neutral-100); outline: 2px solid var(--color-primary); outline-offset: 0; }

.task-editor-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-neutral-200);
  padding: 0 1.25rem;
  background: var(--color-white);
  flex-shrink: 0;
  overflow-x: auto;
}
.task-editor-tab {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-neutral-500);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  font-family: var(--font-sans);
}
.task-editor-tab:hover { color: var(--color-neutral-800); }
.task-editor-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

.task-editor-tab-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
  display: none;
}
.task-editor-tab-content.active { display: block; }

/* ---- Card flow ---- */
.card-flow { display: flex; flex-direction: column; gap: 0; }
.card-flow-empty {
  padding: 2rem;
  text-align: center;
  color: var(--color-neutral-500);
  border: 2px dashed var(--color-neutral-200);
  border-radius: var(--radius-lg);
  font-size: 0.9rem;
}
.add-card-btn-row {
  padding-top: 1rem;
  display: flex;
  justify-content: center;
}

/* Card block */
.card-block {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  margin-bottom: 0.625rem;
  overflow: hidden;
  transition: box-shadow 0.15s;
}
.card-block:hover { box-shadow: var(--shadow-md); }
.card-block.sortable-ghost { opacity: 0.4; }
.card-block.sortable-drag  { box-shadow: var(--shadow-lg); }

.card-block-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
}
.card-block-stripe {
  width: 4px;
  height: 100%;
  min-height: 40px;
  border-radius: 2px;
  flex-shrink: 0;
  margin: -0.75rem 0;
  align-self: stretch;
}
.card-block-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  flex-shrink: 0;
}
.card-block-info { flex: 1; min-width: 0; }
.card-block-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-neutral-900);
  cursor: text;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  padding: 0.125rem 0.25rem;
  border-radius: var(--radius-sm);
  width: 100%;
  display: block;
}
.card-block-name:hover { background: var(--color-neutral-100); }
.card-block-name:focus { background: var(--color-neutral-100); outline: 1px solid var(--color-primary); outline-offset: 0; }
.card-block-type-badge {
  font-size: 0.7rem;
  color: var(--color-neutral-500);
  margin-top: 0.1rem;
  font-weight: 500;
}
.card-block-actions {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  flex-shrink: 0;
}
.card-block-action-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  color: var(--color-neutral-400);
  font-size: 0.875rem;
  transition: color 0.15s, background 0.15s;
}
.card-block-action-btn:hover { background: var(--color-neutral-100); color: var(--color-neutral-700); }
.card-block-action-btn.danger:hover { background: var(--color-danger-light); color: var(--color-danger); }
.card-block-drag-handle {
  cursor: grab;
  color: var(--color-neutral-300);
  font-size: 1rem;
  padding: 0 0.25rem;
  user-select: none;
}
.card-block-drag-handle:active { cursor: grabbing; }

/* Card block editor (expanded) */
.card-block-editor {
  padding: 1rem;
  border-top: 1px solid var(--color-neutral-100);
  background: var(--color-neutral-50);
  display: none;
}
.card-block.expanded .card-block-editor { display: block; }

/* Card editor sections */
.card-editor-section { margin-bottom: 1.25rem; }
.card-editor-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-neutral-500);
  margin-bottom: 0.625rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.card-editor-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-neutral-200);
}

/* Quiz option list in editor */
.quiz-option-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--color-neutral-100);
}
.quiz-option-item:last-child { border-bottom: none; }
.quiz-option-correct-radio { accent-color: var(--color-success); width: 16px; height: 16px; cursor: pointer; }
.quiz-option-text { flex: 1; }
.quiz-option-delete {
  color: var(--color-neutral-400);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
  padding: 0.25rem;
  border-radius: var(--radius-sm);
}
.quiz-option-delete:hover { color: var(--color-danger); background: var(--color-danger-light); }

/* Form field list in editor */
.form-field-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--color-neutral-100);
  flex-wrap: wrap;
}
.form-field-item:last-child { border-bottom: none; }
.form-field-item .form-input,
.form-field-item .form-select { min-height: 36px; font-size: 0.875rem; padding: 0.375rem 0.625rem; }
.form-field-item .form-select { padding-right: 2rem; }

/* ---- Lightweight HTML editor ---- */
.html-editor {
  overflow: hidden;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-md);
  background: var(--color-white);
}
.html-editor:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.html-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
  padding: 0.4rem;
  border-bottom: 1px solid var(--color-neutral-200);
  background: var(--color-neutral-50);
}
.html-editor-toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding-right: 0.3rem;
  margin-right: 0.1rem;
  border-right: 1px solid var(--color-neutral-200);
}
.html-editor-toolbar-group:last-child { padding-right: 0; margin-right: 0; border-right: 0; }
.html-editor-toolbar-spacer { flex: 1; }
.html-editor-toolbar button,
.html-editor-block {
  min-height: 32px;
  padding: 0.3rem 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-neutral-700);
  font: inherit;
  font-size: 0.78rem;
  line-height: 1;
  cursor: pointer;
}
.html-editor-toolbar button:hover,
.html-editor-toolbar button.active,
.html-editor-block:hover {
  border-color: var(--color-neutral-300);
  background: var(--color-white);
  color: var(--color-primary);
}
.html-editor-toolbar button:disabled,
.html-editor-block:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: transparent;
  color: var(--color-neutral-500);
}
.html-editor-block { max-width: 135px; background: var(--color-white); }
.html-editor-surface,
.html-editor-source {
  display: block;
  width: 100%;
  padding: 0.9rem 1rem;
  border: 0;
  outline: 0;
  box-sizing: border-box;
  overflow-y: auto;
  resize: vertical;
  color: var(--color-neutral-800);
  background: var(--color-white);
  font-size: 0.9rem;
  line-height: 1.6;
}
.html-editor-surface:empty::before {
  content: attr(data-placeholder);
  color: var(--color-neutral-400);
  pointer-events: none;
}
.html-editor-surface img {
  max-width: 100%;
  height: auto;
  margin: 0.5rem 0;
}
.html-editor-surface blockquote {
  margin: 0.75rem 0;
  padding-left: 0.9rem;
  border-left: 3px solid var(--color-neutral-300);
  color: var(--color-neutral-600);
}
.html-editor-source {
  display: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8rem;
  white-space: pre;
}
.html-editor.is-source-mode .html-editor-surface { display: none; }
.html-editor.is-source-mode .html-editor-source { display: block; }
.html-editor-status {
  min-height: 0;
  padding: 0 0.75rem;
  color: var(--color-neutral-500);
  font-size: 0.72rem;
}
.html-editor-status:not(:empty) { padding-top: 0.35rem; padding-bottom: 0.35rem; border-top: 1px solid var(--color-neutral-100); }
.html-editor.is-uploading { opacity: 0.75; pointer-events: none; }

/* ---- Card type picker modal ---- */
.card-type-picker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
.card-type-option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border: 2px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.15s;
  background: var(--color-white);
}
.card-type-option:hover { border-color: var(--color-primary); background: var(--color-primary-light); }
.card-type-option-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.card-type-option-info { min-width: 0; }
.card-type-option-name { font-size: 0.875rem; font-weight: 700; color: var(--color-neutral-800); margin-bottom: 0.2rem; }
.card-type-option-desc { font-size: 0.75rem; color: var(--color-neutral-500); line-height: 1.4; }

/* ---- QR display ---- */
.qr-code-display {
  background: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.qr-uuid-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  background: var(--color-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  margin-bottom: 0.75rem;
}
.qr-uuid-label { font-size: 0.75rem; color: var(--color-neutral-500); font-weight: 600; flex-shrink: 0; }
.qr-uuid-value {
  font-size: 0.8125rem;
  font-family: 'Courier New', monospace;
  color: var(--color-neutral-700);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qr-full-url {
  padding: 0.75rem;
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-neutral-300);
  font-size: 0.8rem;
  color: var(--color-primary);
  font-family: monospace;
  word-break: break-all;
  margin-top: 0.5rem;
}

/* ---- Access windows ---- */
.access-window-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--color-neutral-100);
  flex-wrap: wrap;
}
.access-window-item:last-child { border-bottom: none; }
.access-window-sep { color: var(--color-neutral-400); font-size: 0.8rem; flex-shrink: 0; }

/* ---- Progress monitor ---- */
.progress-table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-neutral-200);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}
.progress-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
}
.progress-table th,
.progress-table td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--color-neutral-100);
  border-right: 1px solid var(--color-neutral-100);
  font-size: 0.8125rem;
  white-space: nowrap;
}
.progress-table th { background: var(--color-neutral-50); font-weight: 700; color: var(--color-neutral-500); }
.progress-table th:first-child { position: sticky; left: 0; z-index: 2; background: var(--color-neutral-50); }
.progress-table td:first-child { position: sticky; left: 0; background: var(--color-white); font-weight: 600; }
.progress-cell-none      { background: var(--color-neutral-50); text-align: center; color: var(--color-neutral-300); }
.progress-cell-unlocked  { background: var(--color-primary-light); text-align: center; color: var(--color-primary); font-weight: 600; }
.progress-cell-completed { background: var(--color-success-light); text-align: center; color: #065f46; font-weight: 600; }
.progress-back-label { display:none; }

#progress-matrix-region > div:has(> table) {
  max-height: calc(100dvh - 12rem);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
}
#progress-matrix-region table {
  width: max-content !important;
  min-width: 100%;
}
#progress-matrix-region table th:first-child,
#progress-matrix-region table td:first-child {
  position: sticky;
  left: 0;
  z-index: 4;
  background: var(--color-white);
}
#progress-matrix-region table thead th:first-child { z-index: 6; background: var(--color-neutral-50); }
#progress-matrix-region .progress-cell {
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
}

/* ---- Manual review ---- */
.manual-review-list { display:flex;flex-direction:column;gap:.65rem;max-width:920px; }
.manual-review-list-item { width:100%;border:1px solid var(--color-neutral-200);border-radius:var(--radius-lg);background:#fff;padding:1rem 1.1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;text-align:left;cursor:pointer;box-shadow:var(--shadow-sm);font:inherit;color:inherit; }
.manual-review-list-item:hover { border-color:var(--color-primary);box-shadow:var(--shadow-md); }
.manual-review-list-main,.manual-review-list-meta { display:flex;flex-direction:column;gap:.2rem;min-width:0; }
.manual-review-list-main strong { color:var(--color-neutral-900); }
.manual-review-list-main span,.manual-review-list-meta { color:var(--color-neutral-500);font-size:.8rem; }
.manual-review-list-meta { align-items:flex-end;flex-shrink:0; }
.empty-state-card { padding:2rem;text-align:center;background:#fff;border:1px solid var(--color-neutral-200);border-radius:var(--radius-lg);color:var(--color-neutral-500); }
.empty-state-card h3 { color:var(--color-neutral-800);margin:.5rem 0; }
.empty-state-icon { font-size:2rem;color:var(--color-success); }
.manual-review-detail { max-width:900px;margin:0 auto;padding-bottom:6rem; }
.review-back-btn { margin-bottom:1rem; }
.manual-review-detail-header { display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem; }
.manual-review-detail-header h2 { margin:0 0 .25rem; }
.manual-review-detail-header p,.manual-review-detail-header time { color:var(--color-neutral-500);font-size:.82rem; }
.review-score-card { background:#fff;border:1px solid var(--color-neutral-200);border-radius:var(--radius-lg);padding:1rem;margin-bottom:.75rem;box-shadow:var(--shadow-sm); }
.review-score-card > header,.review-task-score { display:flex;align-items:center;justify-content:space-between;gap:1rem; }
.review-score-card header > div,.review-task-score > div { display:flex;flex-direction:column;gap:.2rem; }
.review-score-card header > span,.review-task-score span,.review-card-number { color:var(--color-neutral-500);font-size:.75rem; }
.review-score-card label { display:flex;align-items:center;gap:.6rem;font-size:.8rem;color:var(--color-neutral-600);font-weight:600; }
.review-points-input { width:88px;min-height:44px;padding:.45rem .55rem;border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);font-size:1rem; }
.review-answer { margin:.85rem 0;padding:.75rem;background:var(--color-neutral-50);border-radius:var(--radius-md); }
.review-answer p { margin:0; }
.review-answer-list { display:flex;flex-direction:column;gap:.55rem; }
.review-answer-list > div { display:flex;flex-direction:column;gap:.15rem; }
.review-answer-list span { color:var(--color-neutral-500);font-size:.75rem; }
.review-quiz-result { display:flex;gap:.3rem .75rem;align-items:baseline;flex-wrap:wrap; }
.review-quiz-selected.is-correct { color:var(--color-success); }
.review-quiz-selected.is-incorrect { color:var(--color-danger); }
.review-quiz-correct { color:#166534;font-size:.8rem; }
.review-answer-list img { display:block;max-width:220px;max-height:180px;object-fit:contain;border-radius:var(--radius-md);margin-top:.3rem; }
.manual-review-actions { position:sticky;bottom:0;display:flex;justify-content:flex-end;gap:.65rem;padding:1rem;background:rgba(248,250,252,.96);border-top:1px solid var(--color-neutral-200);z-index:5; }

/* ---- Per-group task configuration ---- */
.group-task-config-overlay { position:fixed;inset:0;background:rgba(15,23,42,.58);z-index:8000;display:flex;align-items:center;justify-content:center;padding:2vh 2vw; }
.group-task-config-dialog { width:min(1050px,96vw);height:min(900px,96vh);background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden; }
.group-task-config-dialog > header { padding:1rem 1.25rem;border-bottom:1px solid var(--color-neutral-200);display:flex;align-items:flex-start;justify-content:space-between;gap:1rem; }
.group-task-config-dialog h3 { margin:0;font-size:1.1rem; }
.group-task-config-dialog header p { margin:.25rem 0 0;color:var(--color-neutral-500);font-size:.82rem; }
.group-task-close { border:0;background:none;font-size:1.5rem;color:var(--color-neutral-500);cursor:pointer; }
.group-task-config-toolbar { padding:.75rem 1.25rem;border-bottom:1px solid var(--color-neutral-200);background:var(--color-neutral-50);display:flex;align-items:center;gap:.75rem;flex-wrap:wrap; }
.group-task-active-toggle { font-weight:650;margin-right:auto;display:flex;align-items:center;gap:.5rem; }
.group-task-config-actions { display:flex;gap:.35rem;flex-wrap:wrap; }
.group-task-config-scroll { flex:1;overflow:auto;padding:.75rem 1.25rem 1.5rem;background:#f8fafc; }
.group-task-config-section-heading { min-height:2.35rem;margin-top:.5rem;display:flex;align-items:flex-end;justify-content:space-between;gap:.75rem; }
.group-task-config-section h4 { margin:1rem 0 .4rem;color:var(--color-neutral-500);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em; }
.group-task-sort-control { display:flex;align-items:center;gap:.45rem;color:var(--color-neutral-500);font-size:.75rem; }
.group-task-sort-control select { width:auto;min-width:190px;padding:.35rem 1.9rem .35rem .55rem;font-size:.78rem; }
.group-task-config-list { display:flex;flex-direction:column;gap:.35rem;min-height:4px; }
.group-task-config-row { display:grid;grid-template-columns:2rem 2rem 1.5rem minmax(0,1fr);align-items:center;gap:.5rem;padding:.65rem .8rem;background:#fff;border:1px solid var(--color-neutral-200);border-radius:var(--radius-md);user-select:none; }
.group-task-config-row:hover { border-color:var(--color-neutral-300); }
.group-task-config-row.is-selected { background:#eef2ff;border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary); }
.group-task-config-row.is-disabled:not(.is-selected) { opacity:.62;background:var(--color-neutral-50); }
.group-task-position { font-size:.75rem;font-weight:700;color:var(--color-neutral-400);text-align:center; }
.group-task-drag { border:0;background:none;cursor:grab;color:var(--color-neutral-400);font-size:1rem;letter-spacing:-.25rem;padding:.25rem; }
.group-task-drag:active { cursor:grabbing; }
.group-task-row-body { min-width:0; }
.group-task-row-name { font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.group-task-row-meta { display:flex;gap:.35rem;align-items:center;flex-wrap:wrap;margin-top:.25rem; }
.group-task-area { display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;color:var(--color-neutral-600); }
.group-task-area i { width:.55rem;height:.55rem;border-radius:50%; }
.group-task-config-dialog > footer { padding:.8rem 1.25rem;border-top:1px solid var(--color-neutral-200);display:flex;align-items:center;justify-content:space-between;gap:1rem;color:var(--color-neutral-500);font-size:.78rem; }
.group-task-config-dialog > footer div { display:flex;gap:.5rem; }
@media (max-width:700px) {
  .group-task-config-overlay { padding:0; }
  .group-task-config-dialog { width:100vw;height:100vh;border-radius:0; }
  .group-task-config-section-heading { align-items:flex-start;flex-direction:column;gap:.2rem;margin-bottom:.4rem; }
  .group-task-sort-control { width:100%; }
  .group-task-sort-control select { min-width:0;flex:1; }
  .group-task-config-row { grid-template-columns:1.6rem 1.8rem 1.3rem minmax(0,1fr);padding:.55rem .4rem; }
  .group-task-config-dialog > footer { align-items:flex-end; }
  .group-task-config-dialog > footer > span { display:none; }
}

/* ---- Media library ---- */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}
.media-item {
  background: var(--color-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s;
}
.media-item:hover { box-shadow: var(--shadow-md); }
.media-item-preview {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--color-neutral-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--color-neutral-400);
}
.media-item-preview img { width: 100%; height: 100%; object-fit: cover; }
.media-item-info { padding: 0.625rem 0.75rem; }
.media-item-name { font-size: 0.8rem; font-weight: 600; color: var(--color-neutral-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-item-size { font-size: 0.7rem; color: var(--color-neutral-500); }

/* ---- Responsive: collapse sidebar on smaller screens ---- */
@media (max-width: 900px) {
  #admin-app { height:100dvh !important; }
  .admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    transform: translateX(-100%);
    z-index: 50;
  }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-menu-btn,.sidebar-close-btn { display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:var(--radius-md);background:transparent;color:var(--color-neutral-700);font-size:1.35rem;cursor:pointer; }
  .sidebar-close-btn { margin-left:auto;color:#fff; }
  .admin-sidebar-backdrop { position:fixed;inset:0;z-index:40;border:0;background:rgba(15,23,42,.55); }
  .admin-sidebar-backdrop.visible { display:block; }
  .admin-topbar { padding:0 .75rem; }
  .admin-content { padding:1rem !important; }
  .sidebar-nav-item,.sidebar-event-badge { min-height:44px; }
  .task-builder-sidebar { width: 280px; min-width: 0; }
}

@media (max-width: 640px) {
  #generic-modal,#confirm-modal,#import-task-modal { padding:0 !important;align-items:stretch !important; }
  #generic-modal > div,#import-task-modal > div { width:100vw !important;max-height:none !important;height:100dvh;border-radius:0 !important; }
  #confirm-modal > div { width:calc(100vw - 2rem) !important;margin:auto; }
  .page-header,.review-page-header,.manual-review-detail-header,.review-task-score { flex-direction:column;align-items:stretch; }
  .page-header-actions,.admin-topbar-right { flex-wrap:wrap; }
  .manual-review-list-item { align-items:flex-start;padding:.9rem; }
  .manual-review-list-meta { align-items:flex-end;text-align:right; }
  .review-score-card > header { align-items:flex-start; }
  .review-score-card label { justify-content:space-between;margin-top:.75rem; }
  .manual-review-actions { flex-direction:column-reverse;margin:0 -1rem;padding:1rem; }
  .manual-review-actions .btn { min-height:46px;width:100%; }
  .progress-detail-open #progress-matrix-region { display:none; }
  .progress-detail-open #task-responses-panel { margin-top:0 !important; }
  #task-responses-panel table,#task-responses-panel tbody,#task-responses-panel tr,#task-responses-panel td { display:block;width:100% !important;box-sizing:border-box; }
  #task-responses-panel thead { display:none; }
  #task-responses-panel td:first-child { position:static; }
  .progress-detail-back { min-height:44px;font-size:.85rem !important; }
  .progress-detail-back .progress-close-symbol { display:none; }
  .progress-detail-back .progress-back-label { display:inline; }
  .card-type-picker { grid-template-columns: 1fr; }
  .task-builder-sidebar { display: none; }
  .task-builder-sidebar.visible { display: flex; position: fixed; left: 0; top: 0; height: 100dvh; z-index: 72; width: 90vw !important; max-width: 320px; box-shadow: var(--shadow-lg); }
  .task-builder-mobile-btn { display:inline-flex;position:absolute;left:.65rem;top:.65rem;z-index:12;align-items:center;justify-content:center;min-height:44px;padding:.55rem .75rem;border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);background:#fff;color:var(--color-neutral-700);font-weight:650;box-shadow:var(--shadow-sm); }
  .task-list-close-btn { display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;background:transparent;color:var(--color-neutral-600);font-size:1.4rem; }
  .task-builder-backdrop.visible { display:block;position:fixed;inset:0;z-index:71;border:0;background:rgba(15,23,42,.55); }
  .task-editor-inner > div:first-child { padding-top:4.25rem !important; }
  .html-editor-toolbar-spacer { display: none; }
  .html-editor-toolbar-group { border-right: 0; padding-right: 0; }
  .html-editor-toolbar button { min-width: 34px; }
}