/* Boka tid — formgivning. Sambruks signaturgrön #58A618 klarar bara 3,05:1 mot
   vitt, så text och knappar använder den mörkare #3F7A11. Den ljusa används
   enbart dekorativt. */

:root {
  --gron: #3f7a11;
  --gron-ljus: #58a618;
  --gron-mork: #2f5c0d;
  --text: #1c2119;
  --text-svag: #53605a;
  --linje: #d7ddd5;
  --bakgrund: #f6f8f4;
  --vit: #fff;
  --fel: #a4241c;
  --radie: 8px;
}

* { box-sizing: border-box; }

/* Attributet hidden får sin display från webbläsarens stilmall och förlorar mot
   varje klassregel med egen display. Utan det här kan ett element som JavaScript
   döljer ändå synas — eller tvärtom, aldrig dyka upp. */
[hidden] { display: none !important; }

/* Ingen bild får spränga sin spalt, oavsett var den kommer in. */
img { max-width: 100%; height: auto; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bakgrund);
}

.topp {
  background: var(--vit);
  border-bottom: 3px solid var(--gron-ljus);
  padding: 1rem 0;
}

.omslag { width: 100%; max-width: 840px; margin: 0 auto; padding: 0 1rem; }
.omslag--bred { max-width: 1100px; }

.topp__rad { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between; }

/* Publikt sidhuvud i tre delar: loggan vänsterställd med tjänstens namn under,
   organisationens namn centrerat, datumet till höger. */
.topp__vanster { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; min-width: 0; }
.topp__logglank { display: inline-flex; line-height: 0; }
.topp__logglank:empty { display: none; }
.topp__app { margin: 0; font-weight: 700; color: var(--gron); font-size: 1.05rem; text-decoration: none; }
a.topp__app:hover { color: var(--gron-mork); text-decoration: underline; }
.topp__org {
  margin: 0;
  flex: 1 1 10rem;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  min-width: 0;
  overflow-wrap: anywhere;
}
.topp__org a { color: inherit; }
.topp__rad .idag { margin: 0; }
.topp__namn {
  font-weight: 700;
  color: var(--gron);
  text-decoration: none;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
/* Loggan får aldrig trycka undan namnet eller spränga sidhuvudet på en telefon. */
.topp__logga { max-height: 40px; max-width: 160px; width: auto; height: auto; flex: 0 0 auto; }
.idag { color: var(--text-svag); font-size: 0.9rem; }

main { padding: 1.5rem 0 3rem; }

h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 0.5rem; }
h2 { font-size: 1.2rem; margin: 2rem 0 0.75rem; }
h3 { font-size: 1rem; margin: 1.25rem 0 0.5rem; }
p { margin: 0 0 1rem; }
a { color: var(--gron); }
a:hover { color: var(--gron-mork); }

.kort {
  background: var(--vit);
  border: 1px solid var(--linje);
  border-radius: var(--radie);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.meta { color: var(--text-svag); font-size: 0.92rem; }

/* Listor av mötestyper */
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.lista a.block {
  display: block;
  background: var(--vit);
  border: 1px solid var(--linje);
  border-left: 5px solid var(--gron-ljus);
  border-radius: var(--radie);
  padding: 1rem;
  text-decoration: none;
  color: inherit;
}
.lista a.block:hover { border-color: var(--gron); background: #fbfdf9; }
.lista a.block strong { color: var(--gron); }

/* Personer på översikten: runda porträtt med namn och titel under. */
.personer {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 1.25rem 1rem;
}
.person a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
  text-decoration: none;
  color: inherit;
  padding: 0.75rem 0.5rem;
  border-radius: var(--radie);
}
.person a:hover { background: var(--vit); }
.person a:hover .person__namn { color: var(--gron-mork); text-decoration: underline; }

.person__bild {
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--vit);
  border: 3px solid var(--gron-ljus);
}

/* Utan foto: initialer i samma runda form, så rutnätet inte hoppar. */
.person__initialer {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 600;
  color: var(--gron);
  letter-spacing: 0.02em;
}
.person__namn { font-weight: 600; color: var(--gron); }
.person__titel { color: var(--text-svag); font-size: 0.9rem; }

/* Personsidans huvud: samma runda bild som på översikten, bredvid namnet. */
/* Ämnen: tjänster och projekt ur CRM:et på startsidan. */
.etikett {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gron-mork);
  background: #eef5e8;
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  margin-right: 0.5rem;
  vertical-align: 0.1em;
}
/* Startsidans två ingångar; den valda fäller ut listan under sig. */
.amne-val { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.amne-val button { padding: 1rem 1.25rem; font-size: 1.05rem; text-align: left; background: var(--vit); color: var(--gron); border: 2px solid var(--gron); }
.amne-val button:hover { background: #eef3ea; color: var(--gron-mork); border-color: var(--gron-mork); }
.amne-val button[aria-expanded="true"] { background: var(--gron); color: var(--vit); border-color: var(--gron); }
.amne-val button[hidden] { display: none; }
.amne-sok__falt { max-width: 28rem; }
.amne-sok__falt label { margin-top: 0; }
/* Korttexten i CRM:et kan vara en hel projektbeskrivning; i listan räcker två rader. */
.lista .amne__text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 0.3rem;
  color: var(--text);
}
.lista .amne__vilka { display: block; margin-top: 0.3rem; }

/* Ämnessidan: de ansvariga i en rad med små porträtt. */
.ansvariga { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; }
.ansvariga li { display: flex; align-items: center; gap: 0.6rem; }
.ansvariga .person__bild { width: 3.25rem; height: 3.25rem; border-width: 2px; }
.ansvariga .person__initialer { font-size: 1.05rem; }
.ansvariga__titel { display: block; color: var(--text-svag); font-size: 0.88rem; }

.vard { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.5rem; }
.vard h1 { margin: 0; }
.vard .person__bild { width: 5.5rem; height: 5.5rem; }
.vard .person__initialer { font-size: 1.6rem; }
.vard .meta { margin: 0.2rem 0 0; }

@media (max-width: 560px) {
  .vard { gap: 0.9rem; }
  .vard .person__bild { width: 4.25rem; height: 4.25rem; }
  .vard .person__initialer { font-size: 1.25rem; }
}

/* Tider */
.dagar { display: grid; gap: 1rem; }
.dag { background: var(--vit); border: 1px solid var(--linje); border-radius: var(--radie); padding: 1rem; }
.dag__rubrik { font-weight: 600; margin: 0 0 0.6rem; text-transform: capitalize; }
.tider { display: flex; flex-wrap: wrap; gap: 0.5rem; }

button, .knapp {
  font: inherit;
  cursor: pointer;
  border-radius: var(--radie);
  border: 1px solid var(--gron);
  background: var(--gron);
  color: var(--vit);
  padding: 0.55rem 1.1rem;
  text-decoration: none;
  display: inline-block;
}
button:hover, .knapp:hover { background: var(--gron-mork); border-color: var(--gron-mork); }
button[disabled] { opacity: 0.55; cursor: not-allowed; }

.tid {
  background: var(--vit);
  color: var(--gron);
  border: 1px solid var(--gron);
  min-width: 5.5rem;
  font-variant-numeric: tabular-nums;
}
.tid:hover { background: var(--gron); color: var(--vit); }
.tid[aria-pressed="true"] { background: var(--gron); color: var(--vit); }

.knapp--enkel { background: var(--vit); color: var(--gron); }
.knapp--enkel:hover { background: #eef3ea; color: var(--gron-mork); }
.knapp--fara { background: var(--fel); border-color: var(--fel); }
.knapp--fara:hover { background: #7f1c16; border-color: #7f1c16; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--gron-ljus);
  outline-offset: 2px;
}

/* Formulär */
label { display: block; font-weight: 600; margin: 0.9rem 0 0.25rem; }
.hjalptext { font-weight: 400; color: var(--text-svag); font-size: 0.88rem; }
.hjalptext--under { margin: 0.35rem 0 1rem; }
input, select, textarea {
  font: inherit;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid #9aa79f;
  border-radius: var(--radie);
  background: var(--vit);
  color: var(--text);
}
textarea { min-height: 6rem; resize: vertical; }
/* Fält med fel: färgen bär inte ensam budskapet, texten under fältet gör det. */
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
  background: #fdf1f0;
  border: 2px solid var(--fel);
}
.faltfel { color: var(--fel); font-weight: 600; font-size: 0.92rem; margin: 0.3rem 0 0; }
/* Beröringsyta minst 24x24 px (WCAG 2.2 2.5.8). Standardstorleken i
   webbläsaren är omkring 13 px, vilket är för litet att träffa med fingret. */
input[type="checkbox"], input[type="radio"] { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; }
fieldset { border: 1px solid var(--linje); border-radius: var(--radie); margin: 0 0 1rem; padding: 0.5rem 1rem 1rem; }
legend { font-weight: 600; padding: 0 0.35rem; }

/* Fälten i en rad bottenjusteras så att inmatningsrutorna hamnar på samma linje
   även när en etikett går i två rader. Därför får inget fält ha text EFTER sin
   ruta — den skjuter rutan uppåt. Sådan hjälptext läggs under hela raden
   med .hjalptext--under. */
.rad { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.rad > * { flex: 1 1 8rem; }
.rad--knappar { justify-content: flex-start; }
.rad--knappar > * { flex: 0 0 auto; }

/* Veckoschemat: dag, arbetstid och lunch på en rad. */
.schemarad { margin-bottom: 0.5rem; }
.schemarad__dag { flex: 0 0 7rem !important; font-weight: 600; text-transform: capitalize; align-self: center; }

/* Frågor till bokaren i adminvyn: en rad per fråga. */
.fraga-rad { padding: 0 0 0.75rem; margin: 0 0 0.25rem; border-bottom: 1px solid var(--linje); }
.fraga-rad__etikett { margin-top: 0.5rem; }
.fraga-rad__val { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; }
.fraga-rad__val label { display: inline; margin: 0 auto 0 0; font-weight: 400; }
.fraga-rad__val input[type="checkbox"] { width: 1.5rem; }

.notis { border-radius: var(--radie); padding: 0.75rem 1rem; margin: 0 0 1rem; border: 1px solid; }
.notis--fel { background: #fdf1f0; border-color: #e3b7b3; color: #7f1c16; }
.notis--ok { background: #f0f7ea; border-color: #b9d6a4; color: #2f5c0d; }
.notis--info { background: #f2f5fa; border-color: #c2cede; color: #2b3c52; }

table { width: 100%; border-collapse: collapse; background: var(--vit); }
th, td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--linje); vertical-align: top; }
th { background: #eef3ea; }
.tabellomslag { overflow-x: auto; border: 1px solid var(--linje); border-radius: var(--radie); }

.flikar { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 1.25rem 0 1rem; }
.flik { background: var(--vit); color: var(--gron); border: 1px solid var(--linje); }
.flik[aria-selected="true"] { background: var(--gron); color: var(--vit); border-color: var(--gron); }

.gomd { display: none; }
.endast-skarmlasare {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.hoppa-till {
  position: absolute; left: -9999px; background: var(--vit); color: var(--gron);
  padding: 0.5rem 1rem; z-index: 10;
}
.hoppa-till:focus { left: 0.5rem; top: 0.5rem; }

footer { border-top: 1px solid var(--linje); padding: 1.25rem 0; color: var(--text-svag); font-size: 0.9rem; }

/* Telefon. Tjänsten möter invånare och externa parter som oftast klickar på en
   länk i ett mail — mobilvyn är huvudfallet, inte undantaget. */
@media (max-width: 560px) {
  body { font-size: 16px; }
  h1 { font-size: 1.3rem; }
  h2 { font-size: 1.1rem; }

  .topp { padding: 0.75rem 0; }
  .topp__rad { gap: 0.35rem 0.75rem; align-items: flex-start; }
  .topp__logga { max-height: 32px; max-width: 120px; }
  .topp__app { font-size: 1rem; }
  /* Namnet hamnar under loggan på en telefon, men fortfarande centrerat. */
  .topp__org { flex-basis: 100%; order: 3; font-size: 1.05rem; }
  .idag { font-size: 0.82rem; flex-basis: 100%; order: 4; text-align: center; }

  .kort { padding: 1rem; }
  fieldset { padding: 0.5rem 0.75rem 0.75rem; }

  /* Tidsknappar i ett rutnät i stället för en rad som bryts ojamnt. */
  .tider { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: 0.5rem; }
  .tid { min-width: 0; width: 100%; }

  /* Beröringsytor: minst 44 px höjd enligt WCAG 2.5.5. */
  button, .knapp, .tid { min-height: 44px; padding: 0.6rem 0.9rem; }
  input, select, textarea { min-height: 44px; font-size: 16px; } /* 16px hindrar att iOS zoomar in */
  input[type="checkbox"], input[type="radio"] { min-height: 0; width: 1.5rem; height: 1.5rem; }

  /* Formulärrader staplas i stället för att klamra sig fast vid varandra. */
  .rad { flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .rad > * { flex: 1 1 auto; width: 100%; }
  .rad--knappar { flex-direction: row; flex-wrap: wrap; }
  .rad--knappar > * { width: auto; }

  .personer { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 1rem 0.5rem; }
  .person__bild { width: 5.5rem; height: 5.5rem; }
  .person__initialer { font-size: 1.5rem; }

  .flikar { gap: 0.3rem; }
  .flik { flex: 1 1 8rem; }

  th, td { padding: 0.5rem 0.45rem; font-size: 0.95rem; }
}

@media (max-width: 380px) {
  .omslag { padding: 0 0.75rem; }
  .tider { grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr)); }
}