/* klasserom-kort.css - v1.1.0
   Landingskorta i Klasserommet. Brukt av classroom.html saman med
   klasserom-kort.js. Miniatyrane arvar .nl2-blokk frå plakat-motor. */

/* ===== Klasserommet: landingskorta =====
   Eitt kort per ting læraren kan lage. Same kortkjensle som resten av
   sida: kvit flate, mjuk skugge, blå kant når musa er over. */
.rom-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}
.rom-kort {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    text-align: left;
    background: #fff;
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 18px 16px 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.rom-kort:hover, .rom-kort:focus-visible {
    border-color: #4a90e2;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
    transform: translateY(-2px);
    outline: none;
}
/* Kvart kort viser ei lita utgåve av det læraren faktisk får, teikna med
   klassa sine eigne namn. Ein flat ikonknapp seier «utskrift»; dette seier
   kva slags utskrift. Miniatyren er ikkje eit bilete: det er same markup
   som arket, skalert ned, så han kan aldri kome i utakt med resultatet. */
.rom-mini {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 9px;
    overflow: hidden;
    background: #f5f8fa;
    box-shadow: inset 0 0 0 1px rgba(15, 40, 70, .09);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rom-kort:hover .rom-mini { box-shadow: inset 0 0 0 1px rgba(74, 144, 226, .35); }
/* Startposisjon. romSkalerMini() set top/origin/transform på nytt ut frå
   formatet på arket, så eit ståande ark ikkje endar som eit frimerke. */
.rom-mini .nl2-blokk {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center center;
    transform: translate(-50%, -50%) scale(.2);
}
/* Står til miniatyren er teikna, og for kort som ikkje har noko å vise
   (tom klasse). Då er det gamle ikonet framleis eit ærleg svar. */
.rom-ikon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #eaf2fc;
    color: #4a90e2;
    font-size: 24px;
}

/* ----- Handteikna miniatyrar for fanene utan utskriftsmotor ----- */
.rm { position: absolute; inset: 0; padding: 9px 10px; display: flex;
      flex-direction: column; gap: 4px; font-size: 7px; line-height: 1.25;
      color: #33475b; }
/* Elevlista: to spalter som strekkjer seg over heile høgda. */
.rm-liste { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr;
            gap: 3px; width: 100%; flex: 1 1 auto; min-height: 0; }
.rm-rad { display: flex; align-items: center; gap: 4px; background: #fff; min-width: 0;
          border-radius: 3px; padding: 2px 4px; box-shadow: 0 1px 1.5px rgba(0,0,0,.07);
          overflow: hidden; }
.rm-prikk { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
            color: #fff; font-weight: 700; font-size: 5.5px;
            display: flex; align-items: center; justify-content: center; }
.rm-namn { font-weight: 600; font-size: 6.5px; white-space: nowrap;
           overflow: hidden; text-overflow: ellipsis; }
/* Elevplassering: eit foto ovanfrå, ikkje ei teikning. Biletet fyller heile
   boksen (same 16:10 som utsnittet), så kortet ser ut som eit appikon. */
.rm-foto { position: absolute; inset: 0; display: block; }
.rm-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Ordenselev: eit lite rutenett av veker */
.rm-veker { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 1fr;
            gap: 3px; width: 100%; flex: 1 1 auto; min-height: 0; }
.rm-veke { background: #fff; border-radius: 2.5px; padding: 2px 3px; min-width: 0;
           box-shadow: 0 1px 1.5px rgba(0,0,0,.07); overflow: hidden; }
.rm-veke b { display: block; font-size: 5px; color: #90a4ae; letter-spacing: .03em; }
.rm-veke span { display: block; font-size: 5.5px; font-weight: 600;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Ferieveker arvar fargane frå ordenselev-fana (.ht-*), så ein ferie ser
   lik ut same kvar i appen han står. Prikka kant, som i den store planen. */
.rm-veke.ferie { box-shadow: none; border: 1px dashed; padding: 1px 2px; }
.rm-veke.ferie span { font-weight: 600; }
.rm-veke.ht-hoestferie  { background: #fdf1e5; border-color: #eac59c; }
.rm-veke.ht-hoestferie  span { color: #9c5a1e; }
.rm-veke.ht-juleferie   { background: #fceded; border-color: #e6b0b0; }
.rm-veke.ht-juleferie   span { color: #9c2f2f; }
.rm-veke.ht-vinterferie { background: #eaf2f9; border-color: #aecbe3; }
.rm-veke.ht-vinterferie span { color: #2a5f92; }
.rm-veke.ht-paaskeferie { background: #fdf8e4; border-color: #e8d894; }
.rm-veke.ht-paaskeferie span { color: #8a6d16; }
.rm-veke.ht-helligdag   { background: #f3eefa; border-color: #c7b6df; }
.rm-veke.ht-helligdag   span { color: #5b3f85; }
.rm-veke.ht-planlegging { background: #eff2f4; border-color: #c5cfd6; }
.rm-veke.ht-planlegging span { color: #4f5b63; }
/* Grupper: to bobler med medlemmer */
/* Gruppene fyller heile ruta: to rader som strekkjer seg over høgda, så
   boksane blir store nok til at namna er lesbare i staden for å klumpe
   seg i toppen med tom plass under. */
.rm-grupper { display: grid; grid-template-columns: repeat(4, 1fr);
              grid-auto-rows: 1fr; gap: 4px; width: 100%; flex: 1 1 auto; min-height: 0; }
.rm-gruppe { background: #fff; border-radius: 4px; padding: 4px 4px 3px; min-width: 0;
             box-shadow: 0 1px 2px rgba(0,0,0,.08); display: flex;
             flex-direction: column; justify-content: flex-start; overflow: hidden; }
.rm-gruppe b { display: block; font-size: 6px; text-transform: uppercase;
               letter-spacing: .03em; margin-bottom: 2.5px; white-space: nowrap;
               overflow: hidden; text-overflow: ellipsis; }
.rm-gruppe span { display: block; font-size: 6.5px; line-height: 1.35; color: #37474f;
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rom-tittel { font-size: 1.02rem; font-weight: 600; color: #1f2937; }
/* Kort som går til ei anna side, ikkje ei fane her */
.rom-kort--lenke { text-decoration: none; }
.rom-pil { font-size: 15px; color: #90a4ae; vertical-align: 1px; margin-left: 2px; }
.rom-tekst { font-size: 0.86rem; color: #607d8b; line-height: 1.45; }

/* ----- Skolestart: sjekklista slik ho står akkurat no ----- */
.rm-ss { justify-content: flex-start; }
.rm-ss-topp { display: flex; align-items: baseline; justify-content: space-between;
              gap: 6px; margin-bottom: 6px; }
.rm-ss-topp b { font-size: 7.5px; color: #16324f; }
.rm-ss-topp span { font-size: 6px; color: #78909c; white-space: nowrap; }
.rm-ss-liste { display: grid; grid-auto-rows: 1fr; gap: 4px; flex: 1 1 auto; min-height: 0; }
.rm-ss-rad { display: flex; align-items: center; gap: 5px; background: #fff;
             border-radius: 3px; padding: 2px 6px; font-size: 7px; font-weight: 600;
             color: #37474f; box-shadow: 0 1px 1.5px rgba(0,0,0,.07); overflow: hidden; }
.rm-ss-hake { font-size: 9px; color: #b0bec5; flex: 0 0 auto; line-height: 1; }
/* Ferdig rad: same grøne som resten av appen bruker for «gjort». */
.rm-ss-rad.ok { background: #f1f8f2; color: #2f6b45; }
.rm-ss-rad.ok .rm-ss-hake { color: #43a047; }