/* Komponenter och grundstilar för formulär, tabeller och ramen. Dagens
   mallar använder oklassade element; de lyfts här utan att mallarna ändras.
   Nya mallar använder klasserna. Inga färgvärden här, bara variabler. */

/* Ramen: toppfältet. Dess bakgrund har samma färg som accenten i ljust
   läge, så fokusringen i toppfältet tar textens färg i stället. */
.toppfalt {
  display: flex;
  align-items: center;
  gap: var(--s5);
  min-height: 3rem;
  padding: 0 max(var(--s4), env(safe-area-inset-right)) 0 max(var(--s4), env(safe-area-inset-left));
  background: var(--sidhuvud);
  color: var(--sidhuvud-text);
}

.toppfalt a { color: inherit; text-decoration: none; }
.toppfalt :focus-visible { outline-color: currentColor; }

/* Får ge vika för menyn och användarnamnet i det smala intervallet strax
   över mobilbrytpunkten, i stället för att tvinga fram sidledsrullning. */
.appnamn {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
}
.sidnamn { display: none; font-weight: 600; }

.huvudmeny {
  display: flex;
  align-self: stretch;
  gap: var(--s4);
}

/* Linjen under aktiv sida. Den genomskinliga ovanför håller texten centrerad.
   white-space stoppar radbrytning: annars ökar toppfältets höjd i det smala
   intervallet mellan flikradens brytpunkt och menyns plats. */
.huvudmeny a {
  display: flex;
  align-items: center;
  white-space: nowrap;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
}

.huvudmeny a:hover { border-bottom-color: color-mix(in srgb, currentColor 40%, transparent); }
.huvudmeny a[aria-current="page"] { border-bottom-color: currentColor; font-weight: 600; }

/* Menyer som fälls ut ur <details>: användarmenyn och flikradens Mer. */
.anvandarmeny { position: relative; margin-left: auto; }

/* Långa användarnamn (t.ex. förnamn.efternamn) får inte tvinga fram
   sidledsrullning; namnet krymper hellre med en ellips. */
.anvandarmeny summary {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 10rem;
  min-height: 2.25rem;
  cursor: pointer;
  list-style: none;
}

/* Ellipsen sitter på namnet, inte på summary: text-overflow verkar inte på
   en flexbehållare, och vinkeln ska stå kvar när namnet krymper. */
.anvandarnamn {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.anvandarmeny summary:hover { background: color-mix(in srgb, currentColor 15%, transparent); }
.anvandarmeny summary::-webkit-details-marker { display: none; }

/* En vinkel ritad med kanter; ▾ finns inte i typsnittet. */
.anvandarmeny summary::after {
  content: "";
  flex: none;
  width: 0.4em;
  height: 0.4em;
  margin-left: var(--s2);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
}

.meny {
  position: absolute;
  z-index: 6;
  min-width: 12rem;
  padding: var(--s1) 0;
  color: var(--text);
  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);
}

.anvandarmeny .meny { top: calc(100% + var(--s2)); right: 0; }

.meny form { margin: 0; }

.meny a,
.meny button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: var(--s2) var(--s4);
  font-weight: 400;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: 0;
  text-decoration: none;
}

.meny a:hover,
.meny button:hover { background: var(--yta); }
.meny a[aria-current="page"] { color: var(--accent); font-weight: 600; }
.meny :focus-visible { outline-color: var(--accent); outline-offset: -2px; }

/* Ramen på mobil: flikraden i botten. Den ligger under snabbinmatningens
   fält och förslagslista (z-index 10 i schema.css). */
.flikrad {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  display: none;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--bakgrund);
  border-top: 1px solid var(--ram);
}

.flikrad > a,
.flikrad > form,
.flikrad > details { flex: 1; }

.flikrad > form { margin: 0; }
.mer { position: relative; }

.flikrad > a,
.flikrad summary,
.flikrad > form button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--flikrad);
  padding: 0 var(--s1);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dampad);
  background: transparent;
  border: none;
  border-top: 3px solid transparent;
  border-radius: 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}

.flikrad summary::-webkit-details-marker { display: none; }

.flikrad > a:hover,
.flikrad summary:hover,
.flikrad > form button:hover { background: var(--yta); }

.flikrad > a[aria-current="page"],
.flikrad summary.aktiv {
  color: var(--accent);
  border-top-color: var(--accent);
}

/* Mer fälls uppåt, ur flikraden. */
.mer .meny { right: 0; bottom: calc(100% + var(--s2)); }

@media (max-width: 767px) {
  .flikrad { display: flex; }
  .huvudmeny { display: none; }
  .toppfalt:has(.sidnamn) .appnamn { display: none; }
  .sidnamn { display: block; }

  body:has(> .flikrad) main {
    padding-bottom: calc(var(--flikrad) + env(safe-area-inset-bottom) + var(--s4));
  }

  /* Rutor som rullas fram, som snabbinmatningens, ska inte hamna bakom flikraden. */
  html:has(.flikrad) {
    scroll-padding-bottom: calc(var(--flikrad) + env(safe-area-inset-bottom));
  }
}

main {
  padding: var(--s4) max(var(--s4), env(safe-area-inset-right)) var(--s4)
    max(var(--s4), env(safe-area-inset-left));
  max-width: 100%;
}

/* Knappar. Oklassade knappar är primära, som i dagens formulär. */
button,
.knapp {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-height: 2.25rem;
  padding: var(--s1) var(--s3);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  color: var(--accent-text);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radie);
  cursor: pointer;
  text-decoration: none;
}

button:hover,
.knapp:hover {
  background: color-mix(in srgb, var(--accent) 85%, var(--text));
}

.knapp.sekundar {
  color: var(--accent);
  background: transparent;
}

.knapp.sekundar:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.knapp.diskret {
  color: var(--accent);
  background: transparent;
  border-color: transparent;
}

/* Fält. Samma höjd som knapparna, så att de står i linje i en rad. */
input:not([type="checkbox"], [type="radio"], [type="hidden"]),
select,
textarea {
  min-height: 2.25rem;
  padding: var(--s1) var(--s2);
  font: inherit;
  color: var(--text);
  background: var(--bakgrund);
  border: 1px solid var(--ram-falt);
  border-radius: var(--radie);
}

select[multiple] { min-height: 6rem; }

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent);
  width: 1rem;
  height: 1rem;
}

label { color: var(--text); }

@media (max-width: 767px) {
  button,
  .knapp,
  input:not([type="checkbox"], [type="radio"], [type="hidden"]),
  select,
  textarea,
  :is(.filter, .verktygsrad) label:has(input[type="checkbox"]) {
    min-height: 44px;
  }
}

/* Django skriver fältfel som ul.errorlist. */
.errorlist {
  list-style: none;
  margin: var(--s1) 0;
  padding: 0;
  color: var(--fel);
  font-size: 0.9rem;
}

/* Tabeller. Oklassade tabeller i dagens mallar får samma utseende som
   table.lista. Schemat, kalendern och avtalet har egna regler. */
table.lista,
:where(main table:not([class])) {
  border-collapse: collapse;
  width: 100%;
  margin: var(--s3) 0 var(--s5);
}

table.lista th,
table.lista td,
:where(main table:not([class])) th,
:where(main table:not([class])) td {
  padding: var(--s2) var(--s3);
  text-align: left;
  border-bottom: 1px solid var(--ram);
  vertical-align: middle;
}

table.lista thead th,
:where(main table:not([class])) :is(thead tr, tbody:first-child > tr:first-child) th {
  background: var(--yta);
  color: var(--dampad);
  font-weight: 600;
  font-size: 0.9rem;
}

table.lista td.tal,
table.lista th.tal {
  text-align: right;
}

table.lista th.grupprubrik {
  text-align: center;
  border-bottom: 1px solid var(--ram);
}

/* Kortlistans mobilregler står längre ned; på dator är den en vanlig lista. */
table.kortlista { width: 100%; }

table.lista td.tom { color: var(--dampad); }
table.lista td.namn { font-weight: 600; }
table.lista td.grupp,
table.lista td.period { white-space: nowrap; }
table.lista td.antal,
table.lista td.saldo,
table.lista td.diff { white-space: nowrap; }

table.lista tbody tr:hover,
:where(main table:not([class])) tr:hover td {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

/* Filterraden i dagens mallar är en verktygsrad. */
.verktygsrad,
.filter {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--s2) var(--s3);
  padding: var(--s2) var(--s3);
  margin-bottom: var(--s4);
  background: var(--yta);
  border: 1px solid var(--ram);
  border-radius: var(--radie);
}

.filter label,
.verktygsrad label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.85rem;
  color: var(--dampad);
}

:is(.filter, .verktygsrad) label:has(input[type="checkbox"]) {
  flex-direction: row;
  align-items: center;
  gap: var(--s1);
  color: var(--text);
  font-size: 1rem;
  min-height: 2.25rem;
}

/* Sidrubrik: rubrik, dämpad underrad, åtgärder till höger. */
.sidrubrik {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s1) var(--s4);
  margin-bottom: var(--s4);
}

.sidrubrik h1 { margin: 0; }
.sidrubrik .underrad { margin: 0; color: var(--dampad); }
.sidrubrik .atgarder { margin-left: auto; display: flex; gap: var(--s2); }

@media (max-width: 767px) {
  .sidrubrik .atgarder { margin-left: 0; width: 100%; }
}

/* Märken: diff, status, antal fel. Bakgrunden blandas ur märkets färg mot
   --bakgrund, inte mot genomskinligt: då ser märket likadant ut på --yta som
   på sidan, och kontrasten klarar 4,5:1 på båda. */
.marke {
  display: inline-block;
  padding: 0 var(--s2);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--dampad);
  background: color-mix(in srgb, var(--dampad) 12%, var(--bakgrund));
}

.marke.fel { color: var(--fel); background: color-mix(in srgb, var(--fel) 12%, var(--bakgrund)); }
.marke.varning { color: var(--varning); background: color-mix(in srgb, var(--varning) 12%, var(--bakgrund)); }
.marke.ratt { color: var(--ratt); background: color-mix(in srgb, var(--ratt) 12%, var(--bakgrund)); }
.marke.neutral { color: var(--dampad); }

/* Kort och nyckeltal. */
.kort {
  padding: var(--s3) var(--s4);
  background: var(--yta);
  border: 1px solid var(--ram);
  border-radius: var(--radie);
}

.nyckeltal .etikett {
  display: block;
  font-size: 0.85rem;
  color: var(--dampad);
}

.nyckeltal .tal {
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* En rad nyckeltal överst på en sida. Korten bryts på smal skärm. */
.nyckeltalsrad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--s3);
  margin-bottom: var(--s4);
}

.nyckeltal .tal .marke { font-size: 1.1rem; }

/* Under 768 px blir en .kortlista en lista med kort. Rubrikraderna döljs
   visuellt men finns kvar för skärmläsare; varje cell visar sin etikett ur
   data-etikett. Namn och diff överst, sedan fel och varningar, sedan
   saldona två och två. */
@media (max-width: 767px) {
  table.kortlista thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  table.kortlista,
  table.kortlista tbody { display: block; }

  table.kortlista tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s2) var(--s3);
    padding: var(--s3);
    margin-bottom: var(--s3);
    background: var(--yta);
    border: 1px solid var(--ram);
    border-radius: var(--radie);
  }

  table.kortlista tbody tr:hover { background: var(--yta); }

  table.kortlista td {
    display: block;
    padding: 0;
    border: none;
    text-align: left;
    white-space: normal;
  }

  table.kortlista td::before {
    content: attr(data-etikett);
    display: block;
    font-size: 0.8rem;
    color: var(--dampad);
  }

  /* Siffercellerna är högerställda i listan (table.lista td.tal); i kortet
     står etikett och värde tillsammans, så de följer vänsterkanten. */
  table.kortlista td.tal { text-align: left; }

  table.kortlista td.namn { order: 0; font-size: 1.05rem; }
  table.kortlista td.namn::before { content: none; }
  table.kortlista td.diff { order: 1; text-align: right; }
  table.kortlista td.diff::before { content: none; }
  table.kortlista td.antal { order: 2; }
  table.kortlista td.grupp { order: 3; }
  table.kortlista td.period { order: 4; }
  table.kortlista td.saldo { order: 5; }
  table.kortlista td.tom { grid-column: 1 / -1; order: 5; }
}

/* Notiser: meddelanden och formulärfel. */
.notis {
  padding: var(--s2) var(--s3);
  margin: var(--s2) 0;
  background: var(--yta);
  border: 1px solid var(--ram);
  border-left: 4px solid var(--dampad);
  border-radius: var(--radie);
}

.notis.fel { border-left-color: var(--fel); }
.notis.varning { border-left-color: var(--varning); }
.notis.ratt { border-left-color: var(--ratt); }

/* Inloggningen: ett kort mitt på sidan, fälten i full bredd. */
.inloggning {
  max-width: 24rem;
  margin: 10vh auto 0;
  padding: var(--s5);
}

.inloggning .namn {
  margin: 0 0 var(--s2);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent);
}

.inloggning input:not([type="checkbox"], [type="radio"], [type="hidden"]) { width: 100%; }

.inloggning button {
  width: 100%;
  justify-content: center;
  margin-top: var(--s3);
}

/* Månadens namn mellan två pilar, över en kalender. */
.manadsrubrik {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s5) 0 var(--s3);
}

.manadsrubrik h2 { margin: 0; min-width: 10rem; text-align: center; }

/* En rubrik med en åtgärd till höger, över en lista. */
.rubrikrad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2) var(--s4);
  margin: var(--s5) 0 var(--s2);
}

.rubrikrad h2 { margin: 0; }

/* Statusformuläret i en listperiods rad: liten rullista och knapp. */
.statusform { display: flex; gap: var(--s2); align-items: center; margin: 0; }

/* Ett formulär som fälls ut under sin knapp. */
details.fallbar { margin: var(--s4) 0; }
details.fallbar summary { list-style: none; }
details.fallbar summary::-webkit-details-marker { display: none; }
details.fallbar[open] > form {
  margin-top: var(--s3);
  padding: var(--s4);
  background: var(--yta);
  border: 1px solid var(--ram);
  border-radius: var(--radie);
}

/* Formulär: ett kort på högst 36 rem, fälten ur _falt.html. Etiketten står
   ovanför fältet, hjälptexten och felet direkt under det. */
.formularkort { max-width: 36rem; }

.falt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--s3);
}

.falt.kryss {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
}

.falt .hjalp,
.falt .felmeddelande {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.85rem;
}

.falt .hjalp { color: var(--dampad); }
.falt .felmeddelande { color: var(--fel); }
.falt.harfel input:not([type="checkbox"], [type="radio"]),
.falt.harfel select,
.falt.harfel textarea { border-color: var(--fel); }

.inloggning .falt input:not([type="checkbox"], [type="radio"], [type="hidden"]) { width: 100%; }

/* Bred tabell på smal skärm: rullar i sidled i stället för att spräcka sidan. */
.rullbar { overflow-x: auto; margin-bottom: var(--s4); }