/* Theme tokens layered on Bootstrap 5.3 variables. */
:root,
[data-bs-theme="light"] {
  --bs-primary: #2f4bb8;
  --bs-primary-rgb: 47, 75, 184;
  --bs-link-color: #2f4bb8;
  --bs-link-color-rgb: 47, 75, 184;
  --bs-body-bg: #f6f7fb;
  --app-surface: #ffffff;
  --app-accent: #e89b2c;
  --app-hero-from: #2f4bb8;
  --app-hero-to: #5a3fb0;
  --app-chart-line: #2f4bb8;
}

[data-bs-theme="dark"] {
  --bs-primary: #7d95ff;
  --bs-primary-rgb: 125, 149, 255;
  --bs-link-color: #9aacff;
  --bs-link-color-rgb: 154, 172, 255;
  --bs-body-bg: #12141c;
  --app-surface: #1b1e29;
  --app-accent: #f2b457;
  --app-hero-from: #26357e;
  --app-hero-to: #432f85;
  --app-chart-line: #9aacff;
}

[v-cloak] { display: none; }

body { background: var(--bs-body-bg); }

.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 85%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 75%, black);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
}
.nav-pills { --bs-nav-pills-link-active-bg: var(--bs-primary); }
.progress-bar { background-color: var(--bs-primary); }
.progress-bar.bg-success { background-color: var(--bs-success) !important; }

.card {
  background: var(--app-surface);
  border-color: var(--bs-border-color-translucent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.card-header { background: transparent; font-weight: 600; }
.list-group-item { background: transparent; }

/* Header and nav */
.app-header { background: var(--app-surface); }
.brand { color: var(--bs-primary); }
.brand .bi { color: var(--app-accent); }
.app-nav { min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.app-nav::-webkit-scrollbar { display: none; }
.app-nav .nav-link { white-space: nowrap; padding: .35rem .7rem; }
@media (max-width: 575.98px) {
  .app-header .container-lg { flex-direction: column; gap: .25rem !important; }
  .app-nav .nav-link span { font-size: .85rem; }
}

/* Dashboard hero */
.hero-card {
  color: #fff;
  background: linear-gradient(135deg, var(--app-hero-from), var(--app-hero-to));
}
.hero-card .alert-light { background: rgba(255, 255, 255, .15); color: #fff; border: 0; }

/* Checklist */
.phase-heading {
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--bs-secondary-color);
  background: var(--bs-tertiary-bg);
}
.task-done .task-title { text-decoration: line-through; color: var(--bs-secondary-color); }
.list-group-item label { cursor: pointer; }

/* College directory */
.college-results { max-height: 70vh; overflow-y: auto; }
.deadline-chip { font-weight: 500; }
.college-links .btn { --bs-btn-padding-y: .15rem; --bs-btn-padding-x: .45rem; }

/* Weekly bars */
.week-bars { display: flex; gap: .75rem; align-items: flex-end; height: 140px; }
.week-bar { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.bar-track { position: relative; flex: 1; width: 100%; max-width: 40px; background: var(--bs-tertiary-bg); border-radius: 4px; overflow: hidden; }
.bar-fill { position: absolute; bottom: 0; left: 0; right: 0; background: var(--bs-primary); opacity: .75; }
.bar-fill.met { background: var(--bs-success); opacity: 1; }
.bar-goal { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--app-accent); }

/* Score chart */
.score-chart { width: 100%; height: auto; }
.score-chart .grid { stroke: var(--bs-border-color); stroke-width: 1; }
.score-chart .tick { fill: var(--bs-secondary-color); font-size: 11px; }
.score-chart .target { stroke: var(--app-accent); stroke-width: 2; stroke-dasharray: 6 4; }
.score-chart .line { fill: none; stroke: var(--app-chart-line); stroke-width: 2.5; stroke-linejoin: round; }
.score-chart .dot { stroke: var(--app-surface); stroke-width: 2; }
.dot-practice, .legend-practice { fill: var(--app-chart-line); background: var(--app-chart-line); }
.dot-official, .legend-official { fill: var(--bs-success); background: var(--bs-success); }
.dot-psat, .legend-psat { fill: var(--app-accent); background: var(--app-accent); }
.legend { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--app-accent);
  outline-offset: 2px;
}

@media print {
  .app-header, footer, form, .btn { display: none !important; }
  .card { break-inside: avoid; box-shadow: none; }
}