/* ============================================================
   TeacherTool Design System — Indigo Theme
   ============================================================ */
:root {
  --tt-primary:       #4338CA;
  --tt-primary-dark:  #312E81;
  --tt-primary-light: #EEF2FF;
  --tt-accent:        #059669;
  --tt-accent-light:  #D1FAE5;
  --tt-bg:            #F1F5F9;
  --tt-surface:       #FFFFFF;
  --tt-border:        #E2E8F0;
  --tt-text:          #1E293B;
  --tt-muted:         #64748B;
  --tt-shadow-sm:     0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --tt-shadow:        0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -1px rgba(0,0,0,.04);
  --tt-shadow-lg:     0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -2px rgba(0,0,0,.04);
  --tt-radius:        0.5rem;
  --tt-font:          'Inter', system-ui, -apple-system, sans-serif;
  --tt-mono:          'JetBrains Mono', 'Courier New', monospace;
}

/* Base */
body {
  font-family: var(--tt-font);
  background-color: var(--tt-bg);
  color: var(--tt-text);
  -webkit-font-smoothing: antialiased;
}

/* ── Navbar ─────────────────────────────────────────────── */
.tt-navbar {
  background: linear-gradient(135deg, var(--tt-primary-dark) 0%, var(--tt-primary) 100%);
  box-shadow: var(--tt-shadow);
  padding: 0 1rem;
}

.tt-navbar .navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 700;
  font-size: 1.125rem;
  color: #fff !important;
  text-decoration: none;
}

.tt-navbar .navbar-brand .tt-logo {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.tt-navbar .navbar-toggler {
  border-color: rgba(255,255,255,.4);
}
.tt-navbar .navbar-toggler-icon {
  filter: invert(1);
}

.tt-navbar .nav-link {
  color: rgba(255,255,255,.85) !important;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem !important;
  border-radius: 0.375rem;
  transition: background .15s, color .15s;
}
.tt-navbar .nav-link:hover,
.tt-navbar .nav-link:focus {
  color: #fff !important;
  background: rgba(255,255,255,.12);
}
.tt-navbar .nav-link.active {
  color: #fff !important;
  background: rgba(255,255,255,.18);
}

.tt-nav-user-btn {
  color: rgba(255,255,255,.85) !important;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.375rem 0.875rem !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  border-radius: 0.375rem;
  background: transparent;
  transition: background .15s, color .15s;
}
.tt-nav-user-btn:hover {
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
}

/* ── Page header ────────────────────────────────────────── */
.tt-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--tt-border);
}

.tt-page-header h1 {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--tt-text);
  margin: 0;
}

.tt-page-header.tt-page-header--danger {
  border-bottom-color: #FEE2E2;
}
.tt-page-header.tt-page-header--danger h1 {
  color: #991B1B;
}

/* ── Cards ──────────────────────────────────────────────── */
.tt-card {
  background: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius);
  box-shadow: var(--tt-shadow-sm);
  overflow: hidden;
}

.tt-card-header {
  padding: 1rem 1.25rem;
  background: var(--tt-primary-light);
  border-bottom: 1px solid #C7D2FE;
  font-weight: 600;
  color: var(--tt-primary-dark);
}

.tt-card-body {
  padding: 1.25rem;
}

/* ── Table ──────────────────────────────────────────────── */
.tt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.tt-table thead th {
  background: var(--tt-primary-light);
  color: var(--tt-primary-dark);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 1rem;
  border-bottom: 2px solid #C7D2FE;
}

.tt-table tbody tr {
  border-bottom: 1px solid var(--tt-border);
  transition: background .1s;
}

.tt-table tbody tr:last-child {
  border-bottom: none;
}

.tt-table tbody tr:hover {
  background: #F8FAFF;
}

.tt-table td {
  padding: 0.75rem 1rem;
  vertical-align: middle;
}

.tt-table-cell-title {
  font-weight: 600;
  color: var(--tt-text);
}

/* ── Badges ─────────────────────────────────────────────── */
.tt-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25em 0.625em;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}

.tt-badge--indigo  { background: #EEF2FF; color: #4338CA; }
.tt-badge--emerald { background: #D1FAE5; color: #065F46; }
.tt-badge--amber   { background: #FEF3C7; color: #92400E; }
.tt-badge--sky     { background: #E0F2FE; color: #0C4A6E; }
.tt-badge--red     { background: #FEE2E2; color: #991B1B; }
.tt-badge--gray    { background: #F1F5F9; color: #475569; }

/* ── Tag chips ──────────────────────────────────────────── */
.tt-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2em 0.55em;
  background: var(--tt-primary-light);
  color: var(--tt-primary);
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
}

/* ── Action buttons ─────────────────────────────────────── */
.tt-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
  transition: background .15s, transform .1s;
  font-size: 0.875rem;
  text-decoration: none;
}
.tt-action-btn:hover { transform: translateY(-1px); }

.tt-action-btn--info   { background: #E0F2FE; color: #0369A1; }
.tt-action-btn--info:hover   { background: #BAE6FD; color: #0C4A6E; }
.tt-action-btn--edit   { background: #FEF3C7; color: #B45309; }
.tt-action-btn--edit:hover   { background: #FDE68A; color: #92400E; }
.tt-action-btn--delete { background: #FEE2E2; color: #DC2626; }
.tt-action-btn--delete:hover { background: #FECACA; color: #991B1B; }

/* ── Empty state ────────────────────────────────────────── */
.tt-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--tt-muted);
}

.tt-empty-icon {
  font-size: 3rem;
  color: #C7D2FE;
  margin-bottom: 1rem;
}

/* ── Hero (Home) ────────────────────────────────────────── */
.tt-hero {
  background: linear-gradient(135deg, var(--tt-primary-dark) 0%, var(--tt-primary) 60%, #6366F1 100%);
  color: white;
  padding: 4rem 2rem;
  border-radius: var(--tt-radius);
  margin-bottom: 2.5rem;
  position: relative;
  overflow: hidden;
}

.tt-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
}

.tt-hero-content { position: relative; z-index: 1; }

.tt-hero h1 {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 0.75rem;
}

.tt-hero p {
  font-size: 1.125rem;
  opacity: .85;
  max-width: 560px;
}

/* Stat cards */
.tt-stat-card {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--tt-radius);
  padding: 1.25rem 1.5rem;
  text-align: center;
  color: white;
  backdrop-filter: blur(4px);
}

.tt-stat-card-value {
  font-size: 2rem;
  font-weight: 800;
}

.tt-stat-card-label {
  font-size: 0.85rem;
  opacity: .8;
}

/* Feature cards */
.tt-feature-card {
  background: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius);
  padding: 1.5rem;
  transition: box-shadow .2s, transform .2s;
  height: 100%;
}

.tt-feature-card:hover {
  box-shadow: var(--tt-shadow-lg);
  transform: translateY(-2px);
}

.tt-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 0.75rem;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.tt-feature-icon--indigo  { background: var(--tt-primary-light); color: var(--tt-primary); }
.tt-feature-icon--emerald { background: #D1FAE5; color: #065F46; }
.tt-feature-icon--amber   { background: #FEF3C7; color: #B45309; }

/* ── Auth pages ─────────────────────────────────────────── */
.tt-auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--tt-primary-dark) 0%, var(--tt-primary) 100%);
  padding: 2rem 1rem;
}

.tt-auth-card {
  background: var(--tt-surface);
  border-radius: calc(var(--tt-radius) * 2);
  padding: 2.5rem;
  width: 100%;
  max-width: 440px;
  box-shadow: var(--tt-shadow-lg);
}

.tt-auth-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.tt-auth-logo span {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--tt-primary);
}

/* ── LaTeX editor ───────────────────────────────────────── */
.tt-latex-textarea {
  font-family: var(--tt-mono);
  font-size: 0.875rem;
  background: #0F172A;
  color: #E2E8F0;
  border: 1px solid #334155;
  border-radius: var(--tt-radius);
  padding: 1rem;
  resize: vertical;
  min-height: 160px;
}

.tt-latex-textarea:focus {
  outline: none;
  border-color: var(--tt-primary);
  box-shadow: 0 0 0 3px rgba(67,56,202,.2);
}

.tt-latex-preview {
  background: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius);
  padding: 1.25rem;
  min-height: 100px;
}

/* ── Footer ─────────────────────────────────────────────── */
.tt-footer {
  background: var(--tt-primary-dark);
  color: rgba(255,255,255,.65);
  text-align: center;
  padding: 1.25rem;
  font-size: 0.8rem;
  margin-top: auto;
}

/* ── Blazor form controls — override Bootstrap slightly ── */
.form-control:focus,
.form-select:focus {
  border-color: var(--tt-primary);
  box-shadow: 0 0 0 0.2rem rgba(67,56,202,.2);
}

.btn-primary {
  background-color: var(--tt-primary);
  border-color: var(--tt-primary);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--tt-primary-dark);
  border-color: var(--tt-primary-dark);
}

/* ── Validation ─────────────────────────────────────────── */
h1:focus { outline: none; }

.valid.modified:not([type=checkbox]) { outline: 1px solid #059669; }
.invalid { outline: 1px solid #DC2626; }
.validation-message { color: #DC2626; }

/* ── Blazor error boundary ──────────────────────────────── */
.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

.blazor-error-boundary::after {
  content: "An unhandled error has occurred."
}

.darker-border-checkbox.form-check-input {
  border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}