/*
 * Copyright (c) 2026 Dr. Red Oy. All rights reserved.
 * Onboarding tour spotlight + popover. Brand color #b03a2e.
 * No Tailwind utilities here — fully self-contained so we don't depend on
 * Tailwind classes being present in the build at tour-render time.
 */

#tour-root { position: relative; z-index: 9990; }

/* Full-viewport overlay with a transparent rectangular cutout */
.tour-overlay {
  position: fixed; inset: 0;
  z-index: 9990;
  pointer-events: none;
}
.tour-overlay__dim {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: auto;
}
/* Ring-only variant: no dim panels, so nothing swallows clicks and the page
   underneath stays fully usable (form-filling steps, free-exploration steps). */
.tour-overlay--nodim .tour-overlay__dim { display: none; }
.tour-overlay__cutout {
  position: absolute;
  border: 2px solid #b03a2e;
  outline: 4px solid #fff;
  outline-offset: 0;
  border-radius: 6px;
  background: transparent;
  pointer-events: none;
  transition: top 120ms ease, left 120ms ease, width 120ms ease, height 120ms ease;
}

/* Popover card */
.tour-popover {
  position: fixed;
  z-index: 9995;
  background: #fff;
  border: 1px solid #b03a2e;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  padding: 16px 18px 14px;
  width: 320px;
  max-width: calc(100vw - 24px);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #1f2937;
  line-height: 1.45;
  animation: tour-fade-in 160ms ease;
}
@keyframes tour-fade-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

.tour-popover__counter {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #b03a2e;
  margin-bottom: 4px;
  padding-right: 24px;
}
/* Close-X — sized + colored for WCAG 2.1 AA (UI contrast ≥ 3:1, target ≥ 24px). */
.tour-popover__close {
  position: absolute; top: 6px; right: 6px;
  width: 32px; height: 32px; padding: 5px;
  background: transparent; border: 1.5px solid transparent; border-radius: 6px;
  cursor: pointer; color: #b03a2e;
  display: inline-flex; align-items: center; justify-content: center;
}
.tour-popover__close svg { width: 100%; height: 100%; display: block; }
.tour-popover__close:hover {
  background: #b03a2e; color: #fff; border-color: #b03a2e;
}
.tour-popover__close:focus-visible {
  outline: 3px solid #b03a2e; outline-offset: 2px;
}
.tour-popover__title {
  font-size: 16px; font-weight: 700; color: #111827; margin: 0 0 6px;
  line-height: 1.3;
}
.tour-popover__body { font-size: 14px; color: #374151; }
.tour-popover__body p { margin: 0 0 8px; }
.tour-popover__body strong { color: #111827; }

.tour-popover__buttons {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 12px;
}
.tour-popover__btn {
  appearance: none; border: 1px solid #d1d5db; background: #fff;
  font-size: 14px; padding: 8px 14px; border-radius: 6px;
  cursor: pointer; color: #374151;
  display: inline-flex; align-items: center; gap: 6px;
  line-height: 1.2;
}
.tour-popover__btn:hover { background: #f9fafb; }
.tour-popover__btn--primary {
  background: #b03a2e; color: #fff; border-color: #b03a2e;
  font-weight: 600; padding: 9px 18px; font-size: 15px;
}
.tour-popover__btn--primary:hover { background: #8a2e23; border-color: #8a2e23; }
.tour-popover__btn--ghost {
  background: transparent; border-color: transparent; color: #6b7280;
}
.tour-popover__btn--ghost:hover { color: #374151; }
.tour-popover__btn__arrow {
  width: 16px; height: 16px; flex-shrink: 0; display: inline-block;
  stroke: currentColor;
}
.tour-popover__btn--primary .tour-popover__btn__arrow {
  width: 18px; height: 18px;
}

.tour-popover__rescue {
  margin-top: 10px; font-size: 12px; color: #6b7280;
}
.tour-popover__rescue a { color: #b03a2e; cursor: pointer; }

/* Pointer arrow — positioned by JS via inline style */
.tour-popover__arrow {
  position: absolute; width: 0; height: 0;
  border: 8px solid transparent;
}

/* Resume Tour pill (shown when the tour is active but no step popover is visible on this page) */
.tour-resume-pill {
  position: fixed; right: 16px; bottom: 16px; z-index: 9991;
  background: #b03a2e; color: #fff;
  padding: 10px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 700;
  box-shadow: 0 6px 18px rgba(176, 58, 46, 0.35);
  cursor: pointer; border: none;
}
.tour-resume-pill:hover { background: #8a2e23; }

/* Welcome card on Dashboard for first-time teachers */
.tour-welcome-card {
  background: #fff5f4; border: 1px solid #b03a2e;
  border-radius: 10px; padding: 18px 20px; margin: 0 0 20px;
}
.tour-welcome-card__h {
  font-size: 18px; font-weight: 800; color: #b03a2e; margin: 0 0 6px;
}
.tour-welcome-card__p { font-size: 14px; color: #1f2937; margin: 0 0 12px; }
.tour-welcome-card__buttons { display: flex; gap: 8px; flex-wrap: wrap; }

/* Phase picker modal */
.tour-picker-backdrop {
  position: fixed; inset: 0; z-index: 9996;
  background: rgba(0, 0, 0, 0.45); display: flex;
  align-items: center; justify-content: center;
}
.tour-picker-modal {
  background: #fff; border-radius: 12px; padding: 24px;
  width: 480px; max-width: calc(100vw - 32px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.25);
}
.tour-picker-modal__h { font-size: 18px; font-weight: 800; margin: 0 0 6px; color: #111827; }
.tour-picker-modal__sub { font-size: 14px; color: #6b7280; margin: 0 0 16px; }
.tour-picker-option {
  width: 100%; text-align: left; padding: 12px 14px; margin: 0 0 8px;
  border: 1px solid #d1d5db; border-radius: 8px;
  background: #fff; cursor: pointer; font-size: 14px;
}
.tour-picker-option:hover { border-color: #b03a2e; background: #fff5f4; }
.tour-picker-option__h { font-weight: 700; color: #111827; }
.tour-picker-option__sub { color: #6b7280; font-size: 13px; margin-top: 2px; }
.tour-picker-modal__close {
  margin-top: 8px; background: transparent; border: none; color: #6b7280;
  cursor: pointer; font-size: 13px;
}

/* Intro slide (Phase 1) — full-screen centered card variant of the popover */
.tour-intro-shell {
  position: fixed; inset: 0; z-index: 9994;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.tour-intro-card {
  position: relative;
  background: #fff; border-radius: 12px;
  width: 720px; max-width: 100%; max-height: 90vh; overflow-y: auto;
  padding: 36px 40px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.tour-intro-card__close {
  position: absolute; top: 12px; right: 14px;
  width: 40px; height: 40px; padding: 7px;
  background: transparent; border: 1.5px solid transparent; border-radius: 8px;
  cursor: pointer; color: #b03a2e;
  display: inline-flex; align-items: center; justify-content: center;
}
.tour-intro-card__close svg { width: 100%; height: 100%; display: block; }
.tour-intro-card__close:hover {
  background: #b03a2e; color: #fff; border-color: #b03a2e;
}
.tour-intro-card__close:focus-visible {
  outline: 3px solid #b03a2e; outline-offset: 2px;
}
.tour-intro-card__counter {
  font-size: 12px; font-weight: 800; color: #b03a2e;
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px;
}
.tour-intro-card__h {
  font-size: 26px; font-weight: 800; color: #111827; margin: 0 0 14px;
  line-height: 1.2;
}
.tour-intro-card__body {
  font-size: 16px; color: #374151; line-height: 1.55;
}
.tour-intro-card__body p { margin: 0 0 12px; }
/* Tailwind's preflight strips list markers globally, which turns the numbered
   walk-throughs on the intro and closing slides into unlabelled lines. */
.tour-intro-card__body ol { list-style: decimal; }
.tour-intro-card__body ul { list-style: disc; }
.tour-intro-card__body li { margin-bottom: 6px; }
.tour-intro-card__buttons {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 24px;
}