/* ──────────────────────────────────────────────────────────────────
   SIDEBAR
   ────────────────────────────────────────────────────────────────── */

.sidebar__btn {
  font: 13px var(--font-sans);
  color: #fff;
  background: var(--navy);
  border: 0;
  padding: 10px 16px;
  text-align: left;
  cursor: pointer;
  margin: 0 0 2px 0;
  transition: background 0.12s ease;
}

.sidebar__btn:hover {
  background: var(--navy-hover);
}

.sidebar__btn.is-active {
  background: var(--navy-mid);
  font-weight: 700;
}

.sidebar__btn--erase {
  margin: 0 10px;
  background: var(--orange-btn);
  color: #fff;
  font-weight: 700;
  border-radius: 4px;
  padding: 10px 14px;
  text-align: center;
}

.sidebar__btn--erase:hover {
  background: var(--orange-hover);
}

.sidebar__btn--action {
  margin: 0 10px 6px 10px;
  background: var(--navy-mid);
  color: #fff;
  font-weight: 700;
  border-radius: 4px;
  padding: 10px 14px;
  text-align: center;
}

.sidebar__btn--action:hover {
  background: var(--navy-hover);
}

/* ──────────────────────────────────────────────────────────────────
   PROGRAM SELECT (modal)
   ────────────────────────────────────────────────────────────────── */

.program-list {
  list-style: none;
  margin: 0;
  padding: 6px 10px;
}

.program-list__item {
  padding: 12px 14px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 4px;
  user-select: none;
}

.program-list__item:hover {
  background: var(--row-alt);
}

.program-list__item.is-selected {
  background: var(--navy);
  color: #fff;
}

/* ──────────────────────────────────────────────────────────────────
   BUTTONS
   ────────────────────────────────────────────────────────────────── */

.btn {
  font: 700 13px var(--font-sans);
  border: 0;
  border-radius: 3px;
  color: #fff;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.12s ease;
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn--primary { background: var(--navy-mid); }
.btn--primary:hover:not(:disabled) { background: var(--navy-hover); }

.btn--success { background: var(--green-btn); }
.btn--success:hover:not(:disabled) { background: var(--green-hover); }

.btn--danger { background: var(--red-btn); }
.btn--danger:hover:not(:disabled) { background: var(--red-hover); }

.btn--info { background: var(--blue-btn); }
.btn--info:hover:not(:disabled) { background: var(--blue-hover); }

/* ──────────────────────────────────────────────────────────────────
   WELCOME
   ────────────────────────────────────────────────────────────────── */

.welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  gap: 12px;
}

.welcome__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}

.welcome__sub {
  font-size: 11px;
  color: var(--text-soft);
}

/* ──────────────────────────────────────────────────────────────────
   FORMS
   ────────────────────────────────────────────────────────────────── */

.form-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0;
}

.form-row--right {
  justify-content: flex-end;
  margin-top: 10px;
}

.form-label {
  font: 13px var(--font-sans);
  color: #222;
}

.form-input,
.form-select {
  font: 13px var(--font-sans);
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #fff;
  min-width: 120px;
}

.form-input--narrow {
  min-width: 60px;
  width: 80px;
}

.form-hint {
  font: italic 12px var(--font-sans);
  color: var(--text-muted);
}

.form-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  padding: 14px 16px;
  margin-top: 12px;
}

.form-card__row {
  display: grid;
  grid-template-columns: 240px 1fr;
  align-items: center;
  gap: 12px;
  margin: 6px 0;
}

.form-card__row .form-input {
  width: 100%;
  max-width: 360px;
}

.notice {
  background: var(--notice-bg);
  border: 1px solid var(--notice-border);
  padding: 8px 12px;
  font-size: 12px;
  margin-bottom: 10px;
}

.credited-found {
  font-weight: 700;
  color: var(--navy);
  font-size: 13px;
  padding: 4px 6px 10px 6px;
}

/* ──────────────────────────────────────────────────────────────────
   GRADE ENTRY (view 3)
   ────────────────────────────────────────────────────────────────── */

.grade-input-area {
  flex: 1;
  background: var(--card-bg);
  border: 1px solid var(--border);
  padding: 8px;
  overflow: auto;
  min-height: 200px;
}

.grade-row {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: var(--card-bg);
}

.grade-row--multi {
  grid-template-columns: 1fr 2fr 0.9fr 0.9fr 0.9fr 1.1fr;
}

.grade-row--header {
  background: var(--header-bg);
  font-weight: 700;
}

.grade-cell--input {
  display: flex;
}

.grade-cell--input .form-input {
  width: 100%;
  min-width: 0;
}

.grade-cell {
  font-size: 13px;
  padding: 2px 0;
}

.grade-cell--bold {
  font-weight: 700;
}

.grade-row .form-input {
  width: 100%;
}

.grade-empty {
  font-style: italic;
  color: var(--text-muted);
  padding: 12px 8px;
}

/* ──────────────────────────────────────────────────────────────────
   TABLE
   ────────────────────────────────────────────────────────────────── */

.data-table__wrap {
  background: #fff;
  border: 1px solid var(--border);
  overflow: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font: 13px var(--font-sans);
}

.data-table th {
  background: var(--header-bg);
  color: var(--navy);
  text-align: left;
  font-weight: 700;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}

.data-table td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--navy);
}

.data-table tr.row-a td { background: #fff; }
.data-table tr.row-b td { background: var(--row-alt); }

.grade-cell--editable {
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

.grade-cell--editable:hover {
  background: var(--row-alt);
}

/* Modern status pills for the Remarks column.
   Rounded pill + soft tinted background + 1px translucent border + a small
   status dot (::before). The dot uses currentColor so it tracks the text. */
.remarks-passed,
.remarks-failed,
.remarks-credited {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.5;
  white-space: nowrap;
}

.remarks-passed::before,
.remarks-failed::before,
.remarks-credited::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.remarks-passed {
  color: var(--passed);
  background: var(--passed-bg);
  border-color: var(--passed-border);
}

.remarks-failed {
  color: var(--failed);
  background: var(--failed-bg);
  border-color: var(--failed-border);
}

.remarks-credited {
  color: var(--credited);
  background: var(--credited-bg);
  border-color: var(--credited-border);
}

/* "(credited from)" stays as quiet meta text — not a status. */
.remarks-credited-from { color: var(--credited-from); font-style: italic; }

.table-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.table-card .data-table__wrap {
  flex: 1;
  min-height: 0;
}

.table-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 6px 10px;
  background: var(--footer-bg);
  border-top: 1px solid var(--footer-border);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.chip {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
}

.chip--soft {
  background: var(--chip-soft-bg);
  color: var(--navy);
}

.chip--dark {
  background: var(--navy);
  color: #fff;
}

/* ──────────────────────────────────────────────────────────────────
   PILL TABS (views 1, 2)
   ────────────────────────────────────────────────────────────────── */

.term-tabs {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.term-tabs__bar {
  background: var(--pill-bar-bg);
  border-bottom: 1px solid var(--pill-bar-border);
  padding: 10px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  cursor: grab;
  user-select: none;
}

.term-tabs__bar.is-dragging {
  cursor: grabbing;
}

.term-tabs__bar::-webkit-scrollbar { height: 0; }

.term-tabs__inner {
  display: inline-flex;
  gap: 5px;
}

.pill {
  background: #fff;
  border: 1px solid var(--pill-border);
  color: var(--navy);
  border-radius: 999px;
  padding: 6px 16px;
  font: 12px var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease;
}

.pill:hover {
  background: var(--pill-hover);
}

.pill.is-selected {
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  border-color: var(--navy);
}

.term-tabs__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-top: 8px;
}

.term-tabs__empty {
  color: var(--text-muted);
  font-style: italic;
  padding: 20px;
}

/* ──────────────────────────────────────────────────────────────────
   GWA VIEW (view 6)
   ────────────────────────────────────────────────────────────────── */

.gwa-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  padding: 16px 24px;
  text-align: center;
  margin-bottom: 14px;
}

.gwa-card__value {
  font-size: 42px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
}

.gwa-card__caption {
  font-size: 13px;
  color: var(--text-soft);
  margin-top: 4px;
}

.gwa-card__units {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
}

.gwa-table-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}

.gwa-empty {
  text-align: center;
  font-style: italic;
  color: var(--text-muted);
  font-size: 14px;
  margin-top: 40px;
}

/* ──────────────────────────────────────────────────────────────────
   SCORE COMPUTATION (view 7)
   ────────────────────────────────────────────────────────────────── */

.score-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.weights-bar {
  background: var(--weights-bg);
  border: 1px solid var(--weights-border);
  color: var(--weights-text);
  font: italic 12px var(--font-sans);
  padding: 4px 12px;
}

.score-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
}

.score-tab {
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  padding: 6px 16px;
  font: 13px var(--font-sans);
  color: var(--navy);
  cursor: pointer;
  margin-bottom: -1px;
}

.score-tab.is-active {
  background: #fff;
  border-bottom: 1px solid #fff;
  font-weight: 700;
}

.score-tab-content {
  background: #fff;
  border: 1px solid var(--border);
  border-top: 0;
  padding: 12px;
}

.term-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.score-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.score-table-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.score-table__heading {
  font-weight: 700;
  font-size: 13px;
  color: var(--navy);
}

.data-table--score td {
  padding: 3px 6px;
}

.data-table--score tr.is-selected td {
  background: rgb(180, 210, 245);
}

.score-cell-input {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  font: 13px var(--font-sans);
  padding: 2px 4px;
}

.score-cell-input:focus {
  outline: none;
  background: #fff;
  border-color: var(--border);
}

.score-cell-input--num {
  text-align: right;
  width: 80px;
}

.score-pct {
  text-align: right;
  color: var(--text-soft);
}

.score-btn-row {
  margin-top: 4px;
}

.preview-label {
  font-weight: 700;
  font-size: 13px;
  color: var(--navy);
  margin-left: 6px;
}

/* ──────────────────────────────────────────────────────────────────
   RESPONSIVE — collapse multi-column layouts on narrow screens
   ────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────
   ABOUT MODAL
   ────────────────────────────────────────────────────────────────── */

.about-body {
  padding: 18px 18px 14px 18px;
}

.about-version {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.about-version__label {
  font-size: 12px;
  color: var(--text-soft, #555);
}

.about-version__value {
  font: 700 22px monospace;
  color: var(--navy);
  margin-top: 2px;
}

.about-log__heading {
  font: 700 13px var(--font-sans);
  color: var(--navy);
  margin-bottom: 8px;
}

.about-log {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.about-log__empty {
  font: italic 12px var(--font-sans);
  color: var(--text-muted, #888);
}

.about-log__entry {
  border-left: 3px solid var(--navy);
  padding: 4px 0 4px 10px;
}

.about-log__entry-heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}

.about-log__entry-version {
  font: 700 13px monospace;
  color: var(--navy);
}

.about-log__entry-date {
  font: 11px var(--font-sans);
  color: var(--text-muted, #888);
}

.about-log__entry-list {
  margin: 0;
  padding-left: 18px;
}

.about-log__entry-list li {
  font: 12px var(--font-sans);
  color: var(--navy);
  line-height: 1.5;
  margin: 2px 0;
}

/* ──────────────────────────────────────────────────────────────────
   PREDICT GRADE (view 6)
   ────────────────────────────────────────────────────────────────── */

.predict-results {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.predict-headline {
  font: 700 14px var(--font-sans);
  color: var(--navy);
}

.predict-flag {
  font: 12px var(--font-sans);
  padding: 4px 10px;
  border-radius: 3px;
  display: inline-block;
  align-self: flex-start;
}

.predict-flag--ok {
  background: rgba(34, 139, 34, 0.12);
  color: var(--passed, #228822);
}

.predict-flag--bad {
  background: rgba(204, 51, 51, 0.12);
  color: var(--failed, #c33);
}

.predict-flag--neutral {
  background: var(--row-alt);
  color: var(--navy);
}

.predict-inline-hint {
  font: 12px var(--font-sans);
  padding: 2px 10px 6px calc(240px + 12px); /* align under the input column of .form-card__row */
  color: var(--text-soft);
}

.predict-inline-hint__label {
  font-style: italic;
}

.predict-inline-hint__value {
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
}

.predict-inline-hint__value--ok      { background: rgba(34, 139, 34, 0.12); color: var(--passed, #228822); }
.predict-inline-hint__value--bad     { background: rgba(204, 51, 51, 0.12); color: var(--failed, #c33); }
.predict-inline-hint__value--neutral { background: var(--row-alt); color: var(--navy); }

.predict-inline-hint__note {
  color: var(--text-muted);
}

@media (max-width: 720px) {
  .predict-inline-hint {
    padding-left: 0;
  }
}

.predict-scenario {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 3px;
}

.predict-scenario__title {
  font: 700 12px var(--font-sans);
  color: var(--navy);
  margin-bottom: 4px;
}

.predict-scenario .form-hint.predict-flag--ok { color: var(--passed, #228822); font-style: normal; }
.predict-scenario .form-hint.predict-flag--bad { color: var(--failed, #c33); font-style: normal; }
.predict-scenario .form-hint.predict-flag--neutral { color: var(--navy); font-style: normal; }

@media (max-width: 720px) {
  .form-card__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .form-card__row .form-input {
    max-width: 100%;
  }

  .score-grid {
    grid-template-columns: 1fr;
  }

  .grade-row {
    grid-template-columns: 1fr 1.4fr 1fr;
    gap: 6px;
    padding: 4px;
  }

  /* On narrow screens stack the multi-input rows: course info on top,
     four small grade inputs on a 2x2 grid underneath. */
  .grade-row--multi {
    grid-template-columns: 1fr 1fr;
    gap: 4px 6px;
    padding: 6px;
  }

  .grade-row--multi .grade-cell:nth-child(1),
  .grade-row--multi .grade-cell:nth-child(2) {
    grid-column: 1 / -1;
  }

  .grade-cell {
    font-size: 12px;
  }
}

@media (max-width: 520px) {
  .pill {
    padding: 5px 12px;
    font-size: 11px;
  }

  .gwa-card__value {
    font-size: 32px;
  }
}