/* Skiftschema.se – gemensam stil för de publika sidorna.

   FÄRGER OCH MÖRKT LÄGE
   Alla färger är "CSS-variabler" (--namn) som definieras en gång högst upp och sedan används överallt
   med var(--namn). Vill man ändra utseendet ändrar man alltså bara variablerna.

   light-dark(ljus, mörk) väljer färg efter det aktiva läget. Läget styrs av color-scheme:
     - Standard ("light dark"): följer enhetens inställning (automatiskt mörkt läge).
     - data-theme="light" eller "dark" på <html> (sätts av theme.js) tvingar fram ett läge. */

:root {
    color-scheme: light dark;

    --bg: light-dark(#f5f7fa, #0e1217);
    --surface: light-dark(#ffffff, #171c24);
    --text: light-dark(#18202b, #e7ebf0);
    --muted: light-dark(#5a6675, #9aa5b3);
    --border: light-dark(#dde2e9, #283040);
    --accent: light-dark(#2457d6, #7aa2ff);
    --accent-soft: light-dark(#e8eefc, #1d2b4d);
    --red-day: light-dark(#c62828, #ff8a80);
    --today: light-dark(#fff6d6, #3a3316);

    --radius: .75rem;
    --max-width: 72rem;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

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

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.55;
}

main { flex: 1; padding-block: 1.5rem 3rem; }

a { color: var(--accent); }

h1 { font-size: 1.75rem; line-height: 1.2; margin: 0 0 .5rem; }
h2 { font-size: 1.25rem; margin: 2rem 0 .5rem; }

.container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: 1rem; }
.lead { font-size: 1.15rem; margin-top: 0; }
.muted { color: var(--muted); }

/* Tydlig markering vid tangentbordsnavigering */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: .25rem; }

/* "Hoppa till innehållet": syns bara när man tabbar dit, för den som använder tangentbord eller skärmläsare */
.skip-link {
    position: absolute;
    left: -999px;
    background: var(--accent);
    color: var(--bg);
    padding: .5rem 1rem;
    z-index: 10;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* Element med attributet hidden ska alltid vara dolda, även om en regel nedan ger dem display */
[hidden] { display: none !important; }

/* Text som bara skärmläsare ser (t.ex. etiketten till sökrutan) */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Sidhuvud */
.site-header { background: var(--surface); border-bottom: 1px solid var(--border); }
.site-header__inner { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; padding-block: .75rem; }

.brand { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; text-decoration: none; color: var(--text); }
.brand span { color: var(--accent); }

/* Menyn tar all ledig plats mellan märket och Tema-knappen, så att "För företag" (sista länken) kan skjutas åt höger
   och hamna precis vänster om Tema. */
.site-nav { display: flex; gap: .25rem; flex-wrap: wrap; flex: 1 1 auto; }
.site-nav a { padding: .4rem .75rem; border-radius: 999px; color: var(--text); text-decoration: none; }
.site-nav a:hover { background: var(--accent-soft); }
.site-nav .site-nav__companies { margin-left: auto; }

.theme-toggle {
    margin-left: 0;
    padding: .4rem .85rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .9rem;
    cursor: pointer;
}
.theme-toggle:hover { background: var(--accent-soft); }

/* Menyn och temaknappen ligger i en gemensam ruta (.site-menu). På bred skärm är den en vanlig rad bredvid märket. På mobil
   göms den bakom hamburgarknappen (se mobilreglerna längst ned). Hamburgarknappen och temaknappen kräver JavaScript, och
   JavaScript märker sidan med klassen "js" (se theme.js), så utan det syns bara länkarna. */
.site-menu { display: flex; align-items: center; gap: 1.25rem; flex: 1 1 auto; flex-wrap: wrap; }
.menu-toggle {
    display: none;
    margin-left: auto;
    padding: .4rem .55rem;
    border: 1px solid var(--border);
    border-radius: .6rem;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    line-height: 0;
}
.menu-toggle:hover { background: var(--accent-soft); }
html:not(.js) .theme-toggle { display: none; }

/* Schemaväljaren (startsidan) */
.picker-search { margin: 1.25rem 0; }
.picker-search input {
    width: 100%;
    max-width: 32rem;
    padding: .75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

.chip {
    display: inline-block;
    padding: .3rem .8rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    font-size: .95rem;
}
.chip:hover { background: var(--accent-soft); border-color: var(--accent); }

.chips { position: relative; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.chip--active, .chip--active:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }

.back-link { margin: 0 0 .5rem; font-size: .95rem; }

/* Schemats namn med logga. Loggan får en ljus bakgrund så att den syns även i mörkt läge. */
.schedule-header { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.schedule-header p { margin: 0; }
.schedule-logo { height: 3.5rem; width: auto; max-width: 9rem; object-fit: contain; padding: .35rem; border-radius: .5rem; background: #fff; }

/* Vyväljare: två knappar som hör ihop */
.segmented { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--surface); }
.segmented a { padding: .4rem 1rem; color: var(--text); text-decoration: none; }
.segmented a:hover { background: var(--accent-soft); }
.segmented .segmented--active, .segmented .segmented--active:hover { background: var(--accent); color: var(--bg); font-weight: 600; }

.schedule-view { margin-top: 1.5rem; }

/* Skiftfärger. Varje arbetstid i ett schema får en av åtta färger (shift-1 ... shift-8), se ScheduleCalendar.ColorMap.
   Bakgrunden skiljer tiderna åt men koden (F, E, N ...) står alltid i texten, så färgen är aldrig det enda som skiljer. */
:root {
    --shift-1: light-dark(#cfe0ff, #27407a);
    --shift-2: light-dark(#ffe0b8, #6b4513);
    --shift-3: light-dark(#e2d4f7, #4a2f78);
    --shift-4: light-dark(#cdeed5, #1f5a31);
    --shift-5: light-dark(#ffd0d6, #7a2a38);
    --shift-6: light-dark(#c6ebec, #1d5a5c);
    --shift-7: light-dark(#f6ecb0, #62561a);
    --shift-8: light-dark(#d9dde4, #3d4656);
}
.shift { display: inline-block; min-width: 2rem; padding: .05rem .4rem; border-radius: .4rem; text-align: center; font-weight: 600; color: var(--text); }
.shift-1 { background: var(--shift-1); }
.shift-2 { background: var(--shift-2); }
.shift-3 { background: var(--shift-3); }
.shift-4 { background: var(--shift-4); }
.shift-5 { background: var(--shift-5); }
.shift-6 { background: var(--shift-6); }
.shift-7 { background: var(--shift-7); }
.shift-8 { background: var(--shift-8); }
.shift--free { color: var(--muted); font-weight: 400; }
/* Ledig på grund av specialdag (L*): man skulle egentligen ha jobbat. Grön, och mer mättad än skiftfärg 4 så att de skiljs åt. */
.shift--replaced { background: light-dark(#8fd99b, #2f8a45); }

/* Månadskalender */
/* Månadsraden och vyvalet (Kalender / Alla lag) på samma rad på bred skärm: månadsnavigeringen till vänster och vyvalet
   längst till höger (order). På mobil ligger vyvalet på en egen rad ovanför (se @media längre ned). */
.toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: .75rem; }
.toolbar-row .calendar-toolbar { flex: 1 1 auto; margin-bottom: 0; }
.toolbar-row .segmented { order: 2; margin-left: auto; }
.calendar-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: .75rem; }
.calendar-toolbar__title { margin: 0; font-size: 1.35rem; }
.calendar-toolbar__nav { display: flex; gap: .35rem; }
.nav-btn {
    display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; height: 2.4rem; padding: 0 .75rem;
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text);
    text-decoration: none; font-size: 1.3rem; line-height: 1;
}
a.nav-btn:hover { background: var(--accent-soft); border-color: var(--accent); }
.nav-btn[aria-disabled="true"] { opacity: .35; }
.nav-btn--text { font-size: .95rem; }
#idag { scroll-margin-top: 1rem; }

/* Menyn med genvägar till helgdagar. <summary> är knappen, och menyn öppnas under den. */
.jump { position: relative; }
.jump > summary { list-style: none; cursor: pointer; }
.jump > summary::-webkit-details-marker { display: none; }
.jump > summary::after { content: " ▾"; font-size: .8em; }
.jump[open] > summary { background: var(--accent-soft); border-color: var(--accent); }
.jump__menu {
    position: absolute; z-index: 5; top: calc(100% + .35rem); left: 0; min-width: 15rem; display: flex; flex-wrap: wrap; gap: .4rem;
    padding: .6rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 6px 20px rgb(0 0 0 / .15);
}
/* Rubrikerna i snabbvalet ("Månader", "Helgdagar") ligger på egna rader */
.jump__heading { flex: 0 0 100%; margin: 0; font-size: .75rem; font-weight: 600; color: var(--muted); }
.jump__heading:not(:first-child) { margin-top: .35rem; }
.chip--disabled { opacity: .4; cursor: not-allowed; }

.calendar { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.calendar th { padding: .5rem .25rem; font-size: .85rem; color: var(--muted); font-weight: 600; text-align: center; border-bottom: 1px solid var(--border); }
.calendar th abbr { text-decoration: none; }
.calendar .calendar__week { width: 2.2rem; font-size: .75rem; font-weight: 400; border-right: 1px solid var(--border); }
.calendar td { padding: 0; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); vertical-align: top; }
.calendar td:last-child { border-right: 0; }
.calendar tbody tr:last-child td, .calendar tbody tr:last-child th { border-bottom: 0; }
.calendar tbody th.calendar__week { border-bottom: 1px solid var(--border); vertical-align: middle; }

.day {
    display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
    width: 100%; min-height: 4.6rem; padding: .35rem .4rem; border: 0; background: transparent;
    color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.day:hover { background: var(--accent-soft); }
.day__num { font-size: .85rem; color: var(--muted); }
.day__note { font-size: .7rem; line-height: 1.2; color: var(--muted); overflow-wrap: anywhere; }
.calendar__cell--red .day__num, .calendar__cell--red .day__note { color: var(--red-day); }
.calendar__cell--outside { opacity: .45; }
.calendar__cell--today { background: var(--today); }
.calendar__cell--today .day__num { font-weight: 700; color: var(--text); }

/* På smala skärmar ryms ingen text i rutorna: dagens namn syns i rutan som öppnas när man trycker */
@media (max-width: 40rem) {
    .day { min-height: 3.6rem; padding: .25rem; align-items: center; }
    .day__note { display: none; }
    .shift { min-width: 1.6rem; padding-inline: .2rem; }
    .calendar .calendar__week { width: 1.6rem; }
}

/* Kompakttabell: en rad per dag, en kolumn per lag. Raderna är låga så att en hel månad syns på en skärm. */
.compact-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.compact { width: 100%; border-collapse: collapse; }
.compact th, .compact td { padding: .2rem .5rem; text-align: center; white-space: nowrap; }
.compact thead th { padding-block: .5rem; font-size: .85rem; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--border); }
.compact .compact__week { width: 2.2rem; font-size: .75rem; font-weight: 400; color: var(--muted); }
.compact th.compact__day { text-align: left; font-weight: 400; min-width: 4.5rem; }
.compact .compact__note { text-align: left; font-size: .8rem; color: var(--muted); white-space: normal; }
.compact tbody tr { border-top: 1px solid var(--border); }
.compact tbody tr:first-child { border-top: 0; }
.compact .compact__row--week { border-top: 2px solid var(--border); }
.compact tbody tr { cursor: pointer; }
.compact tbody tr:hover { background: var(--accent-soft); }
/* Dagen är en knapp (nåbar med tangentbord) men ska se ut som vanlig text */
.compact__open { all: unset; cursor: pointer; }
.compact__open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.compact__row--red th, .compact__row--red .compact__note { color: var(--red-day); }
.compact__row--today { background: var(--today); }
.compact__row--today th.compact__day { font-weight: 700; }
@media (max-width: 40rem) {
    .compact th, .compact td { padding-inline: .3rem; }
    .compact thead .compact__note, .compact td.compact__note { display: none; }
}

/* Rutan "så jobbar alla lag" */
.day-dialog { width: min(32rem, calc(100vw - 2rem)); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); padding: 1.25rem; }
.day-dialog::backdrop { background: rgb(0 0 0 / .45); }
.day-dialog form { margin-top: 1rem; text-align: right; }
.day-detail__heading { margin: 0 0 .25rem; font-size: 1.15rem; }
.day-detail__note { margin: 0 0 .5rem; }
.day-table { width: 100%; border-collapse: collapse; }
.day-table th, .day-table td { padding: .45rem .25rem; border-top: 1px solid var(--border); text-align: left; vertical-align: top; }
.day-table th { font-weight: 600; width: 35%; }

.recent__list { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; gap: .5rem; flex-wrap: wrap; }

.picker { display: grid; gap: .6rem; margin-top: 1rem; }
.picker-request { margin-top: 1.25rem; }

.company { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.company > summary { padding: .85rem 1rem; font-weight: 600; cursor: pointer; }
.company[open] > summary { border-bottom: 1px solid var(--border); }

.schedules { list-style: none; margin: 0; padding: .25rem 1rem .5rem; }
.schedule { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; padding: .6rem 0; border-bottom: 1px solid var(--border); }
.schedule:last-child { border-bottom: 0; }
.schedule__name { flex: 1 1 14rem; }
.schedule__groups { display: flex; flex-wrap: wrap; gap: .4rem; }

/* Textsidor och formulär (kontakt) */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 1.25rem 0; max-width: 44rem; }
.card h2 { margin-top: 0; }
.contact-form { max-width: 44rem; margin-top: 1.25rem; }
.field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1rem; }
.field label { font-weight: 600; }
.field input, .field select, .field textarea {
    padding: .65rem .8rem; border: 1px solid var(--border); border-radius: .5rem;
    background: var(--surface); color: var(--text); font: inherit; max-width: 100%;
}
.field textarea { resize: vertical; }
.field-help { font-size: .9rem; }
.field-error { color: var(--red-day); font-size: .95rem; }
.btn {
    padding: .65rem 1.5rem; border: 0; border-radius: 999px; background: var(--accent); color: var(--bg);
    font: inherit; font-weight: 600; cursor: pointer;
}
.btn:hover { filter: brightness(1.1); }
.notice { max-width: 44rem; padding: .85rem 1.1rem; border-radius: var(--radius); border: 1px solid var(--border); margin: 1rem 0; }
.notice p { margin: .25rem 0 0; }
.notice--ok { background: light-dark(#e6f6ea, #17331f); border-color: light-dark(#9fd3ab, #2d6b3d); }
.notice--error { background: light-dark(#fdeaea, #3a1c1c); border-color: light-dark(#e0a3a3, #7a3434); }
/* Honungsburken: utanför skärmen, inte display:none (då hoppar en del robotar över den) */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Sidfot */
.site-footer { border-top: 1px solid var(--border); padding-block: 1.25rem; color: var(--muted); font-size: .9rem; }

/* Knapparna för att byta månad under kalendern/tabellen: stora, så att tummen når dem på en mobil. De visas BARA på
   mobil (smal skärm, se @media längre ned); på en dator räcker månadsraden ovanför. */
.month-bottomnav { display: none; grid-template-columns: 1fr auto 1fr; gap: .5rem; margin-top: 1rem; }
.nav-btn--big { height: 2.75rem; padding: 0 1rem; font-size: 1rem; }
.month-bottomnav .nav-btn--big:first-child { justify-content: flex-start; }
.month-bottomnav .nav-btn--big:last-child { justify-content: flex-end; }

/* MOBIL (smal skärm). Syftet är att visa kalendern så högt upp som möjligt: ett smalt sidhuvud med hamburgarmeny, inget
   "tillbaka"-länk och inget företagsnamn (menyn har Välj schema, och schemats namn räcker), små val av lag och vy, och en
   månadsrad på en enda rad. */
@media (max-width: 40rem) {
    main { padding-block: .75rem 2rem; }
    h1 { font-size: 1.3rem; margin-bottom: .25rem; }

    /* Sidhuvud: märket och hamburgarknappen på en rad. Menyn och temaknappen fälls ut under, när knappen trycks. */
    .site-header__inner { gap: .5rem; padding-block: .5rem; }
    .brand { font-size: 1.15rem; }
    .js .menu-toggle { display: inline-flex; }
    .js .site-menu { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: .5rem; padding-bottom: .25rem; }
    .js .site-menu.is-open { display: flex; }
    .site-nav { flex-direction: column; gap: .1rem; }
    .site-nav a { padding: .6rem .75rem; border-radius: .5rem; }
    .site-nav .site-nav__companies { margin-left: 0; }   /* i kolumnen ligger den sist, utan att skjutas åt sidan */
    .theme-toggle { margin-left: 0; align-self: flex-start; }

    /* Schemasidan */
    .back-link { display: none; }  /* menyn har redan Välj schema */
    .schedule-logo { height: 2.25rem; padding: .2rem; }
    /* Företagsnamnet döljs för ögat men finns kvar för skärmläsare */
    .schedule-header p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

    /* Lagen i en enda rad som går att dra i sidled (det valda laget scrollas fram av menu.js) */
    .chips { flex-wrap: nowrap; overflow-x: auto; gap: .35rem; margin: .5rem -1rem; padding: 0 1rem .25rem; scrollbar-width: none; }
    .chips::-webkit-scrollbar { display: none; }
    .chip { padding: .2rem .65rem; font-size: .88rem; white-space: nowrap; flex: 0 0 auto; }
    .segmented a { padding: .25rem .85rem; font-size: .9rem; }
    .schedule-view { margin-top: .75rem; }

    /* Månadsraden: månaden till vänster och knapparna till höger, på en rad */
    /* Vyvalet på en egen rad ovanför månadsraden. Mellanrummet ner till kalendern ligger på raden, eftersom
       ".toolbar-row .calendar-toolbar" (marginal 0, för bred skärm) är mer specifik än ".calendar-toolbar" nedan. */
    .toolbar-row { display: block; margin-bottom: .5rem; }
    .toolbar-row .segmented { margin-left: 0; margin-bottom: .5rem; }
    .calendar-toolbar { flex-wrap: nowrap; justify-content: space-between; gap: .35rem; margin-bottom: .5rem; }
    .calendar-toolbar__title { order: -1; font-size: 1.05rem; }
    .calendar-toolbar__nav { gap: .25rem; }
    .nav-btn { min-width: 2rem; height: 2rem; padding: 0 .5rem; font-size: 1.1rem; }
    .nav-btn--text { font-size: .85rem; }
    .nav-btn--big { height: 2.75rem; padding: 0 .75rem; font-size: .95rem; }
    .month-bottomnav { display: grid; }
    .jump__menu { left: auto; right: 0; }
    .calendar th { padding: .3rem .15rem; font-size: .75rem; }
}

/* Mindre rörelse för den som ställt in det i sitt system */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}