/* =========================================================================
   TutorHub — "Terminal Gradebook" design system
   Navigation reads like open editor tabs (schedule.ics, grades.log, ...);
   dashboards read like a shell session. Mono = identity/labels/numbers,
   Inter = reading content. Theme = Bootstrap 5 data-bs-theme + our tokens.
   ========================================================================= */

:root,
[data-bs-theme="light"] {
  --th-bg: #f5f6f9;
  --th-surface: #ffffff;
  --th-surface-2: #eef0f4;
  --th-border: #dce1e8;
  --th-text: #171b21;
  --th-text-muted: #5b6472;
  --th-tab-bg: #e9ebf1;
  --th-tab-active-bg: #ffffff;
  --th-shadow: 0 1px 2px rgba(23, 27, 33, .06), 0 6px 16px rgba(23, 27, 33, .05);

  --th-blue: #3e6fd9;      --th-blue-rgb: 62, 111, 217;    --th-blue-hover: #2f58b0;
  --th-amber: #b8790f;     --th-amber-rgb: 184, 121, 15;   --th-amber-hover: #966211;
  --th-mint: #1f9d74;      --th-mint-rgb: 31, 157, 116;    --th-mint-hover: #17805e;
  --th-coral: #d8484d;     --th-coral-rgb: 216, 72, 77;    --th-coral-hover: #b93338;
  --th-dim: #5b6472;       --th-dim-rgb: 91, 100, 114;

  color-scheme: light;
}

[data-bs-theme="dark"] {
  --th-bg: #0d1117;
  --th-surface: #161b22;
  --th-surface-2: #10151c;
  --th-border: #2a313c;
  --th-text: #d8dee9;
  --th-text-muted: #8b94a3;
  --th-tab-bg: #0b0e14;
  --th-tab-active-bg: #161b22;
  --th-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .35);

  --th-blue: #5b8def;      --th-blue-rgb: 91, 141, 239;    --th-blue-hover: #7ca3f2;
  --th-amber: #e8a33d;     --th-amber-rgb: 232, 163, 61;   --th-amber-hover: #f0b85f;
  --th-mint: #4fd1a5;      --th-mint-rgb: 79, 209, 165;    --th-mint-hover: #6bdbb5;
  --th-coral: #f2686c;     --th-coral-rgb: 242, 104, 108;  --th-coral-hover: #f58589;
  --th-dim: #8b94a3;       --th-dim-rgb: 139, 148, 163;

  color-scheme: dark;
}

/* ---- Bootstrap variable takeover ------------------------------------- */
:root, [data-bs-theme] {
  --bs-body-bg: var(--th-bg);
  --bs-body-color: var(--th-text);
  --bs-border-color: var(--th-border);
  --bs-secondary-bg: var(--th-surface-2);
  --bs-tertiary-bg: var(--th-surface-2);
  --bs-emphasis-color: var(--th-text);
  --bs-link-color: var(--th-blue);
  --bs-link-hover-color: var(--th-blue-hover);
  --bs-link-color-rgb: var(--th-blue-rgb);

  --bs-primary: var(--th-blue);           --bs-primary-rgb: var(--th-blue-rgb);
  --bs-info: var(--th-blue);              --bs-info-rgb: var(--th-blue-rgb);
  --bs-success: var(--th-mint);           --bs-success-rgb: var(--th-mint-rgb);
  --bs-warning: var(--th-amber);          --bs-warning-rgb: var(--th-amber-rgb);
  --bs-danger: var(--th-coral);           --bs-danger-rgb: var(--th-coral-rgb);
  --bs-secondary: var(--th-dim);          --bs-secondary-rgb: var(--th-dim-rgb);

  --bs-card-bg: var(--th-surface);
  --bs-card-border-color: var(--th-border);
  --bs-table-bg: transparent;
  --bs-table-color: var(--th-text);
  --bs-table-border-color: var(--th-border);
  --bs-table-striped-bg: var(--th-surface-2);
  --bs-table-hover-bg: var(--th-surface-2);
  --bs-list-group-bg: var(--th-surface);
  --bs-list-group-border-color: var(--th-border);
  --bs-list-group-color: var(--th-text);
  --bs-list-group-action-hover-bg: var(--th-surface-2);
  --bs-modal-bg: var(--th-surface);
}

/* ---- Base -------------------------------------------------------------- */
html, body { background: var(--th-bg); }
body {
  color: var(--th-text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  transition: background-color .12s ease, color .12s ease;
}

.font-mono,
.brand, .brand-cursor,
.eyebrow,
.tab-strip .tab,
.grade-chip,
.term-card .term-titlebar,
.term-card .term-line,
h1, h2 {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

h1, h2 {
  letter-spacing: -0.01em;
  font-weight: 600;
}

a { color: var(--th-blue); text-decoration: none; }
a:hover { color: var(--th-blue-hover); text-decoration: underline; }

::selection { background: rgba(var(--th-blue-rgb), .3); }

/* Respect reduced motion everywhere */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---- Eyebrow: comment-style section label ------------------------------ */
.eyebrow {
  display: block;
  font-size: .78rem;
  color: var(--th-text-muted);
  letter-spacing: .02em;
  margin-bottom: .35rem;
  user-select: none;
}
.eyebrow::before { content: "// "; opacity: .6; }

/* ---- Top bar: tab strip ------------------------------------------------- */
.tab-strip-wrap {
  background: var(--th-tab-bg);
  border-bottom: 1px solid var(--th-border);
  margin-bottom: 2rem;
}
.tab-strip {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: thin;
}
.tab-strip::-webkit-scrollbar { height: 4px; }
.tab-strip::-webkit-scrollbar-thumb { background: var(--th-border); border-radius: 4px; }

.brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 0 1rem;
  font-weight: 600;
  font-size: .95rem;
  color: var(--th-text);
  white-space: nowrap;
  flex-shrink: 0;
}
.brand:hover { color: var(--th-text); text-decoration: none; }
.brand-mark {
  width: 20px; height: 20px;
  color: var(--th-blue);
  flex-shrink: 0;
}
.brand-cursor {
  display: inline-block;
  width: .55em;
  background: var(--th-mint);
  color: transparent;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .65rem .9rem;
  font-size: .82rem;
  color: var(--th-text-muted);
  white-space: nowrap;
  border-right: 1px solid var(--th-border);
  flex-shrink: 0;
}
.tab svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .8; }
.tab:hover { background: rgba(var(--th-blue-rgb), .08); color: var(--th-text); text-decoration: none; }
.tab.active {
  background: var(--th-tab-active-bg);
  color: var(--th-text);
  box-shadow: inset 0 -2px 0 var(--th-blue);
}
.tab .ext { color: var(--th-text-muted); opacity: .6; margin-left: -.1em; }
.tab .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--th-coral);
  flex-shrink: 0;
}

.tab-strip-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 0 .75rem;
  flex-shrink: 0;
}

.theme-switch {
  display: inline-flex;
  border: 1px solid var(--th-border);
  border-radius: .5rem;
  overflow: hidden;
}
.theme-switch form { display: contents; }
.theme-switch button {
  border: 0;
  background: transparent;
  color: var(--th-text-muted);
  padding: .3rem .5rem;
  line-height: 1;
  display: flex;
  cursor: pointer;
}
.theme-switch button svg { width: 15px; height: 15px; }
.theme-switch button:hover { color: var(--th-text); background: rgba(var(--th-blue-rgb), .08); }
.theme-switch button.active { color: #fff; background: var(--th-blue); }

.user-chip {
  font-size: .82rem;
  color: var(--th-text-muted);
  white-space: nowrap;
}
.user-chip a { color: var(--th-text); }

/* ---- Terminal hero card -------------------------------------------------- */
.term-card {
  background: var(--th-surface-2);
  border: 1px solid var(--th-border);
  border-radius: .6rem;
  overflow: hidden;
  box-shadow: var(--th-shadow);
  margin-bottom: 2rem;
}
.term-titlebar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  background: var(--th-tab-bg);
  border-bottom: 1px solid var(--th-border);
  font-size: .75rem;
  color: var(--th-text-muted);
}
.term-dots { display: flex; gap: 5px; }
.term-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--th-border); }
.term-body { padding: 1rem 1.25rem 1.25rem; }
.term-line {
  font-size: .88rem;
  color: var(--th-text);
  margin-bottom: .15rem;
}
.term-line .prompt { color: var(--th-mint); }
.term-line .path { color: var(--th-blue); }
.term-out {
  font-family: "Inter", sans-serif;
  color: var(--th-text-muted);
  font-size: .92rem;
  margin: .25rem 0 0;
}

/* ---- Cards / lists / tables --------------------------------------------- */
.card {
  border-radius: .6rem;
  box-shadow: var(--th-shadow);
}
.card-header { background: var(--th-surface-2); font-weight: 600; }
.table { --bs-table-bg: transparent; }
.table thead th {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--th-text-muted);
  border-bottom-width: 1px;
  font-weight: 600;
}
.list-group-item { background: var(--th-surface); }

/* Tabular numerals for grades/dates/scores */
.font-tabular, .grade-chip, td.num { font-variant-numeric: tabular-nums; }

.grade-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9em;
  padding: .1em .4em;
  border-radius: .3em;
  font-weight: 600;
  font-size: .85rem;
  background: rgba(var(--th-amber-rgb), .14);
  color: var(--th-amber);
  border: 1px solid rgba(var(--th-amber-rgb), .3);
}
.grade-chip::before { content: "["; opacity: .5; margin-right: .1em; }
.grade-chip::after { content: "]"; opacity: .5; margin-left: .1em; }

/* ---- Buttons ------------------------------------------------------------- */
.btn { border-radius: .45rem; font-weight: 500; }
.btn-primary {
  --bs-btn-bg: var(--th-blue); --bs-btn-border-color: var(--th-blue);
  --bs-btn-hover-bg: var(--th-blue-hover); --bs-btn-hover-border-color: var(--th-blue-hover);
  --bs-btn-active-bg: var(--th-blue-hover); --bs-btn-active-border-color: var(--th-blue-hover);
  --bs-btn-focus-shadow-rgb: var(--th-blue-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--th-blue); --bs-btn-border-color: var(--th-blue);
  --bs-btn-hover-bg: var(--th-blue); --bs-btn-hover-border-color: var(--th-blue);
  --bs-btn-active-bg: var(--th-blue); --bs-btn-active-border-color: var(--th-blue);
}
.btn-success {
  --bs-btn-bg: var(--th-mint); --bs-btn-border-color: var(--th-mint);
  --bs-btn-hover-bg: var(--th-mint-hover); --bs-btn-hover-border-color: var(--th-mint-hover);
  --bs-btn-active-bg: var(--th-mint-hover); --bs-btn-active-border-color: var(--th-mint-hover);
}
.btn-outline-success {
  --bs-btn-color: var(--th-mint); --bs-btn-border-color: var(--th-mint);
  --bs-btn-hover-bg: var(--th-mint); --bs-btn-hover-border-color: var(--th-mint);
  --bs-btn-active-bg: var(--th-mint); --bs-btn-active-border-color: var(--th-mint);
}
.btn-danger {
  --bs-btn-bg: var(--th-coral); --bs-btn-border-color: var(--th-coral);
  --bs-btn-hover-bg: var(--th-coral-hover); --bs-btn-hover-border-color: var(--th-coral-hover);
  --bs-btn-active-bg: var(--th-coral-hover); --bs-btn-active-border-color: var(--th-coral-hover);
}
.btn-outline-danger {
  --bs-btn-color: var(--th-coral); --bs-btn-border-color: var(--th-coral);
  --bs-btn-hover-bg: var(--th-coral); --bs-btn-hover-border-color: var(--th-coral);
  --bs-btn-active-bg: var(--th-coral); --bs-btn-active-border-color: var(--th-coral);
}
.btn-outline-secondary {
  --bs-btn-color: var(--th-text-muted); --bs-btn-border-color: var(--th-border);
  --bs-btn-hover-bg: var(--th-surface-2); --bs-btn-hover-border-color: var(--th-border);
  --bs-btn-hover-color: var(--th-text);
  --bs-btn-active-bg: var(--th-surface-2); --bs-btn-active-color: var(--th-text);
}

/* ---- Alerts ---------------------------------------------------------------- */
.alert-success { --bs-alert-color: var(--th-mint); --bs-alert-bg: rgba(var(--th-mint-rgb), .12); --bs-alert-border-color: rgba(var(--th-mint-rgb), .3); }
.alert-danger  { --bs-alert-color: var(--th-coral); --bs-alert-bg: rgba(var(--th-coral-rgb), .12); --bs-alert-border-color: rgba(var(--th-coral-rgb), .3); }
.alert-warning { --bs-alert-color: var(--th-amber); --bs-alert-bg: rgba(var(--th-amber-rgb), .14); --bs-alert-border-color: rgba(var(--th-amber-rgb), .3); }
.alert-info    { --bs-alert-color: var(--th-blue);  --bs-alert-bg: rgba(var(--th-blue-rgb), .12);  --bs-alert-border-color: rgba(var(--th-blue-rgb), .3); }

/* ---- Forms ------------------------------------------------------------------ */
.form-control, .form-select {
  background-color: var(--th-surface);
  border-color: var(--th-border);
  color: var(--th-text);
  border-radius: .45rem;
}
.form-control:focus, .form-select:focus {
  background-color: var(--th-surface);
  color: var(--th-text);
  border-color: var(--th-blue);
  box-shadow: 0 0 0 .2rem rgba(var(--th-blue-rgb), .18);
}
.form-control::placeholder { color: var(--th-text-muted); opacity: .8; }

/* ---- Login page -------------------------------------------------------------- */
.login-wrap {
  min-height: calc(100vh - 3rem);
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-term { width: 100%; max-width: 420px; }
.login-term .term-body { padding: 1.5rem; }
.login-field { margin-bottom: 1rem; }
.login-field label {
  display: block;
  font-size: .82rem;
  color: var(--th-mint);
  margin-bottom: .25rem;
}
.login-field label::before { content: "$ "; opacity: .7; color: var(--th-text-muted); }

/* ---- Weekly schedule grid ---------------------------------------------------- */
.week-nav { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.week-grid-wrap {
  overflow-x: auto;
  border: 1px solid var(--th-border);
  border-radius: .6rem;
  box-shadow: var(--th-shadow);
}
.week-grid {
  border-collapse: collapse;
  width: 100%;
  min-width: 760px;
  background: var(--th-surface);
}
.week-grid th, .week-grid td { border: 1px solid var(--th-border); }
.week-grid thead th {
  background: var(--th-surface-2);
  padding: .5rem .4rem;
  font-size: .78rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  color: var(--th-text-muted);
}
.week-grid thead th.day-today { color: var(--th-blue); }
.week-grid .slot-time {
  background: var(--th-surface-2);
  font-family: "JetBrains Mono", monospace;
  font-size: .72rem;
  color: var(--th-text-muted);
  padding: .2rem .5rem;
  white-space: nowrap;
  vertical-align: top;
  text-align: right;
}
.week-grid .slot-empty { height: 2.2rem; padding: 0; }
.slot-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 2.2rem;
  color: transparent;
  font-size: 1rem;
  line-height: 1;
  transition: background-color .1s ease, color .1s ease;
}
.slot-add:hover {
  background: rgba(var(--th-blue-rgb), .1);
  color: var(--th-blue);
  text-decoration: none;
}
.week-grid .slot-lesson { vertical-align: top; padding: 0; }
.lesson-block {
  display: block;
  height: 100%;
  min-height: 2.2rem;
  background: rgba(var(--th-blue-rgb), .12);
  border-left: 3px solid var(--th-blue);
  padding: .25rem .4rem;
  font-size: .76rem;
  line-height: 1.3;
  color: var(--th-text);
}
.lesson-block:hover { background: rgba(var(--th-blue-rgb), .22); text-decoration: none; color: var(--th-text); }
.lesson-block strong { display: block; font-size: .8rem; }
.lesson-block .lb-time {
  display: block;
  font-family: "JetBrains Mono", monospace;
  color: var(--th-text-muted);
  font-size: .68rem;
  margin-top: .1rem;
}

/* ---- Misc ------------------------------------------------------------------- */
.stat-tile { border-left: 3px solid var(--th-blue); }
.stat-tile .display-6 { font-family: "JetBrains Mono", monospace; font-weight: 600; }