/* Layout for Holstad Arrangement. Colours, type and components come from the
   design system (design.holstadvolley.com); this file only places them. Use
   --ds-* variables here, never fixed colours, so dark mode keeps working. */

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ds-color-neutral-background-tinted);
  color: var(--ds-color-text-default);
}

/* Same width and gutter as Dressen's header, so the content lines up with
   the logo. */
.side {
  box-sizing: border-box;
  max-width: 80rem;
  margin-inline: auto;
  padding: var(--ds-size-8) max(env(safe-area-inset-right), 1.5rem) var(--ds-size-12) max(env(safe-area-inset-left), 1.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--ds-size-6);
}
.side:focus { outline: none; }

/* Layout classes set display, which would otherwise beat the hidden attribute
   (on ds-tabpanel, for example). */
[hidden] { display: none !important; }

/* ---- Building blocks ------------------------------------------------- */

.rad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-size-2) var(--ds-size-3);
}
.stabel {
  display: flex;
  flex-direction: column;
  gap: var(--ds-size-2);
}
.rutenett {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--ds-size-4);
}
.rutenett-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: var(--ds-size-6);
  align-items: start;
}
/* Neutral, not the accent's subtle text: that is the same blue as links,
   so dimmed text looked clickable. */
.dempet {
  color: var(--ds-color-neutral-text-subtle);
}
.tagger {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-size-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tagger li { max-width: 100%; }
.tagger .ds-tag { white-space: normal; max-width: 100%; height: auto; box-sizing: border-box; }
.uten-margin { margin: 0; }
.stabel.tett { gap: var(--ds-size-1); }
/* A closed popover stays hidden even with a layout class such as .stabel on
   it: the browser hides it with display: none in its own stylesheet, and any
   display in ours wins over that. The "Abonner" popover was open on every
   page load and could not be closed. */
[popover]:not(:popover-open) { display: none; }
.rad.tett { gap: var(--ds-size-2); }
.stabel.luftig { gap: var(--ds-size-6); }
.rad.spredt { justify-content: space-between; }
.over { margin-top: var(--ds-size-3); }
.nowrap { white-space: nowrap; }
.hoyre { text-align: right; }
.liten { font-size: var(--ds-body-sm-font-size); }
.minst { font-size: var(--ds-body-xs-font-size); }

/* The heading row on each page: title on the left, tools on the right. */
.sidehode {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-size-4);
}
.sidehode > :first-child {
  display: flex;
  flex-direction: column;
  gap: var(--ds-size-1);
  min-width: 0;
}

/* Small uppercase label above a value, as on the cards. */
.etikett {
  margin: 0 0 var(--ds-size-2);
  font-size: var(--ds-font-size-2);
  font-weight: var(--ds-font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-color-neutral-text-subtle);
}

/* Klasse name in its lagfarge. The name is always written out, so the colour
   is never the only signal. */
.klasse {
  display: inline-block;
  padding: 0 var(--ds-size-2);
  border: 1px solid var(--holstad-lag-kant, var(--ds-color-neutral-border-subtle));
  border-radius: var(--ds-border-radius-md);
  background: var(--holstad-lag-flate, var(--ds-color-neutral-surface-tinted));
  color: var(--holstad-lag-tekst, var(--ds-color-text-default));
  font-weight: var(--ds-font-weight-semibold);
  text-decoration: none;
}
a.klasse:hover { text-decoration: underline; }

/* ---- Cards with a heading bar and a list ------------------------------ */

.panel {
  padding: 0;
  overflow: hidden;
}
.panel-hode {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-size-2);
  padding: var(--ds-size-3) var(--ds-size-4);
  border-bottom: 1px solid var(--ds-color-neutral-border-subtle);
  background: var(--ds-color-neutral-surface-tinted);
}
.panel-tekst {
  margin: 0;
  padding: var(--ds-size-2) var(--ds-size-4);
  border-bottom: 1px solid var(--ds-color-neutral-border-subtle);
}
.panel-tom {
  margin: 0;
  padding: var(--ds-size-6) var(--ds-size-4);
  text-align: center;
}
.liste {
  margin: 0;
  padding: 0;
  list-style: none;
}
.liste > li {
  padding: var(--ds-size-3) var(--ds-size-4);
}
.liste > li + li {
  border-top: 1px solid var(--ds-color-neutral-border-subtle);
}
.liste > li.legg-til {
  background: var(--ds-color-neutral-surface-tinted);
}
/* A details row owns its padding; the list draws the lines between rows. */
.liste > li:has(> .ds-details) { padding: 0; }
.liste .ds-details { border-block: 0; }

/* ---- Overview (/) ----------------------------------------------------- */

/* Season and "vis utgåtte" on one line, centred on each other. */
.filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-size-3) var(--ds-size-6);
}
.filter .ds-field { margin: 0; }
.filter-felt {
  display: flex;
  align-items: center;
  gap: var(--ds-size-2);
}
.filter-felt select { width: auto; }

.synk dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--ds-size-2) var(--ds-size-6);
  margin: 0;
}
.synk dt {
  font-weight: var(--ds-font-weight-semibold);
}
.synk dd { margin: 0; }

.oversikt-ramme {
  overflow-x: auto;
  border-radius: var(--ds-border-radius-lg);
  background: var(--ds-color-neutral-background-default);
}
.oversikt { --dsc-table-vertical-align: top; }
/* Fixed layout so the table never grows wider than the page: the columns
   in the <colgroup> have set widths, and Terminliste gets the rest. Status
   tags stack instead of widening their column. */
.oversikt { table-layout: fixed; }
.oversikt .kol-dato { width: 11rem; }
.oversikt .kol-gjort { width: 6rem; }
.oversikt .kol-ansvarlig { width: 14rem; }
.oversikt .kol-hall { width: 9rem; }
.oversikt td { overflow-wrap: break-word; }
.oversikt td.dato { overflow-wrap: normal; }
.oversikt td.gjort, .oversikt td.hall { white-space: nowrap; font-variant-numeric: tabular-nums; }
.oversikt td.gjort [data-ferdig] { color: var(--ds-color-success-text-default); font-weight: var(--ds-font-weight-medium); }
.oversikt .tagger { margin-top: var(--ds-size-2); }
.mangler { color: var(--ds-color-danger-text-default); }
[data-href] { cursor: pointer; }
.bookinger-uten > li[data-href]:hover { background: var(--ds-color-neutral-surface-hover); }
.merknad { cursor: help; color: var(--ds-color-text-subtle); }
.bookinger-uten > li { padding: var(--ds-size-2) var(--ds-size-4); gap: var(--ds-size-1) var(--ds-size-3); }
.bookinger-uten > li[data-level="warn"] { box-shadow: inset 4px 0 var(--ds-color-warning-base-default); }
.bookinger-uten > li[data-level="error"] { box-shadow: inset 4px 0 var(--ds-color-danger-base-default); }
.booking-dato { min-width: 11rem; }
.oversikt tr[data-level="error"] > td:first-child { box-shadow: inset 4px 0 var(--ds-color-danger-base-default); }
.oversikt tr[data-level="warn"] > td:first-child { box-shadow: inset 4px 0 var(--ds-color-warning-base-default); }
.oppforing + .oppforing { margin-top: var(--ds-size-2); }
.ansvarlig-rad {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ds-size-1);
}
.ansvarlig-rad + .ansvarlig-rad { margin-top: var(--ds-size-2); }
.ansvarlig-rad select { width: 100%; }

/* Narrow screens: each date becomes a card, columns become labelled lines. */
@media (max-width: 72rem) {
  .oversikt-ramme { overflow: visible; background: none; }
  /* The table's own frame (data-border) would wrap all the cards. */
  .oversikt.ds-table { border: 0; border-radius: 0; background: none; }
  .oversikt, .oversikt tbody, .oversikt tr, .oversikt td { display: block; }
  .oversikt thead { display: none; }
  .oversikt tr {
    margin-bottom: var(--ds-size-4);
    border: 1px solid var(--ds-color-neutral-border-subtle);
    border-radius: var(--ds-border-radius-lg);
    background: var(--ds-color-neutral-background-default);
    overflow: hidden;
  }
  .oversikt.ds-table > tbody > tr > td {
    border: 0;
    padding: var(--ds-size-2) var(--ds-size-4);
  }
  .oversikt.ds-table > tbody > tr > td.dato {
    background: var(--ds-color-neutral-surface-tinted);
    font-weight: var(--ds-font-weight-semibold);
  }
  .oversikt td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--ds-font-size-2);
    font-weight: var(--ds-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ds-color-text-subtle);
  }
  .oversikt tr[data-level] > td:first-child { box-shadow: none; }
  .oversikt tr[data-level="error"] { border-left: 4px solid var(--ds-color-danger-base-default); }
  .oversikt tr[data-level="warn"] { border-left: 4px solid var(--ds-color-warning-base-default); }
  .oversikt colgroup { display: none; }
}

/* ---- Arrangement (/arrangement) -------------------------------------- */

.fremdrift {
  text-align: right;
}
.fremdrift strong {
  display: block;
  font-family: var(--ds-font-family);
  font-size: var(--ds-font-size-9);
  line-height: 1;
}
.fremdrift strong span {
  font-size: var(--ds-font-size-6);
  color: var(--ds-color-text-subtle);
}
.endre-arrangement form.rad,
.panel-tekst form.rad { align-items: flex-end; }
/* A text field that should take the free width in a .rad form, e.g. a name. */
.felt-bredt { flex: 1 1 20rem; max-width: 36rem; }
.felt-bredt .ds-input { width: 100%; }
.fremdrift[data-ferdig] strong { color: var(--ds-color-success-text-default); }

.oppgave {
  display: flex;
  gap: var(--ds-size-3);
  align-items: flex-start;
}
.oppgave[data-done] { background: var(--ds-color-success-surface-tinted); }
.oppgave-innhold {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-size-1);
}
.oppgave-tittel { font-weight: var(--ds-font-weight-medium); }
.oppgave[data-utgatt] .oppgave-tittel { color: var(--ds-color-text-subtle); }
.oppgave[data-done] .oppgave-tittel {
  text-decoration: line-through;
  color: var(--ds-color-text-subtle);
}
.oppgave-handlinger {
  display: flex;
  align-items: center;
  gap: var(--ds-size-2);
  flex-shrink: 0;
}
.person-kompakt { max-width: 11rem; }
.oppgave form { margin: 0; }
.legg-til form,
.innebygd {
  display: flex;
  gap: var(--ds-size-2);
  align-items: center;
}
.legg-til form .ds-input { flex: 1; }

@media (max-width: 40rem) {
  .oppgave { flex-wrap: wrap; }
  .oppgave-handlinger { box-sizing: border-box; width: 100%; padding-left: var(--ds-size-8); }
  .person-kompakt { max-width: none; width: 100%; }
}

/* ---- Maler (/maler) --------------------------------------------------- */

.maler-faner ds-tabpanel { padding: var(--ds-size-6) 0 0; }
.mal-oppgave summary .rad { flex: 1; }
.mal-oppgave .oppgave-skjema {
  margin-top: var(--ds-size-3);
}
.oppgave-skjema {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--ds-size-3);
}
.oppgave-skjema > * { grid-column: span 6; }
@media (min-width: 40rem) {
  .oppgave-skjema > .bred { grid-column: span 4; }
  .oppgave-skjema > .smal { grid-column: span 1; }
  .oppgave-skjema > .handling { grid-column: span 2; justify-self: end; }
}

/* ---- Personer (/personer) --------------------------------------------- */

.person {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-size-2) var(--ds-size-3);
}
.person-navn {
  flex: 1 1 10rem;
  min-width: 0;
}
.person-navn > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.person .ds-input { width: 15rem; max-width: 100%; }
.person .ds-input:placeholder-shown { border-color: var(--ds-color-warning-border-default); }
@media (max-width: 30rem) {
  .person .ds-input { flex: 1; width: auto; }
}

.sendt { width: 100%; }

/* Today's reminders: one block per person, their tasks grouped by
   arrangement, with the deadline as a tag on the right. */
.paminnelse-regler {
  border-top: 0;
}
.paminnelse {
  display: flex;
  flex-direction: column;
  gap: var(--ds-size-3);
}
.paminnelse-hode {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ds-size-1) var(--ds-size-3);
}
.paminnelse-arr {
  display: flex;
  flex-direction: column;
  gap: var(--ds-size-1);
}
.paminnelse-oppgaver {
  margin: 0;
  padding: 0;
  list-style: none;
}
.paminnelse-oppgaver > li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ds-size-3);
  padding: var(--ds-size-1) 0;
  font-size: var(--ds-body-sm-font-size);
}
.paminnelse-oppgaver > li + li {
  border-top: 1px dashed var(--ds-color-neutral-border-subtle);
}
.paminnelse-oppgaver .ds-tag { flex-shrink: 0; }

/* Arrangement the app owns: status, teams, editing (see arrangements.go). */
.oversikt tr[data-passert] > td { color: var(--ds-color-text-subtle); }
.oversikt tr[data-avlyst] .klasse { text-decoration: line-through; }
.tagger.lag { margin-top: var(--ds-size-1); }
.lagfilter { margin: 0; display: flex; flex-direction: column; gap: var(--ds-size-2); }
.skjema { display: flex; flex-direction: column; gap: var(--ds-size-4); }
.skjema textarea { width: 100%; max-width: 48rem; }
.felt-tall { width: 6rem; }
.dagtid .ds-input { width: 7.5rem; }
.internt { padding: var(--ds-size-2) var(--ds-size-3); background: var(--ds-color-warning-surface-tinted); border-radius: var(--ds-border-radius-md); }
.historikk .liste > li { padding: var(--ds-size-2) 0; }
.nytt-arrangement form { align-items: flex-end; }
.skjema > .felt-bredt { flex: none; }

/* ---- Public list (/) ------------------------------------------------- */

/* The public pages run at the design system's normal size (layout.html),
   and read as a list grouped by month, not a table: a date tile in the
   format's lagfarge, then what and for whom, then Tid/Sted/Ansvarlig. */

.ingress {
  max-width: 40rem;
  color: var(--ds-color-neutral-text-subtle);
}

/* The team filter, apart from the list. */
.filterpanel {
  display: flex;
  flex-direction: column;
  gap: var(--ds-size-4);
}
.filterpanel .ds-label,
.sesongvalg .ds-label { font-weight: var(--ds-font-weight-medium); }
.filterpanel .lagfilter { gap: var(--ds-size-2); }
.lagvalg {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-size-2);
}

.terminliste {
  display: flex;
  flex-direction: column;
  gap: var(--ds-size-8);
  margin-top: var(--ds-size-4);
}

/* "Ikke bekreftet" opens its meaning in a popover; the icon says so. */
.forklaring { max-width: min(20rem, calc(100vw - 2rem)); }
/* "Abonner i kalenderen": the feed's links and address under the team
   filter. */
.abonner-valg { max-width: min(22rem, calc(100vw - 2rem)); }
.abonner-valg .ds-input { width: 100%; }
button.ds-tag.status { gap: 0.3em; font-family: inherit; }
button.ds-tag.status svg { width: 1em; height: 1em; opacity: 0.75; }

.maned {
  display: flex;
  flex-direction: column;
  gap: var(--ds-size-3);
}
.arr-liste {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--ds-color-neutral-border-subtle);
  border-radius: var(--ds-border-radius-lg);
  background: var(--ds-color-neutral-background-default);
  overflow: hidden;
}

.arr {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) minmax(14rem, 20rem);
  gap: var(--ds-size-2) var(--ds-size-6);
  align-items: start;
  padding: var(--ds-size-5) var(--ds-size-6);
}
.arr + .arr { border-top: 1px solid var(--ds-color-neutral-border-subtle); }
.arr:hover { background: var(--ds-color-neutral-surface-tinted); }
.arr:has(a:focus-visible) { background: var(--ds-color-neutral-surface-tinted); }

/* Date tile, like a desk calendar: month on top, then the day and its
   weekday. A weekend shows both days side by side. The lagfarge says which
   format it is; the name says it too. */
.arr-dato {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 5.75rem; /* the same for one day and a weekend */
  overflow: hidden;
  border: 1px solid var(--holstad-lag-kant, var(--ds-color-neutral-border-subtle));
  border-radius: var(--ds-border-radius-lg);
  background: var(--holstad-lag-flate, var(--ds-color-neutral-surface-tinted));
  color: var(--holstad-lag-tekst, var(--ds-color-text-default));
  text-align: center;
}
.arr-mnd,
.arr-ukedag {
  font-size: var(--ds-font-size-1);
  font-weight: var(--ds-font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}
.arr-mnd {
  padding: 0.25rem var(--ds-size-1);
  border-bottom: 1px solid var(--holstad-lag-kant, var(--ds-color-neutral-border-subtle));
}
.arr-dager {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--ds-size-1);
  padding: var(--ds-size-2) var(--ds-size-1);
}
.arr-dagboks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.arr-strek {
  padding-bottom: 1.4rem; /* level with the numbers, above the weekdays */
  opacity: 0.6;
}
/* Bebas, the brand's display face, as in the page title. */
.arr-dag {
  font-family: "Bebas Neue", Impact, "Arial Narrow Bold", sans-serif;
  font-size: var(--ds-font-size-8);
  font-weight: 400;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
.arr-dato[data-flere] .arr-dag { font-size: var(--ds-font-size-7); }

.arr-innhold {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-size-2);
  min-width: 0;
}
.arr-tittel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-size-2) var(--ds-size-3);
}
.arr-tittel .ds-heading { font-size: var(--ds-font-size-5); }
.arr-tittel a {
  color: inherit;
  text-decoration: none;
}
.arr-tittel a:hover { text-decoration: underline; }
.arr .tagger.lag { margin: 0; }
.arr-merknad { max-width: 44rem; }
.arr-profixio { font-size: var(--ds-body-sm-font-size); }

/* Tid, Sted and Ansvarlig as label and value side by side. */
.arr-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--ds-size-1) var(--ds-size-4);
  margin: 0;
  padding-top: 0.2rem;
  font-size: var(--ds-body-sm-font-size);
  line-height: var(--ds-line-height-md);
}
.arr-meta > div { display: contents; }
.arr-meta dt { color: var(--ds-color-neutral-text-subtle); }
.arr-meta dd { margin: 0; }
.arr-meta dd > span:not(.dempet) { display: block; }

.arr[data-passert] { color: var(--ds-color-neutral-text-subtle); }
.arr:is([data-passert], [data-avlyst]) :is(.arr-dato, .arr-mnd) {
  border-color: var(--ds-color-neutral-border-subtle);
  background: var(--ds-color-neutral-surface-tinted);
  color: var(--ds-color-neutral-text-subtle);
}
.arr[data-avlyst] .arr-tittel a { text-decoration: line-through; }

.fotnote {
  max-width: 48rem;
  margin: 0;
}
/* The public arrangement page: its date tile beside the title. */
.arr-hode {
  display: flex;
  align-items: center;
  gap: var(--ds-size-5);
}
.arr-hode .arr-dato { flex-shrink: 0; min-width: 6.5rem; }
.arr-hode .arr-dager { padding-inline: var(--ds-size-3); }
.arr-hode .arr-dag { font-size: var(--ds-font-size-9); }
.arr-hode .arr-dato[data-flere] .arr-dag { font-size: var(--ds-font-size-7); }

/* The title, or the back link, with the login button on the same line,
   on a phone too: there the button just says "Logg inn". */
.offentlig-hode { gap: var(--ds-size-2); }
.tittelrad {
  display: flex;
  flex-wrap: wrap; /* only on a very narrow screen */
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-size-2) var(--ds-size-4);
}
.tittelrad > .ds-button { flex-shrink: 0; }

/* Season and "Vis tidligere" under the list: rarely changed. */
.sesongvalg {
  padding-top: var(--ds-size-4);
  border-top: 1px solid var(--ds-color-neutral-border-subtle);
}
/* ds-field puts a gap above the input under a label; here it is beside. */
.sesongvalg .filter-felt > * { margin: 0; }

/* Below the width for three columns, the meta goes under the content. */
@media (max-width: 56rem) {
  .arr { grid-template-columns: 5.5rem minmax(0, 1fr); }
  /* The tile spans both rows, so a short row does not leave a gap above
     the meta. */
  .arr > .arr-dato { grid-row: span 2; }
  .arr-meta { grid-column: 2; padding-top: var(--ds-size-1); }
}

@media (max-width: 36rem) {
  .arr {
    grid-template-columns: 4.75rem minmax(0, 1fr);
    gap: var(--ds-size-2) var(--ds-size-4);
    padding: var(--ds-size-4);
  }
  .arr-dag { font-size: var(--ds-font-size-7); }
  .arr-dato[data-flere] .arr-dag { font-size: var(--ds-font-size-5); }
  .arr-hode { align-items: flex-start; gap: var(--ds-size-4); }
  .bare-bred { display: none; }
  .arr-hode .arr-dato { min-width: 4.75rem; }
  .arr-hode .arr-dager { padding-inline: var(--ds-size-1); }
  .arr-hode .arr-dag { font-size: var(--ds-font-size-8); }
  .arr-hode .arr-dato[data-flere] .arr-dag { font-size: var(--ds-font-size-5); }
}

/* When our teams play, on the public arrangement page (from TA). */
.kamper { margin: 0; display: grid; gap: 0.5rem; }
.kamper dt { font-weight: 600; }
.kamper dd { margin: 0; }