/* ===========================================================================
   Locked student pages — "Not yet unlocked".

   The dashboard, attendance and change-request pages all render the same
   `renderStudentDocumentGate()` markup when the student's pre-internship
   documents are not all approved. Until now none of these classes had any CSS,
   so the gate rendered as unstyled markup. This is the whole treatment.

   Everything reads from tokens.css; css_lint.js fails a colour literal here.
   =========================================================================== */

.gate-locked {
  width: min(700px, calc(100% - 2 * var(--ojt-4)));
  margin: var(--ojt-8) auto;
  padding: var(--ojt-10) var(--ojt-8) var(--ojt-8);
  background: var(--ojt-surface);
  border: 1px solid var(--ojt-border);
  border-radius: var(--ojt-radius-xl);
  box-shadow: 0 20px 25px -5px rgba(15, 23, 42, .08), 0 8px 10px -6px rgba(15, 23, 42, .04);
  text-align: center;
}

/* ── Hero: the lock, the heading, the reason ───────────────────────────── */

.gate-locked-hero { display: block; }

.gate-locked-icon {
  width: 88px;
  height: 88px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ojt-pending-soft);
}

.gate-locked-icon i {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ojt-pending-strong);
  color: var(--ojt-on-primary);
  font-size: 1.4rem;
}

.gate-locked-title {
  margin-top: var(--ojt-5);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2rem);
  font-weight: var(--ojt-fw-bold);
  line-height: 1.2;
  color: var(--ojt-text);
}

.gate-locked-subtitle {
  max-width: 520px;
  margin: var(--ojt-3) auto 0;
  font-size: var(--ojt-fs-base);
  line-height: 1.5;
  color: var(--ojt-text-muted);
}

/* ── The pending panel ─────────────────────────────────────────────────── */

.gate-locked-pending {
  margin-top: var(--ojt-6);
  border: 1px solid var(--ojt-border-strong);
  border-radius: var(--ojt-radius-lg);
  overflow: hidden;
  text-align: left;
}

.gate-locked-pending-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ojt-3);
  padding: var(--ojt-3) var(--ojt-5);
  background: var(--ojt-pending-panel);
  border-bottom: 1px solid var(--ojt-border-strong);
  font-size: var(--ojt-fs-xs);
  font-weight: var(--ojt-fw-bold);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ojt-pending);
}

.gate-locked-count {
  font-size: var(--ojt-fs-sm);
  font-weight: var(--ojt-fw-regular);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ojt-text-muted);
}

/* The list replaced a row of chips. Each pending document is one numbered
   line: 01, a document tile, the requirement's own title, its status badge. */
.gate-pending-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gate-pending-row {
  display: flex;
  align-items: center;
  gap: var(--ojt-3);
  padding: var(--ojt-4) var(--ojt-5);
  border-bottom: 1px solid var(--ojt-border);
  background: var(--ojt-surface);
}

.gate-pending-row:last-child { border-bottom: 0; }

.gate-pending-num {
  width: 32px;
  flex: 0 0 32px;
  font-size: var(--ojt-fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ojt-text-subtle);
}

.gate-pending-tile {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ojt-radius-sm);
  background: var(--ojt-pending-tile);
  color: var(--ojt-pending-glyph);
}

.gate-pending-name {
  flex: 1;
  min-width: 0;
  font-size: var(--ojt-fs-base);
  line-height: 1.4;
  color: var(--ojt-text);
}

.gate-pending-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--ojt-2);
  padding: var(--ojt-2) var(--ojt-3);
  border-radius: 9999px;
  background: var(--ojt-pending-soft);
  color: var(--ojt-pending);
  font-size: var(--ojt-fs-xs);
  font-weight: var(--ojt-fw-bold);
  white-space: nowrap;
}

.gate-pending-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ojt-pending-strong);
}

/* A rejected document is a different wait from one never filed, and the gate
   says so: same row, danger tone. */
.gate-pending-badge.is-rejected {
  background: var(--ojt-danger-bg);
  color: var(--ojt-danger);
}

.gate-pending-badge.is-rejected::before { background: var(--ojt-danger); }

/* ── The action ────────────────────────────────────────────────────────── */

.gate-locked-actions { margin-top: var(--ojt-6); }

.gate-locked-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ojt-2);
  min-height: var(--ojt-tap);
  padding: var(--ojt-3) var(--ojt-6);
  border-radius: var(--ojt-radius-sm);
  font-size: var(--ojt-fs-base);
  font-weight: var(--ojt-fw-bold);
  box-shadow: 0 2px 4px rgba(15, 23, 42, .1);
}

@media (max-width: 575px) {
  .gate-locked {
    margin: var(--ojt-4) auto;
    padding: var(--ojt-6) var(--ojt-4) var(--ojt-5);
  }

  .gate-locked-icon { width: 72px; height: 72px; }
  .gate-locked-icon i { width: 46px; height: 46px; font-size: 1.15rem; }

  .gate-pending-row { padding: var(--ojt-3) var(--ojt-4); gap: var(--ojt-2); }
  .gate-pending-num { width: 24px; flex-basis: 24px; }
  .gate-pending-tile { width: 32px; height: 32px; flex-basis: 32px; }
  .gate-pending-name { font-size: var(--ojt-fs-sm); }
}

@media print {
  .gate-locked { box-shadow: none; }
}