/* ═══════════════════════════════════════════════════════════════
   Papertrail Demo — Styles
   Includes: CSS variables, core app component styles (copied from
   client/assets/style.css), and demo-specific overlay/tour styles.
   ═══════════════════════════════════════════════════════════════ */

/* Google Fonts loaded via HTML link tag */

/* ── CSS Variables ───────────────────────────────────────────── */
:root {
  --color-primary: #c86a4a;
  --color-primary-hover: #b35a3a;
  --color-primary-light: #f5e6e0;
  --color-secondary: #8b7355;
  --color-secondary-hover: #735f45;
  --color-success: #6b9b6e;
  --color-warning: #d4934a;
  --color-error: #c85a4a;
  --color-bg: #faf8f6;
  --color-surface: #ffffff;
  --color-border: #e8dfd8;
  --color-text: #3b2f2a;
  --color-text-muted: #8b7355;
  --color-text-light: #a89884;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --font-family: 'Roboto', sans-serif;
  --font-family-heading: 'Roboto Serif', serif;
  --font-family-mono: 'Roboto Mono', monospace;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100vh;
  overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-family-heading);
  font-weight: 600;
  line-height: 1.25;
}
h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Layout ──────────────────────────────────────────────────── */
#demo-app { min-height: 100vh; }

.demo-view { display: none; min-height: 100vh; }
.demo-view.active { display: block; }

.container { width: 100%; max-width: 48rem; margin: 0 auto; padding: 0 var(--spacing-md); }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-lg);
  font-family: inherit; font-size: var(--font-size-base); font-weight: 500;
  line-height: 1.5; border: 1px solid transparent;
  border-radius: var(--radius-md); cursor: pointer;
  transition: all var(--transition-fast);
}
.btn-primary { color: white; background-color: var(--color-primary); border-color: var(--color-primary); }
.btn-primary:hover { background-color: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn-secondary { color: var(--color-secondary); background-color: var(--color-surface); border-color: var(--color-border); }
.btn-secondary:hover { color: var(--color-secondary-hover); background-color: var(--color-bg); }
.btn-small { padding: 4px 10px; font-size: 0.8125rem; white-space: nowrap; min-height: 28px; }
.btn-icon {
  padding: var(--spacing-xs); min-width: 32px; min-height: 32px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); color: var(--color-text-muted);
  cursor: pointer; transition: all var(--transition-fast);
}
.btn-icon:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-delete:hover { background: #fef2f2; border-color: var(--color-error); color: var(--color-error); }

/* ── Forms ───────────────────────────────────────────────────── */
.form-group { margin-bottom: var(--spacing-lg); }
label { display: block; margin-bottom: var(--spacing-xs); font-weight: 500; color: var(--color-text); }
.checkbox-label { display: flex; align-items: center; gap: var(--spacing-sm); cursor: pointer; margin-bottom: var(--spacing-md); }
.checkbox-label span { font-weight: 500; }
input[type="text"], input[type="date"], input[type="datetime-local"], input[type="email"],
textarea, select {
  display: block; width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: inherit; font-size: var(--font-size-base); line-height: 1.5;
  color: var(--color-text); background-color: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  transition: border-color var(--transition-fast);
}
textarea { resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: var(--spacing-md); }
.form-actions { display: flex; gap: 1rem; align-items: center; }

/* ── Cards ───────────────────────────────────────────────────── */
.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-sm);
}
.card h2 { margin-bottom: var(--spacing-lg); font-size: var(--font-size-xl); }

/* ── App Header ──────────────────────────────────────────────── */
.app-header { padding: var(--spacing-md) var(--spacing-lg); background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.header-content { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.header-top-row { display: flex; align-items: center; gap: var(--spacing-md); }
.header-bottom-row { display: flex; align-items: center; gap: var(--spacing-sm); }
.user-name { font-weight: 500; font-size: var(--font-size-base); }
.user-school { font-size: var(--font-size-base); color: var(--color-text-muted); }

/* Editor header variant */
.editor-header { display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; padding: 0.625rem var(--spacing-lg); }
.editor-header .header-left { display: flex; align-items: center; gap: var(--spacing-md); }
.editor-header .header-right { display: flex; align-items: center; gap: var(--spacing-sm); }
.editor-header-title { font-size: var(--font-size-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.editor-header-stats { display: flex; align-items: center; gap: var(--spacing-xs); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.editor-header-stat-sep { color: var(--color-border); }
.editor-header-stat-label { color: var(--color-text-muted); }
.editor-status { font-size: var(--font-size-sm); color: var(--color-success); font-weight: 500; }
.status-container { display: flex; align-items: center; }

/* ── Dashboard ───────────────────────────────────────────────── */
.dashboard-main { padding: var(--spacing-2xl) 0; }
.create-section { margin-bottom: var(--spacing-2xl); }
.assignments-section h2 { margin-bottom: var(--spacing-lg); }
.assignments-list { display: flex; flex-direction: column; gap: var(--spacing-md); }

/* ── Assignment Cards ────────────────────────────────────────── */
.assignment-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.assignment-open { border-left: 3px solid var(--color-success); }
.assignment-closed { border-left: 3px solid #94a3b8; opacity: 0.85; }
.assignment-card-header { display: flex; align-items: flex-start; padding: var(--spacing-lg); gap: var(--spacing-md); }
.assignment-card-content p { margin: 0 0 1rem; color: var(--color-text-muted); }
.assignment-title-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.assignment-title-row h3 { margin: 0; font-size: var(--font-size-lg); }
.assignment-meta { display: flex; justify-content: space-between; align-items: center; font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: 0.75rem; }
.assignment-status-badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; }
.status-open, .assignment-status-badge.status-open { background: #d1fae5; color: #065f46; }
.status-closed, .assignment-status-badge.status-closed { background: #f1f5f9; color: #475569; }
.view-link { color: var(--color-primary); font-weight: 500; }
.access-code-container { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border); }
.access-code-label { display: block; font-size: 0.75rem; color: var(--color-text-muted); margin-bottom: 0.5rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
.access-code-wrapper { display: flex; align-items: center; gap: 0.5rem; }
.access-code { font-family: var(--font-family-mono); background: #f3f4f6; border: 1px solid #d1d5db; border-radius: 6px; padding: 0.5rem 0.75rem; font-size: var(--font-size-sm); color: #1f2937; font-weight: 600; letter-spacing: 0.5px; }
.btn-copy { padding: 0.4rem; min-width: auto; transition: all 0.2s; }
.assignment-actions { display: flex; flex-direction: column; align-items: flex-end; gap: var(--spacing-xs); flex-shrink: 0; }

/* ── Submissions View ────────────────────────────────────────── */
.submissions-header { margin-bottom: var(--spacing-lg); }
.submissions-header-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem; }
.submissions-stats { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.stat-block { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 0.75rem 1.25rem; min-width: 110px; }
.stat-block-deadline { border-left: 3px solid var(--color-warning); }
.stat-block-enrolled { border-left: 3px solid var(--color-secondary); }
.stat-block-submitted { border-left: 3px solid var(--color-success); }
.stat-label { font-size: 0.75rem; color: var(--color-text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 0.25rem; }
.stat-value { font-size: var(--font-size-xl); font-weight: 700; color: var(--color-text); }
.submissions-list { display: flex; flex-direction: column; gap: 0.75rem; }
.submission-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-md) var(--spacing-lg); box-shadow: var(--shadow-sm); }
.submission-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 0.5rem; flex-wrap: wrap; gap: 0.5rem; }
.student-info h3 { font-size: var(--font-size-base); margin: 0; }
.student-id { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.submission-badges { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.status-badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.status-submitted { background: #d1fae5; color: #065f46; }
.status-draft { background: #fef3c7; color: #92400e; }
.notable-events-badge { display: inline-flex; align-items: center; padding: 2px 8px; background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; border-radius: 9999px; font-size: 0.7rem; font-weight: 600; white-space: nowrap; }
.submission-meta { display: flex; gap: var(--spacing-lg); font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: 0.75rem; flex-wrap: wrap; }
.submission-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.toggle-label { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.toggle-checkbox { cursor: pointer; }
.toggle-text { white-space: nowrap; }
.text-muted { color: var(--color-text-muted); }

/* ── Editor View ─────────────────────────────────────────────── */
.editor-main { min-height: calc(100vh - 60px); background: var(--color-bg); overflow-y: auto; padding: var(--spacing-md); }
.editor-container { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--spacing-md); }
.formatting-toolbar { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 0.5rem var(--spacing-md); position: sticky; top: 0; z-index: 10; box-shadow: var(--shadow-sm); }
.formatting-buttons { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.format-btn { display: inline-flex; align-items: center; justify-content: center; gap: 3px; padding: 0.35rem 0.5rem; background: transparent; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; font-family: inherit; font-size: var(--font-size-sm); color: var(--color-text); transition: all var(--transition-fast); min-width: 32px; min-height: 30px; }
.format-btn:hover { background: var(--color-bg); border-color: var(--color-border); }
.toolbar-divider { width: 1px; height: 20px; background: var(--color-border); margin: 0 4px; }
.editor-pages { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-lg); padding-bottom: var(--spacing-2xl); }
.editor-page { width: 100%; max-width: 760px; background: white; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 3rem 4rem; box-shadow: var(--shadow-md); min-height: 500px; }
.editor-page-content h1 { font-size: 1.5rem; margin-bottom: 1.5rem; color: var(--color-text); }
.editor-page-content p { margin-bottom: 1rem; line-height: 1.8; color: var(--color-text); }
.dropdown-chevron { margin-left: 2px; flex-shrink: 0; }

/* ── Analysis View ───────────────────────────────────────────── */
.analysis-main { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.analysis-tab-bar { display: flex; align-items: center; gap: var(--spacing-md); padding: 0.625rem var(--spacing-lg); background: var(--color-surface); border-bottom: 1px solid var(--color-border); flex-shrink: 0; }
.analysis-back-btn { padding: 0.4rem 0.8rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; font-size: var(--font-size-sm); color: var(--color-text-muted); transition: all var(--transition-fast); }
.analysis-back-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.analysis-tab-nav { display: flex; gap: 4px; }
.analysis-tab-btn { padding: 0.4rem 0.875rem; background: transparent; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-muted); transition: all var(--transition-fast); }
.analysis-tab-btn:hover { color: var(--color-text); background: var(--color-bg); }
.analysis-tab-btn.active { color: var(--color-primary); background: var(--color-primary-light); border-color: transparent; }
.analysis-layout { display: flex; flex: 1; overflow: hidden; }
.analysis-sidebar { width: 220px; flex-shrink: 0; border-right: 1px solid var(--color-border); background: var(--color-surface); overflow-y: auto; padding: var(--spacing-md); }
.analysis-sidebar-meta { margin-bottom: var(--spacing-md); padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--color-border); }
.analysis-bar-title { display: block; font-weight: 600; font-size: var(--font-size-sm); color: var(--color-text); margin-bottom: 0.25rem; }
.analysis-bar-student { display: block; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.process-summary { font-size: var(--font-size-sm); }
.sidebar-section-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-muted); margin-bottom: var(--spacing-sm); }
.process-stats { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--spacing-md); }
.stat-row { display: flex; justify-content: space-between; }
.stat-key { color: var(--color-text-muted); }
.stat-val { font-weight: 600; color: var(--color-text); }
.process-events { margin-top: var(--spacing-sm); }
.events-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-muted); margin-bottom: 0.5rem; }
.event-item { display: flex; align-items: flex-start; gap: 0.4rem; margin-bottom: 0.4rem; font-size: 0.8rem; color: var(--color-text-muted); }
.event-dot { flex-shrink: 0; width: 7px; height: 7px; background: #f59e0b; border-radius: 50%; margin-top: 5px; }
.analysis-content { flex: 1; overflow-y: auto; padding: var(--spacing-md); background: var(--color-bg); }
.demo-tab-panel { height: 100%; }

/* Time Travel */
.time-travel-controls { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: var(--spacing-md); overflow: hidden; }
.ttc-header { display: flex; align-items: center; gap: var(--spacing-md); padding: 0.625rem var(--spacing-md); border-bottom: 1px solid var(--color-border); flex-wrap: wrap; }
.ttc-nav { display: flex; align-items: center; gap: var(--spacing-sm); }
.ttc-indicator { font-size: var(--font-size-sm); color: var(--color-text-muted); white-space: nowrap; }
.ttc-playback { display: flex; align-items: center; gap: 4px; }
.ttc-playback-btn { padding: 0.25rem 0.5rem; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--font-size-sm); color: var(--color-text-muted); transition: all var(--transition-fast); display: inline-flex; align-items: center; }
.ttc-playback-btn:hover { background: var(--color-bg); border-color: var(--color-border); }
.ttc-playback-btn.active { background: var(--color-primary-light); color: var(--color-primary); border-color: transparent; }
.ttc-legend { display: flex; align-items: center; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.ttc-legend-item { display: flex; align-items: center; gap: 4px; }
.demo-sparkline-wrap { padding: 0.75rem var(--spacing-md); background: var(--color-bg); }
.demo-sparkline { width: 100%; height: 60px; display: block; }

/* Document viewer layout */
.document-viewer-layout { display: flex; gap: var(--spacing-md); min-height: 320px; }
.change-index { width: 220px; flex-shrink: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.change-index-header { display: flex; align-items: center; justify-content: space-between; padding: 0.625rem var(--spacing-md); border-bottom: 1px solid var(--color-border); }
.change-index-header h3 { font-size: var(--font-size-sm); font-weight: 600; }
.change-count { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.change-index-list { overflow-y: auto; max-height: 280px; }
.change-item { padding: 0.625rem var(--spacing-md); border-bottom: 1px solid var(--color-border); cursor: pointer; transition: background var(--transition-fast); }
.change-item:hover { background: var(--color-bg); }
.change-item-active { background: var(--color-primary-light); }
.change-item-meta { font-size: 0.75rem; color: var(--color-text-muted); margin-bottom: 0.25rem; }
.change-item-preview { font-size: 0.8rem; color: var(--color-text); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.document-viewer { flex: 1; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow-y: auto; }
.document-viewer-content { padding: var(--spacing-lg); line-height: 1.8; font-size: var(--font-size-base); }
.document-viewer-content p { margin-bottom: 1rem; }

/* Velocity */
.velocity-container { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-lg); }
.chart-container { position: relative; }
.chart-caption { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: var(--spacing-md); }

/* Authorship */
.authorship-header { margin-bottom: var(--spacing-md); }
.authorship-legend { display: flex; gap: var(--spacing-md); flex-wrap: wrap; }
.authorship-legend-item { padding: 4px 12px; border-radius: 20px; font-size: var(--font-size-sm); font-weight: 600; }
.authorship-viewer { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-lg); line-height: 1.9; font-size: var(--font-size-base); }
.authorship-viewer p { margin-bottom: 1rem; }

/* ══════════════════════════════════════════════════════════════
   SCHOOL ADMIN VIEW
   ══════════════════════════════════════════════════════════════ */

.admin-content { max-width: 900px; margin: 0 auto; padding: var(--spacing-xl) var(--spacing-lg); display: flex; flex-direction: column; gap: var(--spacing-xl); }

/* License usage card */
.license-usage-section { }
.license-usage { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-lg); }
.license-usage-info h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: var(--spacing-sm); }
.license-type-display { display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
.license-badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; }
.license-badge.license-pro { background: #dbeafe; color: #1e40af; }
.license-badge.license-basic { background: #fef3c7; color: #92400e; }
.license-type-desc { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.license-count { font-size: var(--font-size-base); color: var(--color-text); }
.license-count strong { font-size: 1.25rem; font-weight: 700; color: var(--color-primary); }
.license-usage-bar { height: 8px; background: var(--color-border); border-radius: 4px; overflow: hidden; margin: var(--spacing-sm) 0; }
.license-usage-progress { height: 100%; background: var(--color-primary); border-radius: 4px; transition: width 0.4s ease; }

/* Admin section cards */
.admin-section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-lg); }
.admin-section h2 { font-size: 1.125rem; font-weight: 600; margin-bottom: var(--spacing-md); }
.admin-form .form-row { display: flex; gap: var(--spacing-md); flex-wrap: wrap; }
.admin-form .form-row .form-group { flex: 1; min-width: 180px; }
.bulk-import-form { display: flex; align-items: center; gap: var(--spacing-md); flex-wrap: wrap; }
.section-header { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); margin-bottom: var(--spacing-md); }
.section-header h2 { margin-bottom: 0; }
.search-box input[type="search"] { padding: 0.4rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--font-size-sm); outline: none; background: var(--color-bg); color: var(--color-text); }
.search-box input[type="search"]:focus { border-color: var(--color-primary); }

/* User table */
.admin-table-scroll { overflow-x: auto; }
.admin-table { width: 100%; min-width: 700px; border-collapse: collapse; font-size: var(--font-size-sm); }
.admin-table thead { background: var(--color-bg); }
.admin-table th { padding: 0.6rem 0.75rem; text-align: left; font-weight: 600; color: var(--color-text-muted); border-bottom: 2px solid var(--color-border); white-space: nowrap; }
.admin-table td { padding: 0.75rem; vertical-align: middle; border-bottom: 1px solid var(--color-border); }
.admin-table tbody tr:hover { background: var(--color-bg); }
.admin-table td.actions { text-align: right; white-space: nowrap; }
.role-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; }
.role-badge.role-school_admin { background: #dbeafe; color: #1e40af; }
.role-badge.role-teacher { background: #dcfce7; color: #166534; }
.role-badge.role-student { background: #fef3c7; color: #92400e; }
.license-key-wrapper { display: flex; align-items: center; gap: 4px; }
.license-key { font-family: 'Roboto Mono', monospace; font-size: 0.75rem; color: var(--color-text-muted); }

/* ══════════════════════════════════════════════════════════════
   TOUR OVERLAY ENGINE
   ══════════════════════════════════════════════════════════════ */

/* Dark overlay — transparent background, pointer-events only */
.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  background: transparent;
}
.tour-overlay.active {
  /* pointer-events stays none — overlay has no background, clicks pass through to page elements */
}

/* Spotlight — the bright "cutout" box */
.tour-spotlight {
  position: fixed;
  z-index: 1001;
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(20, 15, 12, 0.6);
  pointer-events: none;
  transition: opacity 300ms ease;
  opacity: 0;
}
.tour-spotlight.visible {
  opacity: 1;
}

/* Tooltip card */
.tour-tooltip {
  position: fixed;
  z-index: 1002;
  width: 320px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25), 0 4px 16px rgba(0,0,0,0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease, top 350ms cubic-bezier(0.4, 0, 0.2, 1), left 350ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tour-tooltip.visible {
  opacity: 1;
  pointer-events: auto;
}
.tour-tooltip-progress {
  display: flex;
  gap: 5px;
  padding: var(--spacing-md) var(--spacing-md) 0;
}
.tour-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-border);
  transition: background 200ms;
  flex-shrink: 0;
}
.tour-dot.active { background: var(--color-primary); }
.tour-dot.done { background: var(--color-primary); opacity: 0.4; }
.tour-tooltip-body { padding: var(--spacing-md) var(--spacing-md) 0; }
.tour-tooltip-title { font-size: var(--font-size-base); font-family: var(--font-family-heading); color: var(--color-text); margin-bottom: 0.4rem; }
.tour-tooltip-text { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.6; }
.tour-tooltip-footer { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-md); gap: var(--spacing-sm); }
.tour-tooltip-footer .btn-primary { padding: 0.5rem 1.25rem; font-size: var(--font-size-sm); }
.tour-click-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.5rem 1rem;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border: 1px dashed var(--color-primary);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 600;
  animation: hint-pulse 1.8s ease-in-out infinite;
}
.tour-click-hint::before {
  content: '👆';
  font-size: 14px;
}
@keyframes hint-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Pulsing ring on the interactive click target element */
.demo-click-target {
  animation: target-ring 1.8s ease-in-out infinite;
  position: relative;
}
@keyframes target-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 106, 74, 0.5); }
  50%       { box-shadow: 0 0 0 6px rgba(200, 106, 74, 0); }
}

/* Arrow caret — points toward the target (opposite side from tooltip position) */
.tour-tooltip-arrow {
  position: absolute;
  width: 12px; height: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transform: rotate(45deg);
  z-index: -1;
}
/* tooltip is BELOW target → arrow points UP (top edge of tooltip) */
.tour-tooltip.arrow-bottom .tour-tooltip-arrow { top: -7px; left: 50%; margin-left: -6px; border-bottom: none; border-right: none; }
/* tooltip is ABOVE target → arrow points DOWN (bottom edge of tooltip) */
.tour-tooltip.arrow-top .tour-tooltip-arrow { bottom: -7px; left: 50%; margin-left: -6px; border-top: none; border-left: none; }
/* tooltip is to the RIGHT of target → arrow points LEFT (left edge of tooltip) */
.tour-tooltip.arrow-right .tour-tooltip-arrow { left: -7px; top: 50%; margin-top: -6px; border-right: none; border-top: none; }
/* tooltip is to the LEFT of target → arrow points RIGHT (right edge of tooltip) */
.tour-tooltip.arrow-left .tour-tooltip-arrow { right: -7px; top: 50%; margin-top: -6px; border-left: none; border-bottom: none; }

/* ── Welcome & Final modal ───────────────────────────────────── */
.tour-welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(20, 15, 12, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
}
.tour-final-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(20, 15, 12, 0.65);
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
}
.tour-welcome-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 80px rgba(0,0,0,0.2);
  animation: card-in 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes card-in {
  from { transform: scale(0.9) translateY(20px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
.tour-welcome-icon { display: flex; align-items: center; justify-content: center; margin: 0 auto var(--spacing-lg); }
.tour-welcome-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-sm); }
.tour-welcome-subtitle { font-size: var(--font-size-base); color: var(--color-text); font-weight: 500; margin-bottom: var(--spacing-sm); }
.tour-welcome-desc { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: var(--spacing-xl); line-height: 1.6; }
.tour-welcome-btn { width: 100%; padding: 0.75rem; font-size: var(--font-size-base); }
.tour-skip-link { display: block; margin-top: var(--spacing-md); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.tour-skip-link:hover { color: var(--color-text); }

/* ── Responsive adjustments ──────────────────────────────────── */
@media (max-width: 768px) {
  .form-row { grid-template-columns: 1fr; }
  .editor-page { padding: 1.5rem; }
  .analysis-sidebar { width: 160px; }
  .tour-tooltip { width: 280px; }
  .document-viewer-layout { flex-direction: column; }
  .change-index { width: 100%; }
  .editor-header .editor-header-stats { display: none; }
}

@media (max-width: 480px) {
  .analysis-layout { flex-direction: column; }
  .analysis-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--color-border); max-height: 200px; }
  .tour-tooltip { width: calc(100vw - 32px); left: 16px !important; }
}