/* =====================================================================
   CLab — base styles (Bootstrap 5 does most of the work)
   ===================================================================== */
:root {
  --clab-primary: #1f4e79;
  --clab-primary-dark: #163a5a;
  --clab-accent: #f2a900;
  --clab-bg: #f4f6f9;
  --clab-editor-bg: #1e1e1e;
  --bs-primary: #1f4e79;
  --bs-primary-rgb: 31, 78, 121;
  --bs-link-color: #1f4e79;
  --bs-link-color-rgb: 31, 78, 121;
}

body {
  background: var(--clab-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }

.bg-clab { background: var(--clab-primary) !important; }

.btn-primary {
  --bs-btn-bg: var(--clab-primary);
  --bs-btn-border-color: var(--clab-primary);
  --bs-btn-hover-bg: var(--clab-primary-dark);
  --bs-btn-hover-border-color: var(--clab-primary-dark);
  --bs-btn-active-bg: var(--clab-primary-dark);
  --bs-btn-active-border-color: var(--clab-primary-dark);
  --bs-btn-disabled-bg: var(--clab-primary);
  --bs-btn-disabled-border-color: var(--clab-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--clab-primary);
  --bs-btn-border-color: var(--clab-primary);
  --bs-btn-hover-bg: var(--clab-primary);
  --bs-btn-hover-border-color: var(--clab-primary);
  --bs-btn-active-bg: var(--clab-primary-dark);
}

.navbar .nav-link.active { font-weight: 600; border-bottom: 2px solid var(--clab-accent); }

/* ---------- Auth pages ---------- */
.auth-page { background: linear-gradient(160deg, #e9eef5 0%, #f7f9fc 60%); }
.auth-wrap { min-height: 75vh; }
.auth-logo {
  width: 64px; height: 64px; margin: 0 auto;
  border-radius: 16px;
  background: var(--clab-primary);
  color: #fff; font-size: 34px;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Cards & stats ---------- */
.card { border-radius: .75rem; }
.stat-card .stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.stat-card .stat-label { font-size: .8rem; color: #6c757d; text-transform: uppercase; letter-spacing: .04em; }

.table thead th { white-space: nowrap; font-size: .85rem; color: #495057; }
.table-sm td, .table-sm th { vertical-align: middle; }
.table-responsive { border-radius: .5rem; }

.page-head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.page-head h1 { margin: 0; font-size: 1.5rem; }

/* ---------- Code display ---------- */
pre.code-view, .io-box {
  background: var(--clab-editor-bg);
  color: #e6e6e6;
  border-radius: .5rem;
  padding: .75rem 1rem;
  font-family: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .85rem;
  max-height: 480px;
  overflow: auto;
  white-space: pre;
  margin: 0;
}
.io-box { white-space: pre-wrap; word-break: break-word; min-height: 3rem; }
.io-box.io-error { color: #ff8c8c; }
.io-box.io-ok { color: #9be39b; }
.mono { font-family: SFMono-Regular, Menlo, Consolas, monospace; }

/* ---------- Editor (CodeMirror) ---------- */
.editor-wrap { border: 1px solid #ced4da; border-radius: .5rem; overflow: hidden; }
.editor-wrap .CodeMirror { height: 420px; font-size: 14px; }
@media (max-width: 576px) {
  .editor-wrap .CodeMirror { height: 300px; font-size: 13px; }
}

/* ---------- Badges ---------- */
.badge-status-graded  { background: #198754; }
.badge-status-pending { background: #fd7e14; }
.badge-status-grading { background: #0dcaf0; color: #000; }
.badge-status-failed  { background: #dc3545; }
.badge-edited { background: #6f42c1; }

/* ---------- Integrity (exam mode) ---------- */
body.exam-mode { user-select: none; -webkit-user-select: none; }
body.exam-mode .CodeMirror, body.exam-mode textarea, body.exam-mode input { user-select: text; -webkit-user-select: text; }
.violation-pill { font-weight: 600; }

/* ---------- Utilities ---------- */
.text-pre { white-space: pre-wrap; }
.min-w-0 { min-width: 0; }
.cursor-pointer { cursor: pointer; }
footer { flex-shrink: 0; }

@media print {
  nav, footer, .no-print { display: none !important; }
  body { background: #fff; }
}

/* ---------- Exam overlay (fullscreen gate) ---------- */
.exam-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(15, 23, 42, .88);
  display: none; align-items: center; justify-content: center;
  padding: 16px; overflow: auto;
}
.exam-overlay.show { display: flex; }
.nav-tabs .nav-link { font-weight: 600; }