/* Formspråk för Tidsdagbok. Låst i uppgift 6 — vy-specifik CSS kommer i senare uppgifter. */

:root {
  --plus: #2e7d4f;
  --neutral: #6b7280;
  --minus: #c0392b;
  --bakgrund: #f7f7f5;
  --yta: #ffffff;
  --text: #1f2328;
  --ram: #e2e2df;
  --accent: #2f5c8a;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bakgrund);
}

button, input, textarea, select {
  font-family: inherit;
  font-size: 1rem;
}

/* --- Sidhuvud --- */

#topp {
  flex: 0 0 auto;
  padding: 0.75rem 1rem;
  background: var(--yta);
  border-bottom: 1px solid var(--ram);
}

#topp h1 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
}

/* --- Innehållsyta --- */

#vy {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem;
}

/* --- Fliknavigering, fast längst ned --- */

#flikar {
  flex: 0 0 auto;
  display: flex;
  background: var(--yta);
  border-top: 1px solid var(--ram);
  padding-bottom: env(safe-area-inset-bottom);
}

#flikar button {
  flex: 1 1 0;
  min-height: 48px;
  padding: 0.4rem;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
}

#flikar button.aktiv {
  color: var(--accent);
  font-weight: 600;
}

/* --- Knappar generellt --- */

button {
  min-height: 48px;
  padding: 0 1rem;
  border: 1px solid var(--ram);
  border-radius: 8px;
  background: var(--yta);
  color: var(--text);
  cursor: pointer;
}

button.primar {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.knapp-liten {
  min-height: 48px;
  min-width: 48px;
  padding: 0 0.6rem;
}

/* --- Känsla: färg räcker aldrig ensam, tecknet visas alltid i text också --- */

.kansla-plus,
.kansla-neutral,
.kansla-minus {
  border-left: 4px solid transparent;
  padding-left: 0.75rem;
}

.kansla-plus { border-left-color: var(--plus); }
.kansla-neutral { border-left-color: var(--neutral); }
.kansla-minus { border-left-color: var(--minus); }

/* --- Dialog (modal) --- */

.dialog-bakgrund {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
}

.dialog {
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--yta);
  border-radius: 16px 16px 0 0;
  padding: 1.25rem;
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.2);
  animation: dialog-in 0.2s ease-out;
}

.dialog h2 {
  margin-top: 0;
  font-size: 1.1rem;
}

.dialog-knappar {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}

@keyframes dialog-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@media (min-width: 600px) {
  .dialog-bakgrund {
    align-items: center;
  }
  .dialog {
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  }
}

/* --- Chips (förslag) och taggar (valda) --- */

.chip,
.tagg {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 0.85rem;
  border: 1px solid var(--ram);
  border-radius: 999px;
  font-size: 0.9rem;
  cursor: pointer;
}

.chip {
  background: var(--yta);
  color: var(--text);
}

.tagg {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.taggfalt .taggar,
.taggfalt .forslag {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.taggfalt .taggar {
  margin-bottom: 0.4rem;
}

.taggfalt .forslag {
  margin-top: 0.4rem;
}

.taggfalt input[type="text"] {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0 0.7rem;
  border: 1px solid var(--ram);
  border-radius: 8px;
}

/* --- Tidsfält --- */

.tidsfalt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.tidsfalt input[type="date"],
.tidsfalt input[type="time"] {
  min-height: 48px;
  padding: 0 0.5rem;
  border: 1px solid var(--ram);
  border-radius: 8px;
}

/* --- Dagvy: klocka, poster, känsloknappar --- */

.klocka {
  padding: 1rem;
  margin-bottom: 1rem;
  background: var(--yta);
  border: 1px solid var(--ram);
  border-radius: 12px;
  text-align: center;
}

.klocka.varnar {
  border-color: var(--minus);
}

.post {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.75rem;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.5rem;
  background: var(--yta);
  border: 1px solid var(--ram);
  border-radius: 8px;
  cursor: pointer;
}

.kansloknappar {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.kansloknappar .kanslo {
  font-size: 1.3rem;
  min-width: 56px;
}

/* Postdialogens känsloväljare. Till skillnad från klockkortets rad, där ett
   tryck avslutar direkt, står valet här kvar tills man sparar — och måste
   därför synas. `.vald` sattes redan i dag.js men hade ingen regel alls, så
   markeringen var osynlig och man såg inte vad man klickat på. */
.kanslovalj {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.kanslovalj .kanslo {
  flex: 1;
  font-size: 1.3rem;
}

/* Markeringen får inte vila på färg ensam: valt läge bär en tydlig ram, fetare
   tecken och en bock. outline i stället för border, så att känslans färgade
   vänsterkant (.kansla-plus/-neutral/-minus) blir kvar och inget hoppar i layouten. */
.kanslo.vald {
  outline: 3px solid var(--text);
  outline-offset: -3px;
  font-weight: 700;
}

.kanslo.vald::after {
  content: " ✓";
  font-size: 0.85em;
}

/* Anteckningsfältet hade ingen egen regel och renderades därför i webbläsarens
   standardbredd (cols=20, drygt 180 px) mitt i ett formulär där alla andra fält
   går ut i full bredd. Samma ram och rundning som taggfältets textruta. */
.postformular textarea {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--ram);
  border-radius: 8px;
  resize: vertical;
}

/* .post { border: 1px solid var(--ram) } har samma specificitet (0,1,0)
   som .kansla-plus/-neutral/-minus { border-left-color: ... } och står
   senare i filen — den vann tyst över känslokantens färg och bredd (4px
   blev 1px grå). En kombinerad selektor med högre specificitet (0,2,0)
   vinner alltid, oavsett ordning. */
.post.kansla-plus { border-left: 4px solid var(--plus); }
.post.kansla-neutral { border-left: 4px solid var(--neutral); }
.post.kansla-minus { border-left: 4px solid var(--minus); }

/* --- Veckovy --- */

.veckorad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.veckorad h2 {
  flex: 1 1 auto;
  margin: 0;
  font-size: 1.05rem;
  text-align: center;
}

.veckotabell-yta {
  overflow-x: auto;
}

/* table-layout: fixed gäller alltid (inte bara på telefon och i utskrift)
   så att alla sju dagar får plats sida vid sida även på en vanlig
   datorskärm — det är hela poängen med veckovyn. En <colgroup>
   (ritaColgroup() i vecka.js) styr breddfördelningen; den har högre
   prioritet i fixed-layout-algoritmen än en colspan-cells jämna delning,
   vilket gör att varje underkolumn kan få precis den bredd den behöver
   (se viktningen nedan) istället för en jämn fjärdedel var. */
.veckotabell {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

/* Varje kolumn får exakt vad DEN kräver, inget mer:
   - Tid: bredden ett klockslag ("08:00") kräver på en rad, inte bredare.
   - Känsla: rubrikordet "Känsla" är den styrande faktorn (bredare än
     själva datat, som bara är ett tecken) — kan inte göras smalare utan
     att rubriken bryts, vilket inte är tillåtet.
   - Vem: rubriken kortad till "Vem" (se vecka.js) plus en liten marginal
     för data — mellan Tid och Vad i bredd.
   - Vad: allt som blir över. Det är den enda kolumnen med löptext, så
     den ska dominera.
   Tid+Känsla äter ensamma över 45 % av dagens bredd (två korta ord som
   ändå inte får bli smalare), vilket sätter ett hårt tak för hur mycket
   Vad kan växa utan att typsnittet krymps (se font-size nedan). */
.kol-tid { width: 3.0500%; }
.kol-vad { width: 4.5357%; }
.kol-vem { width: 3.3000%; }
.kol-kansla { width: 3.4000%; }

.veckotabell th {
  border: 1px solid var(--ram);
  /* Smalare sidopadding än td: rubrikorden är korta men får inte brytas
     (se .underrubrik nedan) — varje sparad pixel i padding är en pixel
     mer åt kolumnens ordbredd. */
  padding: 2px 2px;
  background: var(--yta);
  font-size: 11px;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: break-word;
}

.veckotabell th.idag {
  background: #eaf1f8;
}

.veckotabell th.underrubrik {
  font-weight: 400;
  color: var(--neutral);
  /* Tid, Vad, Vem och Känsla ska alltid stå på en rad — en sönderbruten
     rubrik är sämre än en kortare (därav "Vem" istället för "Vem/vilka",
     se vecka.js). Kolumnerna är breddade för att faktiskt rymma orden;
     nowrap är ett bälte-och-hängslen-skydd mot att någon framtida
     ändring gör dem för smala igen utan att det syns direkt. */
  white-space: nowrap;
}

.veckotabell td {
  border: 1px solid var(--ram);
  font-size: 11px;
  padding: 3px 3px;
  vertical-align: top;
  /* Riktig avstavning på svenska stavelsegränser (html har lang="sv") i
     första hand — bryter "Rapport-skrivning" vettigt istället för var
     som helst. overflow-wrap/word-break är bara sista utväg för ord som
     inte får plats ens med en avstavningspunkt (t.ex. om kolumnen ändå
     är smalare än en enda stavelse). */
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: break-word;
}

.veckotabell td.tom {
  color: var(--ram);
}

/* Tidscellen: start och slut på var sin rad (aldrig "08:00–09:30" på en
   rad där bindestrecket blir en godtycklig brytpunkt mitt i klockslaget).
   white-space: nowrap på varje del garanterar att "08:00" i sig aldrig
   bryts — kolumnen är breddad (se .kol-tid) för att rymma det. En tunn
   linje mellan raderna håller den visuella kopplingen mellan tiderna. */
.veckotabell td.cell-tid {
  padding: 2px 3px;
  hyphens: none;
}

.cell-tid-start,
.cell-tid-slut {
  display: block;
  white-space: nowrap;
}

.cell-tid-start {
  /* var(--neutral) istället för var(--ram): den ljusa rutlinjefärgen syns
     knappt mot vitt papper i utskrift. */
  border-bottom: 1px solid var(--neutral);
  padding-bottom: 1px;
  margin-bottom: 1px;
}

.veckotabell td.cell-kansla {
  padding: 2px 2px;
  text-align: center;
}

/* Samma specificitetsfälla som .post (se ovan): .veckotabell td
   { border: 1px solid var(--ram) } är mer specifik (0,1,1) än
   .kansla-plus/-neutral/-minus (0,1,0) och vann tyst över känslokantens
   färg och bredd. .veckotabell td.kansla-plus (0,2,1) vinner garanterat. */
.veckotabell td.kansla-plus { border-left: 4px solid var(--plus); }
.veckotabell td.kansla-neutral { border-left: 4px solid var(--neutral); }
.veckotabell td.kansla-minus { border-left: 4px solid var(--minus); }

.veckotabell tr.summarad td {
  font-weight: 600;
  background: var(--bakgrund);
}

.skriv-ut {
  display: block;
  margin: 0.75rem auto 0;
}

/* Under 700 px: en dag i taget, svep mellan dagarna med scroll-snap.
   Tabellen görs 700 % bred (istället för basregelns 100 %) så varje
   dagblock blir en hel skärmbredd — kolgruppernas relativa viktning
   (kol-tid/-vad/-vem/-kansla) håller sig proportionell oavsett tabellens
   totala bredd. Radhöjden höjs till minst 44 px här — på telefon är
   bredden gott om, så en högre rad kostar inget men ger en ordentlig
   tryckyta för fingret. */
@media screen and (max-width: 700px) {
  .veckotabell-yta {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .veckotabell {
    width: 700%;
  }

  .veckotabell thead tr:first-child th {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* min-height respekteras inte tillförlitligt för tabellcellers radhöjd
     i alla layoutmotorer (bekräftat: gav computed min-height: 44px men
     faktisk renderad höjd 39px). height fungerar däremot som ett golv för
     radhöjden i tabellayout-algoritmen. */
  .veckotabell td {
    height: 44px;
  }
}

/* --- Analysvy --- */

.periodval {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

/* Datumfälten för "Egen period". Wrap gör att de lägger sig under varandra
   på telefon i stället för att klämmas ihop; samma ram och höjd som
   postdialogens tidsfält, så att appen ser ut som en app. */
.egenperiod {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.egenperiod label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.9rem;
}

.egenperiod input[type="date"] {
  min-height: 48px;
  padding: 0 0.5rem;
  border: 1px solid var(--ram);
  border-radius: 8px;
}

.chip.vald {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.periodsumma {
  margin: 0 0 0.5rem;
  font-weight: 600;
}

.balansrad {
  margin: 0 0 1rem;
}

.balansrad span {
  margin-right: 12px;
  font-variant-numeric: tabular-nums;
}

.analysblock {
  margin-bottom: 1.5rem;
}

.analysblock h2 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.analysrad {
  margin-bottom: 0.5rem;
}

.analysrad-topp {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2px;
  font-size: 0.9rem;
}

.analysrad-tid {
  color: var(--neutral);
  font-variant-numeric: tabular-nums;
}

.monsterrad {
  display: grid;
  grid-template-columns: 3rem 1fr;
  align-items: center;
  gap: 8px;
}

.monster-etikett {
  color: var(--neutral);
  font-size: 0.85rem;
  text-align: right;
}

.stapel {
  display: flex;
  height: 14px;
  background: var(--ram);
  border-radius: 7px;
  overflow: hidden;
}

.stapel .del {
  display: block;
  height: 100%;
}

/* .kansla-plus/-neutral/-minus används redan som vänsterkant på poster
   (border-left + padding-left). Här återanvänds samma klasser som
   stapelfyllning — nollställ kant och padding så de inte krockar. */
.stapel .del.kansla-plus {
  background: var(--plus);
  border: 0;
  padding-left: 0;
}

.stapel .del.kansla-neutral {
  background: var(--neutral);
  border: 0;
  padding-left: 0;
}

.stapel .del.kansla-minus {
  background: var(--minus);
  border: 0;
  padding-left: 0;
}

.stapel .del.tom {
  background: transparent;
}

/* --- Utskrift --- */

/* --- Inställningsvy --- */

/* Syns tydligt utan att skrika: varm men dämpad amberton, tunn ram plus en
   kraftigare vänsterkant — samma mönster som känslokanten på .post, men i
   en egen färg så den inte kan förväxlas med "-"-känslan. */
.paminnelse {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  background: #fdf3e0;
  border: 1px solid #e3b04b;
  border-left: 4px solid #b9790a;
  border-radius: 8px;
  font-size: 0.9rem;
}

/* Läsfelet är allvarligare än exportpåminnelsen och ska inte se likadant ut. */
.paminnelse.lasfel {
  background: #fbeceb;
  border-color: #e0a49c;
  border-left-color: var(--minus);
  font-weight: 600;
}

.installningsblock {
  margin-bottom: 1.5rem;
}

.installningsblock h2 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.installningsblock > button {
  margin: 0 0.5rem 0.5rem 0;
}

.installningsblock input[type="file"] {
  display: block;
  min-height: 48px;
  margin-bottom: 0.4rem;
}

.hjalptext {
  margin: 0 0 0.5rem;
  color: var(--neutral);
  font-size: 0.85rem;
}

.fel {
  min-height: 1.2em;
  margin: 0.4rem 0 0;
  color: var(--minus);
  font-size: 0.9rem;
}

.snabbvalslista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tomt {
  color: var(--neutral);
  font-style: italic;
}

/* Farozonen ska läsas som en farozon utan att förlita sig på färgen ensam:
   streckad ram (till skillnad från övriga blocks heldragna/osynliga ram)
   plus en varningssymbol framför rubriken. Knappen får samma streckfria
   men kraftiga ram och fetstil, inte bara röd text. */
.farozon {
  padding: 1rem;
  border: 2px dashed var(--minus);
  border-radius: 8px;
  background: #fdf1f0;
}

.farozon h2::before {
  content: "⚠ ";
}

button.fara {
  border: 2px solid var(--minus);
  color: var(--minus);
  font-weight: 700;
}

button.fara::before {
  content: "⚠ ";
}

@media print {
  #topp,
  #flikar,
  button {
    display: none !important;
  }

  @page {
    size: A4 landscape;
    margin: 10mm;
  }

  /* Skärmvyn är en app-layout med fast höjd: body är 100dvh med
     overflow: hidden och #vy scrollar inuti. Nollställs det inte här blir
     utskriften en BESKÄRNING av det som råkar synas på skärmen — resten av
     dagens rader och summaraden faller bort utan att något indikerar det.
     height: auto + overflow: visible gör innehållet till ett flöde som
     bryter över flera sidor i stället. <thead> upprepas då automatiskt. */
  html,
  body {
    height: auto;
    overflow: visible;
  }

  #vy {
    height: auto;
    overflow: visible;
    padding: 0;
  }

  .veckotabell-yta {
    overflow: visible;
  }

  /* Basregeln ovan (table-layout: fixed; width: 100%; + kolgruppens
     viktade breddar, plus overflow/word-break för radbrytning) gäller
     redan här utan att skrivas om — det är samma teknik som håller hela
     veckan innanför en liggande A4-sida. Bara utskriftens täta
     typsnitt/padding är print-specifikt. */
  .veckotabell th,
  .veckotabell td {
    padding: 2px 3px;
    font-size: 9px;
  }

  body,
  .veckotabell,
  .veckotabell th,
  .veckotabell td {
    background: #ffffff !important;
    color: #000000 !important;
  }

  .veckotabell th,
  .veckotabell td {
    border-color: #000000 !important;
  }

  /* "behållna känslokanter": den blanka border-color-regeln ovan skulle
     annars även svartfärga cell-kanslas vänsterkant, som är själva
     känsloindikatorn — och gav dessutom bara tillbaka FÄRGEN förra
     gången, inte BREDDEN (som fortfarande var 1 px från .veckotabell td).
     En pixelskanning av den genererade PDF:en visade noll färgade pixlar.
     border-left som fullständig genväg (bredd+stil+färg) med !important
     och en mer specifik selektor vinner garanterat tillbaka båda. */
  .veckotabell td.kansla-plus {
    border-left: 4px solid var(--plus) !important;
  }

  .veckotabell td.kansla-neutral {
    border-left: 4px solid var(--neutral) !important;
  }

  .veckotabell td.kansla-minus {
    border-left: 4px solid var(--minus) !important;
  }
}