/* =========================
   ADMIN DASHBOARD (formal, mobile-first)

   Same brand as dashboard.css (gradient, color values, radii
   family) but dialed toward an institutional/school-board feel:
   underline tabs instead of filled pills, quieter card surfaces,
   calmer fade-and-rise motion instead of bounce/overshoot. Emoji
   icons are kept (per brief) but their surrounding chrome is
   toned down so they read as labels, not game badges.

   Scoped under .admin-wrap (see prior handoff notes) so its
   .load-in / .reveal class names can't collide with
   dashboard.css's identically-named, differently-behaved rules
   when both stylesheets are loaded in the same SPA.

   Mobile-first: base rules target phones, min-width queries layer
   on tablet/desktop. 768px matches scrollEffects.js's parallax
   cutoff — keep in sync if either changes.
========================= */

.admin-wrap {
  max-width: 1150px;
  margin: 0 auto;
  padding: 16px 14px 100px;
  font-feature-settings: "tnum" 1; /* tabular figures for stat numbers */
}

/* =========================
   HERO / HEADER
========================= */

.admin-wrap .admin-header {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  color: white;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.16);
}

/* Toned down considerably from the original — smaller, lower
   opacity, less blur "glow". Present for brand continuity with
   the student dashboard's hero shapes, not as a focal decoration. */
.admin-wrap .admin-header-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(1px);
  will-change: transform;
}

.admin-wrap .admin-header-shape-1 {
  width: 90px;
  height: 90px;
  background: rgba(255, 255, 255, 0.045);
  top: -30px;
  right: -20px;
}

.admin-wrap .admin-header-shape-2 {
  width: 44px;
  height: 44px;
  background: rgba(192, 132, 252, 0.1);
  bottom: -14px;
  left: 30%;
}

/* Brand mark. Sized to match the row's compact height; the
   translucent rounded backing keeps a light/transparent PNG
   readable against the gradient regardless of the icon's own
   colors. */
.admin-wrap .admin-logo {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  object-fit: contain;
  padding: 5px;
}

/* min-width: 0 is what actually lets the text below truncate
   instead of forcing the row to grow/wrap and re-tall-en the
   header — a flex child's default min-width is auto (its content
   size), which silently defeats text-overflow: ellipsis. */
.admin-wrap .admin-header-text {
  position: relative;
  min-width: 0;
  flex: 1 1 auto;
}

/* Small institutional label above the title — "Administration
   Console" rather than jumping straight to a big playful h1,
   the way a letterhead or a board portal names the section
   before the document title. */
.admin-wrap .admin-eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
  margin: 0 0 2px;
}

/* Title and description are single-line + truncated so the
   header stays a fixed, slim height at any content length or
   screen width, instead of wrapping and growing tall. */
.admin-wrap .admin-header h1 {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-wrap .admin-header p {
  display: block;
  opacity: 0.8;
  line-height: 1.4;
  font-size: 11.5px;
  margin: 2px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-wrap .admin-logout-btn {
  position: relative;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 9px 16px;
  border-radius: 9px;
  background: transparent;
  color: white;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  min-height: 38px;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.admin-wrap .admin-logout-btn:active {
  background: rgba(255, 255, 255, 0.14);
}

@media (hover: hover) and (pointer: fine) {
  .admin-wrap .admin-logout-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.45);
  }
}

/* =========================
   TABS — underline style
   Filled/pill tabs read as playful app chrome; an underline
   indicator with quiet text reads as a formal section switcher
   (the pattern used by most institutional admin consoles).
   Horizontal scroll + sticky behavior on phone is kept from the
   prior version — a real UX need, not a style choice — just the
   visual skin changed.
========================= */

.admin-wrap .admin-tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 -14px 18px;
  padding: 0 14px;
  background: #faf9fc;
  border-bottom: 1px solid #e5e2ec;
}

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

.admin-wrap .tab-btn {
  flex: 0 0 auto;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #6b7280;
  padding: 13px 14px 11px;
  min-height: 44px;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .admin-wrap .tab-btn:hover {
    color: #4c1d95;
  }
}

.admin-wrap .tab-btn.active {
  color: #5b21b6;
  border-bottom-color: #7c3aed;
}

/* =========================
   CARDS
   Flatter surface than before: thin visible border does most of
   the work, shadow is present but restrained — a report/panel
   feel rather than a floating "app card".
========================= */

.admin-wrap .admin-card {
  background: white;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 3px 10px rgba(17, 24, 39, 0.04);
  border: 1px solid #e5e7eb;
  margin-bottom: 16px;
}

.admin-wrap .admin-card h2 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-bottom: 4px;
  color: #111827;
}

.admin-wrap .admin-card > p {
  color: #6b7280;
  line-height: 1.6;
  font-size: 13.5px;
  margin-bottom: 16px;
}

/* =========================
   OVERVIEW STATS
   Icon badge is smaller and neutral-toned (light gray, not a
   bright purple pill) so the emoji reads as a label glyph rather
   than a gamified achievement icon. Numeric label above the
   description, in the institutional caps-small-tracking style
   used across the header.
========================= */

.admin-wrap .overview-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}

.admin-wrap .overview-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 13px;
}

.admin-wrap .overview-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 8px;
  background: #f1f0f4;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}

.admin-wrap .overview-info h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 2px;
  word-break: break-word;
}

.admin-wrap .overview-info-topquiz {
  font-size: 0.85rem !important;
}

.admin-wrap .overview-info p {
  color: #6b7280;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* =========================
   RECENT ACTIVITY
========================= */

.admin-wrap .activity-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-wrap .activity-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-left: 3px solid #ddd6fe;
  color: #4b5563;
  font-size: 13px;
  line-height: 1.55;
}

.admin-wrap .activity-icon {
  flex: 0 0 auto;
  font-size: 14px;
}

.admin-wrap .activity-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-wrap .activity-time {
  flex: 0 0 auto;
  color: #9ca3af;
  font-size: 11px;
  white-space: nowrap;
}

.admin-wrap .activity-item-loading {
  color: #9ca3af;
  font-style: italic;
  border-left-color: #e5e7eb;
}

/* =========================================================
   NOTIFICATIONS TAB

   Reuses subjects.js's form/list scaffolding classes
   (.subjects-subtitle, .subject-form-actions, .subject-add-btn,
   .page-header, .empty-state) which live in subjects.css, not
   here — this block only adds the pieces unique to the
   notifications tab: the compose textarea and the sent-message
   row layout.
========================================================= */

.admin-wrap .notification-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  resize: vertical;
  margin-bottom: 14px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.admin-wrap .notification-textarea:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.admin-wrap .notification-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 13px;
  border-radius: 12px;
  background: #fafafa;
  border: 1px solid #e5e7eb;
  margin-bottom: 8px;
}

.admin-wrap .notification-row-main {
  min-width: 0;
  flex: 1 1 auto;
}

.admin-wrap .notification-row-message {
  color: #111827;
  font-size: 13.5px;
  line-height: 1.55;
  margin-bottom: 6px;
  overflow-wrap: anywhere;
}

.admin-wrap .notification-row-meta {
  display: flex;
  gap: 6px;
  color: #9ca3af;
  font-size: 11px;
}

.admin-wrap .delete-notification {
  flex: 0 0 auto;
  border: 1px solid #fecaca;
  background: #fff;
  color: #dc2626;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .admin-wrap .delete-notification:hover {
    background: #fef2f2;
  }
}

/* =========================================================
   ENTRANCE ANIMATIONS — calm fade-and-rise
   Deliberately no scale/overshoot: a small opacity+translateY
   move reads as "the page settled in", not "the page bounced".
   Kept (not removed) per brief — just re-tuned for a formal feel.
   Own admin-fade-in keyframe, scoped under .admin-wrap, so it
   can't be overridden by dashboard.css's .load-in rule (or
   override it) regardless of stylesheet load order.
========================================================= */

@keyframes admin-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.admin-wrap .load-in {
  animation: admin-fade-in 0.38s ease-out both;
}

.admin-wrap .overview-grid .overview-card:nth-child(1) {
  animation-delay: 0s;
}
.admin-wrap .overview-grid .overview-card:nth-child(2) {
  animation-delay: 0.03s;
}
.admin-wrap .overview-grid .overview-card:nth-child(3) {
  animation-delay: 0.06s;
}
.admin-wrap .overview-grid .overview-card:nth-child(4) {
  animation-delay: 0.09s;
}
.admin-wrap .overview-grid .overview-card:nth-child(5) {
  animation-delay: 0.12s;
}
.admin-wrap .overview-grid .overview-card:nth-child(6) {
  animation-delay: 0.15s;
}

.admin-wrap .reveal {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease-out;
}

.admin-wrap .reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .admin-wrap .load-in {
    animation: none;
  }

  .admin-wrap .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================
   TABLET / DESKTOP
========================= */

@media (min-width: 600px) {
  .admin-wrap {
    padding: 24px 20px 60px;
  }

  .admin-wrap .admin-header {
    padding: 20px 26px;
  }

  .admin-wrap .admin-header h1 {
    font-size: 1.3rem;
  }

  .admin-wrap .admin-header p {
    font-size: 13px;
  }

  .admin-wrap .overview-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 768px matches scrollEffects.js's initParallax() cutoff and
   dashboard.css's own layout switch — keep in sync if either
   changes. */
@media (min-width: 768px) {
  .admin-wrap .admin-tabs {
    position: static;
    overflow-x: visible;
    margin: 0 0 24px;
    padding: 0;
    background: transparent;
    gap: 22px;
  }

  .admin-wrap .overview-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .admin-wrap .overview-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* =========================================================
   DANGER CONFIRMATION DIALOG (dangerDialog.js)

   Deliberately NOT scoped under .admin-wrap, unlike everything
   above. dangerDialog.js appends this overlay directly to
   document.body — outside .admin-wrap entirely — specifically so
   it survives a tab switch underneath it without being torn down.
   Scoping these rules under .admin-wrap would just make them not
   apply at all. Class names are unique enough (danger-dialog-*)
   that this doesn't reopen the bare-class-name collision problem
   documented elsewhere in this project.
========================================================= */

.danger-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 16px;
}

.danger-dialog {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.danger-dialog-title {
  margin: 0 0 14px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #111827;
}

.danger-dialog-warning {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
}

.danger-dialog-warning p {
  margin: 0;
  font-size: 13px;
  color: #7f1d1d;
  line-height: 1.5;
}

.danger-dialog-warning p + p {
  margin-top: 4px;
}

.danger-dialog-cannot-undo {
  font-weight: 700;
}

.danger-dialog-confirm-label {
  display: block;
  font-size: 13px;
  color: #444;
  margin-bottom: 8px;
}

.danger-dialog-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 18px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.danger-dialog-input:focus {
  outline: none;
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.danger-dialog-actions {
  display: flex;
  gap: 12px;
}

.danger-dialog-actions button {
  flex: 1;
}

/* .btn-danger lives here (defined below) but .btn-secondary is
   normally defined in quizzes.css. This dialog is shared by both
   subjects.js and quizzes.js and renders on document.body outside
   any one tab's markup, so it shouldn't depend on quizzes.css
   happening to be loaded for its Cancel button to be styled — same
   reasoning as why this whole block isn't scoped under .admin-wrap.
   Duplicated here (not imported) to match this project's existing
   convention of each stylesheet owning its own copy of shared
   button styles rather than depending on another file's. */
.btn-secondary {
  border: 1px solid #ddd;
  background: #fff;
  color: #444;
  padding: 12px 20px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.15s ease;
}

.btn-secondary:hover {
  background: #f3f3f3;
}

.btn-danger {
  border: none;
  background: #ef4444;
  color: white;
  padding: 12px 20px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition:
    background 0.15s ease,
    opacity 0.15s ease;
}

.btn-danger:hover:not(:disabled) {
  background: #dc2626;
}

.btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .danger-dialog-actions {
    flex-direction: column;
  }
}