/* ============================================
   rita-lararvy.css
   ============================================
   Lärarens vy över pågående ritningar. Laddas av admin.html och
   dashboard.html tillsammans med rita-lararvy.js.

   Egen fil och inte inline: båda sidorna använder vyn, och en kopia i
   vardera hade glidit isär.
   ============================================ */

.rita-pag { margin: 0 0 18px; }

.rita-pag-rubrik {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-meta);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rita-pag-antal {
  font-size: var(--t-meta);
  color: var(--muted2);
  border: 1px solid var(--border);
  padding: 1px 6px;
  letter-spacing: 0;
}

.rita-pag-fraga {
  font-size: var(--t-liten);
  color: var(--muted2);
  margin: 10px 0 6px;
}

.rita-pag-tom {
  font-size: var(--t-liten);
  color: var(--muted2);
  padding: 10px 0 2px;
}

.rita-pag-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.rita-pag-kort {
  border: 1px solid var(--border);
  background: var(--surface2);
  width: 300px;
  max-width: 100%;
}

.rita-pag-duk {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  cursor: zoom-in;
}

.rita-pag-fot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  border-top: 1px solid var(--border);
}

.rita-pag-namn {
  font-size: var(--t-liten);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rita-pag-tid { font-size: var(--t-meta); color: var(--muted2); white-space: nowrap; }
.rita-pag-tid.klar { color: var(--correct); }

/* Förstoringen ligger på body, aldrig inuti kortet: ett kort kan sitta i ett
   element med backdrop-filter, och då blir det elementet containing block för
   position:fixed. Det var precis den fällan som gjorde elevens helskärm
   479 px bred i stället för 1366. */
.rita-pag-forstoring {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.rita-pag-forstoring-inner {
  background: var(--surface);
  border: 1px solid var(--border);
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
}

.rita-pag-forstoring-rubrik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: var(--t-liten);
  font-weight: 600;
}

.rita-pag-stor { display: block; background: #fff; max-width: 100%; height: auto; }

/* ── Lärarens ritlager ovanpå elevens ritning (rita-redigerare.js) ──
   Ligger på body och aldrig i ett kort: ett kort kan sitta i ett element
   med backdrop-filter, och då blir det elementet containing block för
   position:fixed. */
.lr-ruta { position: fixed; inset: 0; z-index: 9100; background: var(--bg); display: flex; }
.lr-inner { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.lr-toolbar {
  flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 8px 10px; background: var(--surface2); border-bottom: 1px solid var(--border);
}

.lr-duk-wrap {
  flex: 1; overflow: auto; background: #888;
  display: flex; align-items: flex-start; justify-content: center; padding: 8px;
}
.lr-duk-wrap canvas { display: block; background: #fff; cursor: crosshair; }

.lr-fot {
  flex-shrink: 0; display: flex; gap: 10px; align-items: center;
  padding: 10px; background: var(--surface2); border-top: 1px solid var(--border);
}
.lr-rubrik { font-size: var(--t-liten); font-weight: 600; margin-right: auto; }
.lr-zoomgrupp { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-meta); color: var(--muted2); }

/* Lärarlagret som eleven ser det, och miniatyren i rättningsvyn. */
.rita-lager-wrap { position: relative; display: inline-block; max-width: 100%; }
.rita-lager-wrap img { display: block; max-width: 100%; height: auto; }
.rita-lager-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rita-lager-notis { font-size: var(--t-meta); color: var(--accent); margin-top: 3px; }