/* Schematabellen, panelen, avvikelserna, kodlistan och månadskalendern.
   Färg bär aldrig informationen ensam: S, K och FM står kvar i cellen. */

/* Verktygsraden: fönstret med pilarna, massinläggningen och
   teckenförklaringen. Den är positionerad så att massinläggningens formulär
   kan fällas ut under hela raden. */
.schemaverktyg { position: relative; }

.fonster {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--s2) var(--s3);
}

.pil { padding: var(--s1) var(--s2); }
.pilikon { display: block; }

/* Massinläggningen: summary-raden är knappen, och formuläret är ett lager
   under verktygsraden. z-index 4 ligger över tabellens fästa rubriker (1–3)
   och under flikraden (5). */
details.bulk { align-self: end; }
details.bulk summary { list-style: none; }
details.bulk summary::-webkit-details-marker { display: none; }

details.bulk[open] > form {
  position: absolute;
  top: calc(100% + var(--s1));
  right: 0;
  left: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s3) var(--s5);
  padding: var(--s4);
  background: var(--bakgrund);
  border: 1px solid var(--ram);
  border-radius: var(--radie);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--text) 20%, transparent);
}

@media (min-width: 768px) {
  details.bulk[open] > form {
    grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 1fr) minmax(16rem, 1.5fr);
  }
}

.bulkrutnat > .errorlist { grid-column: 1 / -1; }

.bulkpersoner .falt,
.bulkdagar .falt { margin: 0 0 var(--s2); }

.bulkpersoner select[multiple] { width: 100%; min-height: 12rem; }
.bulkkoder > button { margin-top: var(--s3); }

/* Teckenförklaringen: samma färger och mönster som rutorna. */
.teckenforklaring {
  display: flex;
  flex-wrap: wrap;
  align-self: center;
  gap: var(--s1) var(--s3);
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: var(--dampad);
}

.teckenforklaring li { display: flex; align-items: center; gap: var(--s1); }

.prov {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.25rem;
  padding: 0 2px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
  background: var(--bakgrund);
  border: 1px solid var(--ram);
  border-radius: 2px;
}

/* Schemat har hela bredden. Från 1100 px får cellformuläret en kolumn
   bredvid, men bara när en ruta är vald; under det blir formuläret ett blad.
   Arbetslistan står under tabellen (Markus 2026-09-25). Väljarna frågar
   efter ett element, inte :empty: ett sparsvar av bara hx-swap-oob-element
   kan lämna blanksteg kvar i #cellpanel. */
.planering {
  display: grid;
  gap: var(--s4);
  grid-template-columns: minmax(0, 1fr);
}

.panel:not(:has(> #cellpanel > *)) { display: none; }

@media (min-width: 1100px) {
  .planering:has(#cellpanel > *) {
    grid-template-columns: minmax(0, 1fr) 22rem;
    align-items: start;
  }

  .panel {
    position: sticky;
    top: var(--s4);
    max-height: calc(100vh - 2rem);
    overflow: auto;
  }
}

#cellpanel {
  padding: var(--s4);
  background: var(--bakgrund);
  border: 1px solid var(--ram);
  border-radius: var(--radie);
}

#cellpanel:not(:has(> *)) { display: none; }

.raknare { margin: 0; align-self: center; }
.raknare a { display: flex; gap: var(--s1); text-decoration: none; }
.raknare:not(:has(.marke)) { display: none; }

/* Cellformuläret. Greppet hör bara till bladet. */
.cellformular h3 { margin-top: var(--s2); }
.knappar { display: flex; gap: var(--s2); margin-top: var(--s3); }
.knappar .stang { margin-left: auto; }
.grepp { display: none; }

@media (max-width: 1099px) {
  /* Bladet: fäst i nederkanten. z-index 4 ligger över tabellens fästa
     rubriker (1–3) och under flikraden (5), menyerna (6) och
     snabbinmatningen (10). */
  #cellpanel {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 4;
    max-height: 70vh;
    overflow: auto;
    padding: 0 var(--s4) var(--s4);
    border-width: 1px 0 0;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 16px color-mix(in srgb, var(--text) 25%, transparent);
  }

  .grepp {
    display: block;
    width: 2.5rem;
    height: 4px;
    margin: var(--s2) auto var(--s2);
    border-radius: 2px;
    background: var(--ram-falt);
  }


  /* Den markerade rutan ska kunna rullas fram ovanför bladet, även när
     sidan är kort. Skriptet rullar när formuläret har kommit. */
  html:has(#cellpanel > *) { scroll-padding-bottom: 70vh; }
  body:has(#cellpanel > *) main { padding-bottom: 70vh; }
}

@media (max-width: 767px) {
  #cellpanel { bottom: calc(var(--flikrad) + env(safe-area-inset-bottom)); }

  html:has(#cellpanel > *) {
    scroll-padding-bottom: calc(70vh + var(--flikrad) + env(safe-area-inset-bottom));
  }

  body:has(#cellpanel > *) main {
    padding-bottom: calc(70vh + var(--flikrad) + env(safe-area-inset-bottom));
  }
}

/* Rullrutan gör att rubrikraden och personkolumnen kan fästas. Fönstret
   får vara upp till 90 dagar; utan fästning scrollar man bort både vem
   raden gäller och vilket datum kolumnen är. */
/* Luften i nederkanten är till för rullningslisten: macOS och pekskärmar
   ritar den ovanpå innehållet, och utan luft täckte den sista raden. */
.schemaruta {
  overflow: auto;
  max-height: calc(100vh - 14rem);
  padding-bottom: var(--s4);
  border: 1px solid var(--ram);
  border-radius: var(--radie);
}

.schema table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin: 0;
}

.schema th,
.schema td {
  border-right: 1px solid var(--ram);
  border-bottom: 1px solid var(--ram);
  padding: var(--s1) var(--s2);
  text-align: center;
  white-space: nowrap;
}

.schema thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--yta);
  color: var(--dampad);
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.2;
}

.schema tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bakgrund);
  color: var(--text);
  text-align: left;
  font-weight: 600;
  font-size: inherit;
}

.schema thead th:first-child {
  left: 0;
  z-index: 3;
}

/* Kolumnrubriken: veckodagen över datumet. Helgen tonas redan i rubriken,
   och dagens kolumn får en linje i accent. */
.schema thead th.dag { min-width: 2.5rem; }
.veckodag { display: block; font-weight: 400; }
.schema thead th.helg { background: var(--helg); }
.schema thead th.idag {
  color: var(--text);
  box-shadow: inset 0 -3px 0 var(--accent);
}

/* Personkolumnen: hela namnet på bred skärm, efternamnet under 1100 px.
   Bredden är begränsad så att scroll-margin nedan räcker. */
.schema tbody th {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schema .kortnamn { display: none; }

@media (max-width: 1099px) {
  .schema .helnamn { display: none; }
  .schema .kortnamn { display: inline; }

  .schema tbody th {
    max-width: 7rem;
    box-shadow: 2px 0 4px -2px color-mix(in srgb, var(--text) 30%, transparent);
  }

  .schema td {
    min-width: 40px;
    height: 40px;
  }
}

.schema td { cursor: pointer; }

/* Helgen först, så att ett ledighetsslag på en helgdag vinner. */
.schema td.helg,
.prov.helg { background: var(--helg); }
.schema td.slag-semester,
.prov.slag-semester { background: var(--semester); }
.schema td.slag-komp,
.prov.slag-komp { background: var(--komp); }
.schema td.slag-fm,
.prov.slag-fm { background: var(--fm); font-weight: 600; }

/* En tom dag inom listperioden är oplanerad och ska sticka ut. Utanför
   perioden är en tom dag inget problem och markeras inte. */
.schema td.oplanerad,
.prov.oplanerad {
  background-image: repeating-linear-gradient(
    45deg,
    transparent, transparent 4px,
    color-mix(in srgb, var(--text) 10%, transparent) 4px,
    color-mix(in srgb, var(--text) 10%, transparent) 8px
  );
}

.schema td.avvikelse-fel {
  outline: 2px solid var(--fel);
  outline-offset: -2px;
}

.schema td.avvikelse-varning {
  outline: 2px solid var(--varning);
  outline-offset: -2px;
}

.schema td:hover {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 50%, transparent);
}

/* Diff är talet planeraren arbetar mot noll, som ett märke: rätt vid noll,
   fel över, varning under. En avvikelse på periodnivå ramar in cellen med
   samma regler som rutornas ram ovan. */
.schema td.diff { font-variant-numeric: tabular-nums; }

#avvikelser {
  margin: var(--s4) 0 0;
  padding: var(--s3) var(--s4);
  background: var(--yta);
  border: 1px solid var(--ram);
  border-radius: var(--radie);
}

#avvikelser h2 {
  margin-top: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
}
#avvikelser ul { margin: 0; padding-left: var(--s4); }
#avvikelser li { margin: var(--s1) 0; }
#avvikelser .fel { color: var(--fel); }
#avvikelser .varning { color: var(--varning); }
#avvikelser .info { color: var(--dampad); }
#avvikelser a { color: inherit; }

/* Månadskalendern för en enskild person. Veckodagarna står i samma
   kolumner varje rad, och remsan visar var på dygnet arbetstiden ligger:
   00 är cellens vänsterkant, 24 dess högerkant. */
.kalender {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  margin-bottom: var(--s4);
}

.kalender th {
  text-align: left;
  padding: var(--s1) var(--s2);
  border-bottom: 1px solid var(--ram);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--dampad);
}

.kalender td {
  border: 1px solid var(--ram);
  vertical-align: top;
  padding: var(--s1);
  height: 4.5rem;
}

.kalender td.utanfor { border: none; background: none; }

.kalender td.helg,
.kalender th.helg { background: var(--helg); }

.kalender td.slag-semester { background: var(--semester); }
.kalender td.slag-komp { background: var(--komp); }
.kalender td.slag-fm { background: var(--fm); }

.kalender td.idag {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.kalender .datum { display: block; font-weight: 600; }

/* Remsan är dygnet. Segmenten placeras i procent av den. */
.kalender .remsa {
  display: block;
  position: relative;
  height: 0.5rem;
  margin: var(--s1) 0;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border-left: 1px solid var(--ram);
  border-right: 1px solid var(--ram);
}

.kalender .remsa span {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--accent);
}

/* Ett pass som går över midnatt klipps vid dygnets slut. Den sneda kanten
   säger att det fortsätter, utan att rita samma pass som två staplar. */
.kalender .remsa span.fortsatter {
  background: repeating-linear-gradient(
    90deg,
    var(--accent), var(--accent) 6px,
    color-mix(in srgb, var(--accent) 45%, var(--bakgrund)) 6px,
    color-mix(in srgb, var(--accent) 45%, var(--bakgrund)) 9px
  );
}

.kalender .text {
  display: block;
  font-size: 0.8rem;
  white-space: normal;
}

/* Under 600 px är månadskalendern en lista med en rad per dag, på samma
   HTML: veckodag, datum, remsa och text i en rad. Tomma celler utanför
   månaden och veckodagsraden döljs; raden för en helg eller dagens datum
   behåller sin ton och sin ram. */
@media (max-width: 599px) {
  .kalender thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .kalender,
  .kalender tbody,
  .kalender tr { display: block; }

  .kalender td.utanfor { display: none; }

  .kalender td {
    display: flex;
    align-items: center;
    gap: var(--s3);
    height: auto;
    border-width: 0 0 1px;
    padding: var(--s2) var(--s3);
  }

  .kalender td::before {
    content: attr(data-veckodag);
    flex: 0 0 2rem;
    color: var(--dampad);
    font-size: 0.85rem;
  }

  .kalender .datum { flex: 0 0 1.5rem; text-align: right; }
  .kalender .remsa { flex: 0 0 30%; margin: 0; }
  .kalender .text { flex: 1; min-width: 0; }
}

/* Kodlistan i cellpanelen. Favoriterna först, en rad per kod med tider,
   timtal och rast — skillnaden mellan rast och måltidsuppehåll avgör
   arbetstiden och måste synas i valet. */
.smalnare {
  border-bottom: 1px solid var(--ram);
  padding-bottom: var(--s2);
  margin-bottom: var(--s2);
}

.smalnare .falt { margin: var(--s1) 0; }

.koder h4 {
  margin: var(--s3) 0 var(--s1);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dampad);
}

label.kod {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--s2);
  padding: var(--s2) var(--s3);
  margin-bottom: var(--s1);
  border: 1px solid var(--ram);
  border-radius: var(--radie);
  cursor: pointer;
  line-height: 1.3;
}

.kodrad { font-variant-numeric: tabular-nums; }
label.kod small { grid-column: 2; }

label.kod:hover { border-color: var(--accent); }

label.kod:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bakgrund));
}

.ungefarlig { color: var(--varning); }

.fler {
  font-size: 0.85rem;
  color: var(--dampad);
}

/* Utskriftsvyns tabell; utskrift.css sätter dess papperslook. */
table.utskrift { border-collapse: collapse; }

/* Snabbinmatningen. Den markerade rutan har en tjock ram i accentfärgen som
   syns ovanpå både slagets färg och avvikelsens ram, och därför står reglerna
   sist. scroll-margin håller rutan fri från de fästa rubrikerna när den
   rullas in i bild. */
.schema td {
  scroll-margin: 3rem 0 0 12rem;
}

@media (max-width: 1099px) {
  .schema td { scroll-margin-left: 7rem; }
}

.schema td.markerad {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

/* Ett område: alla rutor har ramen, de utom fokusrutan får en ljus ton och
   fokusrutan en tjockare ram, så att man ser var Tab och fältet utgår. */
.schema td.markerad:not(.fokus) {
  /* Genomskinlig ton ovanpå dagtypens färg, så att man ser vad rutan rymmer. */
  background-image: linear-gradient(
    color-mix(in srgb, var(--accent) 12%, transparent),
    color-mix(in srgb, var(--accent) 12%, transparent)
  );
}

.schema td.fokus {
  outline-width: 4px;
  outline-offset: -4px;
}

.schema td.sparar {
  opacity: 0.5;
}

.schema td.snabbfel {
  background: color-mix(in srgb, var(--fel) 15%, var(--bakgrund));
  outline: 3px dashed var(--fel);
  outline-offset: -3px;
}

.schema td.snabbfel.markerad {
  outline-style: solid;
}

#snabbstatus {
  min-height: 1.2em;
  margin: 0 0 var(--s1);
  color: var(--fel);
}

/* Skriptet sätter fältets höjd efter rutan. Fältens minsta höjd i
   komponenter.css skulle annars göra det högre än rutan det ligger över;
   input i väljaren behövs för att väga lika tungt som den regeln. */
input.snabbfalt {
  position: fixed;
  z-index: 10;
  min-height: 0;
  padding: 0 var(--s1);
  border: 2px solid var(--accent);
  border-radius: 0;
  font: inherit;
}

input.snabbfalt.fel {
  border-color: var(--fel);
  background: color-mix(in srgb, var(--fel) 15%, var(--bakgrund));
}

/* Frågan innan ett område töms. Modal dialog ligger i toppskiktet och
   behöver ingen z-index. */
dialog.snabbfraga {
  padding: var(--s2);
  border: 2px solid var(--fel);
  background: var(--yta);
  color: inherit;
}

.snabbforslag {
  position: fixed;
  z-index: 10;
  min-width: 16rem;
  max-width: 24rem;
  background: var(--bakgrund);
  border: 1px solid var(--ram);
  border-radius: var(--radie);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--text) 20%, transparent);
}

.snabblista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.snabbforslag li {
  padding: var(--s1) var(--s2);
  cursor: pointer;
}

.snabbforslag li.vald {
  background: var(--semester);
}

.snabbforslag small {
  display: block;
  color: var(--dampad);
}

.snabbforslag p {
  margin: 0;
  padding: var(--s1) var(--s2);
}

.snabbforslag .snabbfel {
  color: var(--fel);
}

/* Vad texten tolkades som, när den gav ett entydigt svar. */
.snabbinfo {
  color: var(--dampad);
  font-size: 0.85rem;
}