/* --- Vikuáætlun (tímalína), notað á tímatöflu kennara/bekkjar/nemenda ---
   renderWeekEditor() í schedule-common.js setur ".schedule-timeline" flokkinn
   á container-inn sem er teiknað í (áður var þetta bundið við id-ið
   "schedule-days" beint - virkaði bara á síðum sem notuðu nákvæmlega það
   id, t.d. brotnaði það fyrir "Laus tími" töfluna á Fög síðunni sem notar
   annað id). Röð af dálkum: fyrst klukkuásinn (.time-axis-card), svo einn
   .day-card á hvern dag. Hver .blocks-container hefur fasta hæð (sett í JS
   út frá tímabilinu sem taflan spannar) og kubbarnir innan hennar eru
   staðsettir með position:absolute í hlutfalli við klukku - sjá
   repositionRow() í schedule-common.js. */
.schedule-timeline {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 1.5rem 0;
  overflow-x: auto;
}

.day-card {
  /* position:relative þarf til að .day-priority-gutter (litarákin sem
     birtist meðan dregið er, sjá "Lóðrétt litarák" hér fyrir neðan) geti
     staðsett sig NÁKVÆMLEGA í jaðri/spássíu ÞESSA dagkorts, óháð
     .blocks-container-inu sjálfu - sjá þann kafla fyrir útskýringu.
     z-index:0 hér BÝR TIL nýtt stöflunar-samhengi ("stacking context")
     BUNDIÐ VIÐ ÞETTA EINA dagkort - nauðsynlegt svo breiða "leyfð svæði"
     yfirlögnin (.day-allowed-zone-overlay, neikvæður z-index) lendi ÖRUGGLEGA
     FYRIR AFTAN kortin (.block-row) í ÞESSU dagkorti, óháð DOM-röð - án þessa
     myndi neikvæði z-index-inn "sleppa" út fyrir dagkortið sjálft og geta
     lent aftan við ranga hluti annars staðar á síðunni. Dagkortin skarast
     aldrei sjónrænt hvert við annað (liggja hlið við hlið í flex-röð), svo
     þetta hefur engin sýnileg áhrif á neitt annað en röðunina INNAN hvers
     dagkorts. */
  position: relative;
  z-index: 0;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1rem;
  background: #fafafa;
  flex: 1 1 190px;
  min-width: 190px;
}

.day-card h3 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  white-space: nowrap;
}

.blocks-container {
  position: relative;
}

/* Klukkuás vinstra megin - endurnýtir .day-card útlitið (sama padding/h3)
   svo klukkustundamerkin lendi á nákvæmlega réttri hæð miðað við
   dagadálkana, án bakgrunns/ramma. */
.time-axis-card {
  flex: 0 0 42px;
  min-width: 42px;
  background: none;
  border: none;
  padding-left: 0;
  padding-right: 0;
}

.time-axis-track {
  position: relative;
  border-right: 1px solid #ddd;
}

.time-axis-label {
  position: absolute;
  right: 6px;
  transform: translateY(-50%);
  font-size: 0.7rem;
  color: #888;
  white-space: nowrap;
}

/* Hver .block-row er einn "tími" - stílað sem kort með lituðum vinstri
   kanti svo auðvelt sé að sjá í fljótu bragði hvar einn tími endar og
   annar byrjar. Staðsetning/hæð kemur frá JS (position:absolute), en
   litur kantsins/bakgrunnsins kemur frá status-graent/status-gult/
   status-raett flokkunum (sjá base.css) sem JavaScript setur á row-ið
   sjálft eftir forgangi/stöðu, ekki bara á spinnerinn. Þegar engin staða á
   við (t.d. tímatafla kennara) er kanturinn hlutlaust grár.

   Kubburinn hefur tvö ástand:
   - samandregið (sjálfgefið): bara .block-summary sést, hæðin er í
     hlutfalli við lengd tímans (sjá repositionRow() í schedule-common.js)
     svo yfirlit dagsins líkist dagatali. overflow:hidden svo innihaldið
     flæði ekki út fyrir litlu hæðina.
   - opið (.expanded): .block-details sést í staðinn, hæðin verður sjálf-
     virk (auto) svo öll formreitir komist fyrir. overflow:visible og
     hærra z-index/skuggi lyfta kubbnum upp yfir nágranna á meðan hann er
     opinn, enda skarast hann þá oft við þá við hlið tímans. */
.block-row {
  position: absolute;
  left: 0;
  right: 0;
  box-sizing: border-box;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e3e3e3;
  border-left: 5px solid #ccc;
  border-radius: 6px;
  transition: border-left-color 0.15s ease, background-color 0.15s ease, top 0.1s ease, height 0.1s ease, box-shadow 0.15s ease;
}

.block-row.expanded {
  overflow: visible;
  z-index: 5;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
}

/* Sett á öll tímabil sem skarast tímalega við eitthvert annað í sama dálki
   (sjá updateOverlapHighlights() í schedule-common.js). Rauð, strikuð
   umgjörð + rákótt mynstur svo þetta sjáist skýrt jafnvel þótt kubburinn sé
   hulinn undir öðrum (þá sést a.m.k. sá hluti sem stendur upp úr, eða
   viðvörunartáknið á kubbnum sem liggur ofan á - sjá .block-summary-warning). */
.block-row.overlap {
  border: 2px dashed #c62828;
}

/* z-index bara þegar samandregið - þegar opið (.expanded) á hærra z-index
   þeirrar reglu alltaf að ráða, óháð skörun. */
.block-row.overlap:not(.expanded) {
  z-index: 2;
}

.block-row.overlap:not(.expanded) .block-summary {
  background: repeating-linear-gradient(
    45deg,
    rgba(198, 40, 40, 0.16),
    rgba(198, 40, 40, 0.16) 6px,
    rgba(198, 40, 40, 0.05) 6px,
    rgba(198, 40, 40, 0.05) 12px
  );
}

/* Óvirkt "bakgrunnslag" (t.d. stundatafla bekkjar á nemendasíðunni) - bara
   til viðmiðunar, alls ekki smellanlegt/breytanlegt. Gagnsætt (opacity) og
   engin bendill-/hover-hegðun (pointer-events:none) undirstrikar að þetta
   er ekki hluti af sjálfu eyðublaðinu. */
.block-row-readonly {
  opacity: 0.55;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  padding: 0.15rem 0.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  /* Skólalitur kortsins (sjá --school-bg í createReadOnlyBlockRow í
     schedule-common.js) - lesin hér í staðinn fyrir að setja
     background-color beint sem inline stíll á kortið, svo
     .block-row-guide-active (gula "smellt/fast" litunin, meiri sértækni:
     TVEIR flokkar hér á móti EINUM) vinni rétt yfir þegar kort er
     smellt/fast, í stað þess að skólaliturinn hindri hana alveg (inline
     stíll myndi annars ALLTAF vinna, óháð sértækni - sjá athugasemdina í
     JS-inu). Sjálfgefið hvítt (#fff, sama og .block-row) þegar ekkert
     skólalitað kort á í hlut. */
  background-color: var(--school-bg, #fff);
}

/* Mjó, lítt áberandi scrollrák (Chrome/Edge/Safari - Firefox notar
   scrollbar-width: thin hér fyrir ofan) - kortin eru oft mjög lítil svo full
   breidd scrollrákar myndi taka of mikið pláss. */
.block-row-readonly::-webkit-scrollbar {
  width: 4px;
}

.block-row-readonly::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 2px;
}

/* Þegar óvirki kubburinn er EINA innihald töflunnar (ekki bakgrunnslag undir
   breytanlegum kubbum) á hann ekki að vera daufur - t.d. "Laus tími" og
   "Kennslustundatafla" (sjá `solid` í createReadOnlyBlockRow). */
.block-row-readonly.block-row-readonly-solid {
  opacity: 1;
}

/* Yfirskrifar pointer-events:none á "solid" töflum þar sem hver kubbur á
   samt að vera smellanlegur (sjá `onClick` í createReadOnlyBlockRow) - t.d.
   Kennslustundatafla síðan þar sem smellt er á kubb til að sjá stundatöflu
   nemandans sem átti tímann. Létt hover/fókus-svörun svo það sjáist að
   kubburinn er raunverulega smellanlegur, ekki bara upplýsandi. */
.block-row-readonly.block-row-readonly-clickable {
  pointer-events: auto;
  cursor: pointer;
}

.block-row-readonly.block-row-readonly-clickable:hover {
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.25);
}

.block-row-readonly.block-row-readonly-clickable:focus {
  outline: 2px solid var(--theme-primary);
  outline-offset: -2px;
}

/* Vafið (var áður ein lína með "..." endi) svo textinn - t.d. nafn nemanda
   eða meðlimalisti hóps - sjáist í kortinu sjálfu. Ef hann kemst samt ekki
   allur fyrir (langur meðlimalisti, stuttur tími) sést afgangurinn með
   scroll í .block-row-readonly í stað þess að skerast af - kortið sjálft
   breytir ALDREI um stærð, sjá athugasemd þar. */
.block-readonly-label {
  font-size: 0.62rem;
  line-height: 1.2;
  color: #444;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Skilur eftir pláss hægra megin fyrir lása-takkann (sjá
   .block-readonly-lock-btn - top:2px/right:2px, ~16px breiður), sett á
   kortið sjálft í createReadOnlyBlockRow ÞEGAR lása-takki er til staðar -
   annars flæðir tímatextinn undir takkann á mjóum kortum, að beiðni
   notanda. */
.block-row-readonly-has-lock .block-readonly-label {
  padding-right: 17px;
}

/* Hóptímar/sönghópar (sjá createReadOnlyBlockRow í schedule-common.js) -
   feitletrað svo þeir greinist strax í sundur frá einstaklingstímum, að
   beiðni notanda. */
.block-readonly-label-bold {
  font-weight: 700;
}

/* "Hér smelltir þú" merkið - gult kort ofan á persónulegu stundatöflunni
   sem birtist fyrir neðan þegar smellt er á kubb í "Stundatafla (öll
   vinnutímaplön)" (sjá renderStudentScheduleInto í teaching-schedule.js) -
   sýnir nákvæmlega hvar (dagur + tími) sá kubbur liggur í viku nemandans/
   hópsins. pointer-events: none svo það trufli aldrei að lesa/smella á
   sjálfa laus-tíma línuna undir - þetta er bara sjónræn staðsetningarhjálp,
   aldrei sjálft smellanlegt/draganlegt. Að beiðni notanda: "fá gullt time
   card í þá stundatöflu til að staðsetja mig hvar ég smellti í efri
   töflunni." */
.schedule-click-marker {
  background: rgba(255, 193, 7, 0.32);
  border: 2px dashed #b8860b;
  border-left: 5px solid #b8860b;
  pointer-events: none;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.schedule-click-marker .block-readonly-label {
  color: #6b4e00;
  font-weight: 700;
}

/* Lása-takki (🔒/🔓) á einstökum kubbum í loka Kennslustundatöflunni (sjá
   onReadOnlyBlockLockToggle í schedule-common.js) - núna EINI takkinn á
   kubbnum, staðsettur efst hægra megin þar sem "✏️ Breyta" takkinn var áður
   (sá takki er farinn - að beiðni notanda, "núna dregur maður bara til" -
   drag-and-drop, sjá wireBlockDrag, er núna eina leiðin til að færa tíma).
   pointer-events:auto ÓHÁÐ ástandi umlykjandi kubbs, svo hann virkar alltaf,
   og stopPropagation í handlernum kemur í veg fyrir að smellurinn opni líka
   stundatöflu nemandans (onClick á sama kubbi) eða byrji drag. Læsing kemur
   BARA í veg fyrir drag. */
.block-readonly-lock-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  pointer-events: auto;
  cursor: pointer;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 4px;
  font-size: 0.7rem;
  line-height: 1;
  padding: 1px 3px;
}

.block-readonly-lock-btn:hover {
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

/* Rauður lása-takki þegar tíminn er LÆSTUR - að beiðni notanda: "gert lása
   rauða þegar time card er læst, svo maður sjái betur að spjaldið er
   læst." Ólæstur (🔓) heldur sjálfgefna hvíta útlitinu hér að ofan. */
.block-readonly-lock-btn.locked {
  background: #c62828;
  color: #fff;
}

.block-readonly-lock-btn.locked:hover {
  background: #e53935;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

/* Upphafsstafir skólans (sjá SchoolsController/schools.js) sem faginu á
   bak við kortið tilheyrir - sett HÆGRA megin, RÉTT FYRIR NEÐAN lása-
   takkann (sjá .block-readonly-lock-btn hér fyrir ofan - top:2px + um
   það bil hæð takkans sjálfs), EKKI lengur efst vinstra megin - að beiðni
   notanda: merkið var þar að skarast yfir upphaf tímatextans sjálfs
   (.block-readonly-label, sem byrjar í efra vinstra horninu í venjulegu
   flæði) á mjóum kortum. Sjálfur bakgrunnslitur kortsins er settur beint
   sem inline style (row.style.backgroundColor, sjá getBlockRowStyle í
   teaching-schedule.js/createReadOnlyBlockRow í schedule-common.js) -
   forgangsliturinn (border-left) helst ósnortinn. */
.block-readonly-school-badge {
  position: absolute;
  top: 17px;
  right: 2px;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 4px;
  font-size: 0.6rem;
  font-weight: 600;
  line-height: 1;
  padding: 1px 3px;
  color: #333;
}

/* Draganlegur kubbur (sjá wireBlockDrag í schedule-common.js) - "grab"
   bendill gefur til kynna að hægt sé að draga hann til. Meðan dregið er
   (.dragging, sett/fjarlægt í JS) er hann lyft upp fyrir alla aðra kubba
   (z-index), örlítið gagnsær og með áberandi skugga svo greinilegt sé
   hvaða kubbur er á hreyfingu, líka þegar hann er dreginn yfir í annan
   dagdálk. transition á top/height er tímabundið aftengd meðan dregið er
   svo staðsetningin fylgi músinni samstundis, ekki með 0.1s seinkun. */
.block-row-draggable {
  cursor: grab;
}

.block-row-draggable.dragging {
  cursor: grabbing;
  opacity: 0.75;
  z-index: 50;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  transition: none;
}

/* Kortið sem á ÞESSA STUNDINA "fasta" litarákina (grænt/gult/rautt í
   .day-priority-gutter, sjá pinnedGuideBlock/pinGuideForBlock í
   schedule-common.js) - ljósgulur bakgrunnur svo augljóst sé við hvaða EINA
   kort rákin á, að beiðni notanda: "það time card sem er active verði ljós
   gullt í bakgrunn". .block-row þegar með transition á background-color
   (sjá hér fyrir ofan) svo þetta kemur/fer mjúklega. */
.block-row-readonly.block-row-guide-active {
  background: #fff3c4;
}

/* Viðvörun þegar tvö (eða fleiri) kort í Kennslustundatöflunni skarast
   tímalega í sama dálki, þó ekki nema að hluta (sjá
   updateReadOnlyOverlapHighlights í schedule-common.js) - að beiðni
   notanda: "viðvörun ef eitt spjald er ofan á öðru þó það sé að hluta",
   "sýnilega viðvörun á spjaldi". Rauðleitur bakgrunnur + strikaður kantur
   (kanturinn kemur frá .block-row.overlap hér fyrir ofan, sem gildir líka
   fyrir óvirku kortin enda hafa þau BÆÐI .block-row og .block-row-readonly
   flokkana, sjá createReadOnlyBlockRow) - stendur framar en ljósgula
   "virk rák" litun hér fyrir ofan ef kort er hvort tveggja í einu, enda
   lýsingin hér neðar í skjalinu. Sjálft ⚠ táknið (.block-readonly-warning)
   er annars falið. */
.block-row-readonly.overlap {
  background: #fdecea;
}

.block-readonly-warning {
  display: none;
  flex-shrink: 0;
  font-size: 0.7rem;
  color: #c62828;
  pointer-events: none;
}

.block-row-readonly.overlap .block-readonly-warning {
  display: inline;
}

/* Lóðrétt litarák vinstra megin við kortin sem sýnir - EINGÖNGU MEÐAN dregið
   er einu korti - hvar grænt/gult/rautt er samkvæmt laus-tíma töflu þess
   nemanda/fags sem á kortið sem er á hreyfingu, að viðbættum öðrum LÆSTUM
   kortum sama dags (þau teljast rautt líka - sjá computeDragPriorityGuide í
   teaching-schedule.js og paintPriorityGutters í schedule-common.js).

   Notandi benti á að fyrri útgáfa (rák INNAN .blocks-container, með föstu
   rými ALLTAF frátekið úr .block-row svo kortin hliðruðust ekki til) raskaði
   samt útlitinu lítillega, OG að næsta tilraun (rák með reiknaðri neikvæðri
   `left` inni í .blocks-container) var ENN að ýta töflunni til (líklega af
   því sú staðsetning treysti á að .day-card-ins eigin border/padding-gildi
   væru nákvæmlega þau sem CSS-reglan gerði ráð fyrir). Rákin er því núna
   BEINT BARN sjálfs `.day-card` (búin til/staðsett í `renderWeekEditor` í
   schedule-common.js, EKKI lengur barn `.blocks-container`) - `left: 0` þar
   þýðir "jaðar PÖDDUNARKASSA dagkortsins" skv. CSS-skilgreiningu á
   `position: absolute` (sjá `position: relative` á `.day-card` hér að
   ofan), þ.e. NÁKVÆMLEGA þar sem jaðar (border) dagkortsins er - ekki
   ágiskun/útreikningur, heldur nýtir vafra-vélina sjálfa til að finna
   réttan stað, nákvæmlega eins og litaði kanturinn (border-left) á
   .block-row sjálfu gefur til kynna stöðu ÞESS korts - munurinn er bara SÁ
   að hér er kanturinn á sjálfu DAGKORTINU. `top`/`height` eru sett í JS út
   frá `blocksContainer.offsetTop` (mælt EFTIR að dagkortið er komið inn í
   liðið DOM-tré) svo rákin lendi lóðrétt á nákvæmlega réttum stað miðað við
   tímalínuna, óháð nákvæmri hæð fyrirsagnarinnar (h3) fyrir ofan. Af því
   rákin er algjörlega ÚR FLÆÐI (position: absolute) OG er ALDREI barn
   `.blocks-container`, hefur hún ENGIN áhrif á `.block-row` eða stærð
   `.day-card` sjálfs - kortin haldast því ALVEG óbreytt í stærð/stöðu,
   hvort sem rákin er máluð eða ekki. `overflow: hidden` + `border-radius`
   hér fyrir neðan rúnar endana á RÁKINNI Í HEILD (efst/neðst), í stað þess
   að hvert lita-svæði (segment) rúni sig sjálft í sundur - sjá
   `.day-priority-gutter-segment` hér fyrir neðan. */
.day-priority-gutter {
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  overflow: hidden;
  border-radius: 2px;
  pointer-events: none;
  z-index: 3;
}

.day-priority-gutter-segment {
  position: absolute;
  left: 0;
  right: 0;
}

.day-priority-gutter-segment.status-graent {
  background: var(--color-graent-border);
}

.day-priority-gutter-segment.status-gult {
  background: var(--color-gult-border);
}

.day-priority-gutter-segment.status-raett {
  background: var(--color-raett-border);
}

/* Breiður punktalínu-rammi utan um LEYFÐ svæði (allt sem er EKKI rautt) - að
   beiðni notanda ("Kerfið mætti gera punktalínur utan um leyfð svæði og
   dropa þar") svo það sé auðvelt að miða draginu nákvæmlega inn í rammann í
   staðinn fyrir að reyna að lesa mjóu 4px rákina. Sama staðsetningarkerfi og
   `.day-priority-gutter` (top/height sett í JS út frá `blocksContainer.offsetTop`/
   `trackHeight`), bara full breidd dagkortsins og `pointer-events: none` svo
   hann trufli aldrei smelli/drag á kortunum sjálfum. Neðar í z-index en
   kortin sjálf svo hann sjáist BAK VIÐ þau, ekki ofan á. */
.day-allowed-zone-overlay {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  /* Neikvætt - lendir FYRIR AFTAN kortin (.block-row, z-index:auto/0) innan
     þess nýja stöflunar-samhengis sem .day-card stofnar (sjá athugasemd
     þar) - annars myndi ljósgræna fyllingin/punktalínan liggja OFAN Á
     kortunum sjálfum og gera þau erfiðari aflestrar. */
  z-index: -1;
}

.day-allowed-zone {
  position: absolute;
  left: 3px;
  right: 3px;
  box-sizing: border-box;
  border: 2px dashed var(--color-graent-border);
  border-radius: 4px;
  background: rgba(46, 125, 50, 0.07);
}

/* Samandregna línan - eina sem sést þegar kubburinn er lokaður. Smellanleg
   (opnar kubbinn) og alltaf ein lína há (nowrap + ellipsis) svo hún passi
   inn í lágmarkshæðina (COLLAPSED_MIN_PX). */
.block-summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: 100%;
  padding: 0 0.5rem;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
}

/* Sýnilegur fókus-hringur svo Tab-hopp milli tímakorta sjáist greinilega. */
.block-summary:focus {
  outline: 2px solid var(--theme-primary);
  outline-offset: -2px;
}

.block-row.expanded .block-summary {
  display: none;
}

/* Falið nema tímabilið skarist við annað (sjá .block-row.overlap) - þá
   sést viðvörunartáknið fremst, jafnvel þótt kubburinn sé mjög lágur. */
.block-summary-warning {
  display: none;
  flex-shrink: 0;
  font-size: 0.78rem;
  color: #c62828;
}

.block-row.overlap .block-summary-warning {
  display: inline;
}

.block-summary-time {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #333;
}

.block-summary-label {
  font-size: 0.78rem;
  color: #555;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Fullur ritill - falinn þangað til kubburinn er opnaður. */
.block-details {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  padding: 0.4rem 0.5rem;
}

.block-row.expanded .block-details {
  display: flex;
}

.block-close-btn {
  align-self: flex-end;
  border: none;
  background: var(--color-graent-bg, #e8f5e9);
  color: #2e7d32;
  padding: 0.15rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.78rem;
}

.block-time-range {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.block-row.status-graent {
  border-left-color: var(--color-graent-border);
}

.block-row.status-gult {
  border-left-color: var(--color-gult-border);
}

/* Rautt/Hlé (t.d. "Matartími" og önnur uppteknir tímar kennarans) fá núna
   líka ljósan rauðleitan bakgrunn, ekki bara litaða vinstri röndina - að
   beiðni notanda. --color-raett-bg (#ffebee, sjá base.css) er sama ljósa
   litbrigði og notað er annars staðar í kerfinu fyrir "rautt" - vísvitandi
   ljóst svo textinn haldist auðlesinn. ATH: sett HÉR (compound selector,
   meiri sértækni en bera .block-row) af því .block-row sjálft setur
   "background: #fff" (sjá að ofan) sem annars vinnur yfir base.css-regluna
   fyrir sama eiginleika. Grænt/gult halda sínum hvíta bakgrunni óbreyttum -
   bara rautt breytt, að beiðni notanda. Skólalitur (row.style.backgroundColor,
   sjá getBlockRowStyle) er inline stíll og hefur alltaf forgang fram yfir
   þetta, óháð sértækni. */
.block-row.status-raett {
  border-left-color: var(--color-raett-border);
  background-color: var(--color-raett-bg);
}

.block-row input[type="text"].block-start,
.block-row input[type="text"].block-end {
  padding: 0.25rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 5.5em;
  font-variant-numeric: tabular-nums;
}

.block-row input[type="text"].block-description {
  padding: 0.25rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
}

.block-row input[type="number"].block-duration {
  padding: 0.25rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 4.5em;
}

.block-row .duration-label {
  font-size: 0.85rem;
  color: #666;
}

.block-row select {
  padding: 0.25rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Staflar t.d. "tegund" og "forgang" lóðrétt svo forgangsreiturinn birtist
   fyrir neðan tegundarreitinn í stað þess að þrengja að línunni til hliðar. */
.block-extra-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.remove-block-btn {
  border: none;
  background: none;
  color: #c62828;
  cursor: pointer;
  font-size: 0.8rem;
}

.add-block-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.add-block-btn {
  padding: 0.4rem 0.75rem;
  border: 1px dashed #999;
  background: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
}

.add-block-btn-many {
  border-style: solid;
  border-color: var(--theme-primary);
  color: var(--theme-primary);
}

.inline-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.inline-form input[type="text"],
.inline-form select,
#class-select {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Frjáls upplýsingatexti um nemanda (t.d. sérþarfir) - sjá students.js. */
.notes-box {
  margin-bottom: 1.5rem;
}

.notes-box label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  color: #444;
}

.notes-box textarea {
  display: block;
  width: 100%;
  max-width: 480px;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font: inherit;
  resize: vertical;
  box-sizing: border-box;
  margin-bottom: 0.5rem;
}

/* Hakbox-listi fyrir fög nemanda (sjá students.js) - eitt hakbox á fag. */
.subject-checkbox-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-bottom: 0.5rem;
}

.subject-checkbox-list label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: #333;
  cursor: pointer;
}

.student-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
}

.student-link {
  padding: 0.5rem 0.9rem;
  border: 1px solid #ccc;
  border-radius: 20px;
  background: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  font-family: inherit;
}

.student-link:hover {
  background: #f0f0f0;
}

/* Nemendur í völdu fagi (Fög síðan) - lóðréttur listi, einn nemandi á línu
   (ólíkt .student-list sem er láréttur pillu-listi) - fjöldinn er sagður í
   fyrirsögninni fyrir ofan, sjá subjects.js. */
.subject-students-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.subject-students-list .student-item {
  padding: 0.35rem 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 0.9rem;
}

/* Tveggja dálka útlit á Fög síðunni - fagalistinn vinstra megin, og
   nemendayfirlitið fyrir valda fagið hægra megin við hann (sjá
   subjects.ejs/subjects.js). Fellur niður í eina línu á mjóum skjá. */
.subjects-layout {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}

.subjects-layout-list {
  flex: 0 1 420px;
}

.subjects-layout-detail {
  flex: 1 1 260px;
  min-width: 240px;
}

/* Notað EINGÖNGU á Vinnutíma töflur síðunni (work-schedules.ejs), TIL
   VIÐBÓTAR við .subjects-layout sjálft - staflar listanum og völdu
   töflunni LÓÐRÉTT (listinn efst, taflan fyrir neðan) í stað hlið-við-hlið
   eins og á Fög síðunni (sem notar .subjects-layout eitt og sér, óbreytt -
   þessi klasi breytir ENGU þar). */
.subjects-layout-stacked {
  flex-direction: column;
}

.subjects-layout-stacked .subjects-layout-list,
.subjects-layout-stacked .subjects-layout-detail {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

/* Listi af fögum (Fög síðan) - ein lína á fag: nafnið vinstra megin
   (smellanlegt - opnar nemendayfirlit fyrir fagið), penna-hnappur hægra
   megin (opnar nafnbreytinga-modal, sjá subjects.js). */
.subject-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  max-width: 420px;
}

.subject-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.25rem;
  border-bottom: 1px solid #eee;
}

.subject-row:last-child {
  border-bottom: none;
}

.subject-name-btn {
  flex: 1;
  text-align: left;
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  font-size: 0.95rem;
  font-family: inherit;
  color: #222;
}

.subject-name-btn:hover {
  color: var(--theme-primary);
}

.icon-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 0.25rem 0.4rem;
  border-radius: 4px;
}

.icon-btn:hover {
  background: #f0f0f0;
}

/* Skólar síðan (schools.js) - endurnýtir .subject-list/.subject-row/
   .icon-btn hér fyrir ofan, bætir bara litapunkti + upphafsstöfum framan
   við nafnið. */
.school-row-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  padding: 0.25rem;
  font-size: 0.95rem;
  color: #222;
}

.school-color-dot {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

/* Listi yfir (nemandi, fag) skráningar sem reikniritið gat EKKI raðað í
   kennslustundatöflunni - sjá teaching-schedule.ejs/teaching-schedule.js.
   Sama einfalda mynstur og .subject-students-list. */
.unplaced-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.unplaced-list .unplaced-item {
  padding: 0.35rem 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 0.9rem;
}

.unplaced-item .unplaced-reason {
  display: block;
  color: #a33;
  font-size: 0.85rem;
}

/* "Kortið" á hverju óraðaða atriði (sjá renderTeachingSchedule í
   teaching-schedule.js) - ÞETTA er það sem er gert draganlegt INN Á
   dagatöfluna (sjá attachExternalDrag í schedule-common.js), ekki allt
   <li>-ið (svo maður þurfi ekki að draga í kringum ástæðutextann líka).
   Sjálfstætt "chip" sem lítur út eins og lítið tímakort. */
.unplaced-item-card {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  cursor: grab;
  font-size: 0.85rem;
}

.unplaced-item-card:active {
  cursor: grabbing;
}

.unplaced-item-card-label {
  color: #222;
}

.unplaced-item-card-duration {
  color: #888;
  font-size: 0.75rem;
}

/* Meðan borðið er LÆST (sjá tableLockBtn) er ekkert kort draganlegt - sýnt
   greinilega hérna líka svo notandinn viti strax að hann þarf að "Aflæsa"
   fyrst (sjá title-eigindið sem er sett samtímis í JS). */
.unplaced-item-card-disabled {
  cursor: not-allowed;
  opacity: 0.6;
  background: #f5f5f5;
}

/* "Óraðaðir nemendur" kort BEINT í mánudags dálknum sjálfum, kl. 16:30-17:00
   (UNPLACED_STACK_START_MIN/END_MIN, ÖLL á nákvæmlega sama stað ef mörg eru
   - sjá renderTeachingSchedule í teaching-schedule.js). Kortin sjálf nota nú
   þegar .block-row/.block-row-readonly/.block-row-readonly-solid flokkana
   (sama útlit og ALVÖRU úthlutaðir tímar - að beiðni notanda: "birtist í
   töflunni eins og öll hin spjöldin"), svo litunin/rammann hér er bara
   "borðið er LÆST" ástandið - sama hugmynd og .unplaced-item-card-disabled
   hér að ofan hafði fyrir gömlu hliðarlistakortin. */
.unplaced-grid-card-disabled {
  cursor: not-allowed;
  opacity: 0.6;
  background: #f5f5f5;
}

.unplaced-hint {
  color: #666;
  font-size: 0.85rem;
}

/* Fljótandi eftirmyndin sem fylgir músinni meðan óraðað kort er dregið (sjá
   attachExternalDrag) - klón af sjálfu .unplaced-item-card, bara lyft upp
   fyrir allt annað og með greinilegum skugga. */
.external-drag-ghost {
  z-index: 200;
  opacity: 0.9;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

/* Dagdálkur sem músin er yfir MEÐAN óraðað kort er dregið (sjá
   setHoveredContainer í attachExternalDrag) - sama græna/þema-lita
   punktalína og notuð er annars staðar til að merkja "hér lendir þetta". */
.blocks-container.external-drop-hover {
  outline: 2px dashed var(--theme-primary);
  outline-offset: -2px;
}

/* "Óraðaðir nemendur" kortið sjálft MEÐAN kort úr sjálfri töflunni er dregið
   yfir það (sjá unplaceDropZoneEl/onReadOnlyBlockUnplace í
   schedule-common.js) - rautt til að gefa til kynna að sleppt hér ÞÝÐI að
   tíminn fari ÚR töflunni, ólíkt bláu/þema-litnu merkingunni fyrir venjulega
   dagdálka hér að ofan. */
.unplace-drop-hover {
  outline: 2px dashed #c62828;
  outline-offset: -3px;
  background: rgba(198, 40, 40, 0.07);
  border-radius: 8px;
}

/* "Stundatafla nemanda" hlutinn á Kennslustundatafla síðunni (sjá
   #student-detail-section í teaching-schedule.ejs) - birtist þegar smellt er
   á tíma í kennslustundatöflunni. Flipar (tabs) eru aðeins sýndir þegar
   smellt er á sönghóp (Hóptími) - einn flipi á hvern skráðan nemanda. */
.student-detail-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0 1rem;
}

.student-detail-tab {
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.student-detail-tab:hover {
  background: #f0f0f0;
}

.student-detail-tab.active {
  background: var(--theme-primary);
  border-color: var(--theme-primary);
  color: #fff;
  font-weight: 600;
}

/* Almennir "flipar" (tabs, .tab-bar/.tab-btn) eru fluttir í ui-kit.css -
   sameiginlega "cards og tabs" hönnunarkerfið sem gildir um allar síður
   (sjá ui-kit.css). Notað t.d. fyrir "Veldu skóla" -> bekkja-flipa á
   Stundatafla bekkjar síðunni (sjá class-schedule.js/renderClassTabs). */

/* Hakbox-dálkarnir á Kennslustundatafla síðunni (sönghópar/einstaklings-
   námsnemendur sem eru merktir við völdu vinnutímatöfluna) - hlið við hlið
   á breiðum skjá, undir hvor öðrum á mjóum. */
.checkbox-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 0.75rem 0 1rem;
}

.checkbox-columns > div {
  flex: 1 1 240px;
  min-width: 200px;
}