/* ==================================================================
   admin.css - Lehrkraftbereich
   ================================================================== */

.wrap { max-width: 1400px; margin: 0 auto; padding: 22px; }

.admin-tabs { display: flex; gap: 8px; margin: 20px 0 22px; flex-wrap: wrap; }
.admin-tabs button {
  padding: 9px 18px; border-radius: 10px; background: transparent; font-size: .9rem;
}
.admin-tabs button.active {
  background: linear-gradient(135deg, rgba(47,216,198,.18), rgba(92,200,255,.12));
  border-color: rgba(47,216,198,.45); color: var(--teal);
}

.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); }

.kpi { text-align: center; padding: 18px; }
.kpi b { display: block; font-size: 2rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi span { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

table.data { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.data th, table.data td { padding: 9px 11px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.data th { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); font-weight: 600; }
table.data tr:hover td { background: rgba(255,255,255,.03); }
table.data .num { font-variant-numeric: tabular-nums; text-align: right; }

.team-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; margin-right: 8px; }
.code-chip {
  font-family: var(--mono); background: rgba(47,216,198,.12); color: var(--teal);
  padding: 3px 9px; border-radius: 7px; letter-spacing: .08em; font-size: .85rem;
}

.sub-card { border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px; background: rgba(6,12,26,.42); }
.sub-card.pending { border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.05); }
.sub-card header { display: flex; gap: 11px; align-items: center; flex-wrap: wrap; margin-bottom: 11px; }
.sub-card .body { font-size: .88rem; line-height: 1.65; color: var(--ink-2); white-space: pre-wrap; }
.sub-card .block {
  margin-top: 11px; padding: 11px 13px; border-radius: 9px;
  background: rgba(2,6,16,.5); border: 1px solid var(--line);
}
.sub-card .block .lbl {
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 5px; font-weight: 600;
}
.sub-card pre { font-family: var(--mono); font-size: .8rem; margin: 0; white-space: pre-wrap; color: var(--lime); }
.sub-card img { max-width: 260px; border-radius: 9px; margin-top: 8px; cursor: zoom-in; }
.sub-card .review { display: flex; gap: 10px; align-items: flex-end; margin-top: 13px; flex-wrap: wrap; }
.sub-card .review .field { margin: 0; }

.ai-nein { color: var(--ok); }
.ai-erklaerung { color: var(--warn); }
.ai-loesung { color: var(--rose); }

.print-row {
  display: flex; align-items: center; gap: 14px; padding: 13px 16px;
  border: 1px solid var(--line); border-radius: var(--r-s); background: rgba(255,255,255,.03);
}
.print-row .when { font-size: .74rem; color: var(--ink-3); }
.print-row .spacer { flex: 1; }

.login-card { max-width: 430px; margin: 12vh auto; padding: 32px; }

.lightbox {
  position: fixed; inset: 0; z-index: 300; background: rgba(3,6,14,.92);
  display: grid; place-items: center; padding: 30px; cursor: zoom-out;
}
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 12px; }

.filter-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filter-row select, .filter-row input { width: auto; min-width: 170px; }