/* ============================================
   Admin dashboard — KPI strip, roster, drawer
   as bottom-sheet on mobile, lesson editor.
   ============================================ */

.admin {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.admin__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.admin__title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
}

.admin__subtitle {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ── KPI strip ── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}

.kpi {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--admin-accent);
}

.kpi__label {
  margin: 0;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
}

.kpi__value {
  margin: var(--space-2) 0 0;
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
  letter-spacing: -0.02em;
  line-height: 1;
}

.kpi__delta {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ── Roster table (desktop) ── */
.roster-wrap {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  overflow: hidden;
}

.roster-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.roster-toolbar__search {
  flex: 1 1 200px;
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.roster-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.roster-table th,
.roster-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.roster-table th {
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  background: var(--color-surface-sunken);
}

.roster-table tr:hover {
  background: var(--color-surface-sunken);
  cursor: pointer;
}

.roster-table tr:last-child td {
  border-bottom: none;
}

.roster-progress {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 140px;
}

.roster-progress__track {
  flex: 1;
  height: 6px;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.roster-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.status-pill--active {
  background: var(--color-accent-light);
  color: var(--color-accent);
}

.status-pill--inactive {
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}

.status-pill--complete {
  background: var(--color-success-bg);
  color: var(--color-success-border);
}

/* ── Roster as cards (mobile) ── */
@media (max-width: 720px) {
  .roster-table thead {
    display: none;
  }

  .roster-table,
  .roster-table tbody,
  .roster-table tr,
  .roster-table td {
    display: block;
    width: 100%;
  }

  .roster-table tr {
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
  }

  .roster-table td {
    padding: var(--space-1) 0;
    border: none;
  }

  .roster-table td::before {
    content: attr(data-label) "：";
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    display: inline-block;
    min-width: 60px;
    font-weight: var(--weight-medium);
  }
}

/* ── Admin drawer (student detail) ── */
.admin-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(520px, 100vw);
  max-width: 100vw;
  z-index: 80;
  background: var(--color-surface-raised);
  border-left: 1px solid var(--color-border);
  box-shadow: -12px 0 36px oklch(0% 0 0 / 0.18);
  transform: translateX(100%);
  transition: transform var(--duration-normal) ease;
  display: flex;
  flex-direction: column;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
}

.admin-drawer[data-open="true"] {
  transform: translateX(0);
}

.admin-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.admin-drawer__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.admin-drawer__close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--color-surface-sunken);
  font-size: 1.2rem;
}

.admin-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.admin-drawer__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.admin-drawer__section-title {
  margin: 0;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
}

.admin-drawer__footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: var(--space-3);
}

/* Drawer overlay */
.admin-drawer-overlay {
  position: fixed;
  inset: 0;
  background: oklch(0% 0 0 / 0.4);
  z-index: 70;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) ease;
}

.admin-drawer-overlay[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}

/* ── Drawer as bottom sheet on mobile ── */
@media (max-width: 720px) {
  .admin-drawer {
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100vw;
    max-height: 90dvh;
    border-left: none;
    border-top: 1px solid var(--color-border);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    transform: translateY(100%);
    box-shadow: 0 -12px 36px oklch(0% 0 0 / 0.18);
  }

  .admin-drawer[data-open="true"] {
    transform: translateY(0);
  }

  .admin-drawer::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    background: var(--color-border-strong);
    border-radius: var(--radius-full);
    margin: var(--space-2) auto 0;
  }
}

/* ── Lesson editor ── */
.lesson-editor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.lesson-editor__pane {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 400px;
}

.lesson-editor__textarea {
  flex: 1;
  min-height: 320px;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  resize: vertical;
}

.lesson-editor__preview {
  flex: 1;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow-y: auto;
  max-height: 520px;
}

@media (max-width: 1023px) {
  .lesson-editor {
    grid-template-columns: 1fr;
  }
}

/* ── Notes list ── */
.notes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.notes-item {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--text-sm);
}

.notes-item__meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

/* ── Bulk actions toolbar ── */
.bulk-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary-light);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-primary);
}

.bulk-toolbar[hidden] {
  display: none;
}

.bulk-toolbar__count {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-primary-dark);
}

/* ── Admin top tab nav ── */
.admin-tabs {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow-x: auto;
  scrollbar-width: none;
}

.admin-tabs::-webkit-scrollbar { display: none; }

.admin-tabs__btn {
  flex: 1 1 auto;
  min-width: max-content;
  padding: var(--space-2) var(--space-4);
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
}

.admin-tabs__btn[aria-selected="true"] {
  background: var(--color-surface-raised);
  color: var(--color-text);
  box-shadow: 0 1px 3px oklch(0% 0 0 / 0.08);
}

.admin-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ── Cohort (期) tabs ── */
.cohort-tabs {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-2) 0;
}

.cohort-tabs__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  cursor: pointer;
  color: var(--color-text);
}

.cohort-tabs__btn[aria-selected="true"] {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

.cohort-tabs__count {
  font-size: var(--text-xs);
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: oklch(0% 0 0 / 0.08);
  min-width: 1.5em;
  text-align: center;
}

.cohort-tabs__btn[aria-selected="true"] .cohort-tabs__count {
  background: oklch(100% 0 0 / 0.22);
}

/* ── Status pills (extended) ── */
.status-pill--suspended {
  background: oklch(92% 0.06 30);
  color: oklch(40% 0.16 30);
}

.status-pill--used,
.status-pill--expired,
.status-pill--revoked {
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}

.roster-row--suspended {
  opacity: 0.55;
  background: oklch(97% 0.01 30);
}

/* ── Break-glass (PW reveal) ── */
.admin-drawer__section--danger {
  padding: var(--space-4);
  border: 1px solid oklch(82% 0.12 30);
  background: oklch(98% 0.02 30);
  border-radius: var(--radius-md);
}

.break-glass__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.break-glass__label {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.break-glass__value {
  margin: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--text-base);
  letter-spacing: 0.12em;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  user-select: all;
}

.break-glass__value--exposed {
  background: oklch(96% 0.12 90);
  border-color: oklch(70% 0.18 90);
  color: oklch(25% 0.12 90);
  letter-spacing: 0;
}

.btn--danger {
  background: oklch(62% 0.22 25);
  color: var(--color-text-inverse);
  border: 1px solid oklch(55% 0.22 25);
}

.btn--danger:hover {
  background: oklch(56% 0.22 25);
}

@media (prefers-color-scheme: dark) {
  .admin-drawer__section--danger {
    background: oklch(24% 0.04 30);
    border-color: oklch(45% 0.1 30);
  }
  .roster-row--suspended {
    background: oklch(22% 0.02 30);
  }
}

/* ── Info grid inside drawer ── */
.info-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  font-size: var(--text-sm);
}

.info-grid dt {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.info-grid dd {
  margin: 0;
}

/* ── Panel block (reusable section card) ── */
.panel-block {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);
}

.panel-block__title {
  margin: 0 0 var(--space-4);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.panel-block__hint {
  margin: calc(var(--space-2) * -1) 0 var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ── Invite form / list ── */
.invite-form,
.cohort-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form__field--inline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.form__field--checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.invite-output {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-accent-light, oklch(95% 0.05 155));
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
}

.invite-output__label {
  margin: 0 0 var(--space-2);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
}

.invite-output__copyrow {
  display: flex;
  gap: var(--space-2);
}

.invite-output__url {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs);
}

.invite-table,
.audit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.invite-table th,
.invite-table td,
.audit-table th,
.audit-table td {
  padding: var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.invite-table th,
.audit-table th {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  background: var(--color-surface-sunken);
}

.invite-short {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs);
  background: var(--color-surface-sunken);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
}

.invite-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ── Invite "How invitees see this" guide ── */
.invite-howto {
  list-style: none;
  counter-reset: invite-step;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.invite-howto > li {
  counter-increment: invite-step;
  position: relative;
  padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 1.75rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.invite-howto > li::before {
  content: counter(invite-step);
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent, oklch(60% 0.18 260));
  color: white;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.invite-howto > li > strong {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
}

.invite-howto > li > p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.invite-howto code {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs);
  background: var(--color-surface-sunken);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}

.audit-row--danger {
  background: oklch(98% 0.03 30);
}

@media (prefers-color-scheme: dark) {
  .audit-row--danger { background: oklch(24% 0.04 30); }
}

/* ── Cohort cards ── */
.cohort-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cohort-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}

.cohort-card__name {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}

.cohort-card__meta {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
}

.pill--active {
  background: var(--color-accent-light, oklch(95% 0.05 155));
  color: var(--color-accent, oklch(45% 0.15 155));
}

/* ── Auth invite banner ── */
.auth-invite-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-accent-light, oklch(95% 0.05 155));
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  margin: var(--space-4) 0;
}

.auth-invite-banner--bootstrap {
  background: oklch(96% 0.05 90);
  border-color: oklch(70% 0.18 90);
}

.auth-invite-banner__icon {
  font-size: 1.5rem;
}

.auth-invite-banner__title {
  margin: 0;
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
}

.auth-invite-banner__sub {
  margin: 2px 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.auth-card__hint {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
}

@media (prefers-color-scheme: dark) {
  .auth-invite-banner { background: oklch(24% 0.05 155); }
  .auth-invite-banner--bootstrap { background: oklch(25% 0.06 90); }
}