/* Skole-fremdrift — 2026-08-21. Samme design-tokens som resten av appen
   (--amber/--panel/--border/--bg/--text/--muted fra styles.css), samme
   status-fargene dashbordet allerede bruker (er-gronn/er-gul/er-rod), ikke
   nye farger oppfunnet for én fane. */

/* Samme toppklarering som #trening — MÅ gjentas per fane fordi elementets
   egen id overstyrer .view sin padding. Se trening.css sin kommentar om
   hvorfor: uten denne linja renderer alt under de faste stripene og tapp
   treffer feil element, kun synlig på ekte telefon, ikke i emulering. */
#skole {
  padding: calc(env(safe-area-inset-top) + 145px) 14px calc(env(safe-area-inset-bottom) + 100px);
  display: flex; flex-direction: column; gap: 14px;
  overflow-x: hidden;
}
body.skole-mode .composer { display: none; }

.sk-fag {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.sk-fag-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.sk-fag-kortnavn { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--amber); font-weight: 700; }
.sk-fag-navn { font-size: 15px; color: var(--text); margin-top: 2px; }
.sk-fag-tall { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); font-size: 15px; }

.sk-bar { position: relative; height: 6px; border-radius: 3px; background: var(--bg); overflow: hidden; }
.sk-bar-ferdig, .sk-bar-pagar { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.sk-bar-ferdig { left: 0; background: #7aad80; }
.sk-bar-pagar { background: #f0a940; opacity: 0.7; }

.sk-temaer { display: flex; flex-direction: column; gap: 6px; }
.sk-tema {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border-radius: 10px; background: var(--bg);
}
.sk-status-dot {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--border); background: transparent; padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.sk-status-dot .ti { width: 13px; height: 13px; }
.sk-status-ferdig .sk-status-dot { border-color: #7aad80; background: #7aad8022; color: #7aad80; }
.sk-status-pagaar .sk-status-dot { border-color: #f0a940; background: #f0a94022; color: #f0a940; }

.sk-tema-body { flex: 1; min-width: 0; }
.sk-tema-hd { display: flex; justify-content: space-between; gap: 8px; }
.sk-tema-nr { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.sk-tema-status { font-size: 11px; color: var(--muted); }
.sk-status-ferdig .sk-tema-status { color: #7aad80; }
.sk-status-pagaar .sk-tema-status { color: #f0a940; }
.sk-tema-tittel { font-size: 14px; color: var(--text); margin-top: 1px; }
.sk-tema-pensum { font-size: 12px; color: var(--muted); margin-top: 2px; }

.sk-tema-lenke {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--amber-dim, var(--amber)); color: #1a1204;
}
.sk-tema-lenke .ti { width: 16px; height: 16px; }