/* ==========================================================================
   ESEM-paletten
   Tvåfärgssystem: orange = handling, grönt = avklarat. Allt annat bärs av
   vitt, offwhite och grafit.

   Appen bygger på Bootstrap 5.3. Filen är därför uppdelad i:
     1. Tokens (ljust + mörkt läge)
     2. Bro till Bootstraps egna variabler
     3. Komponentöverstyrningar

   Använd alltid var(--token) — aldrig en hexfärg direkt i HTML, JS eller
   inline-stil.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */

:root {
  /* Handling */
  --accent: #b4531b;
  --accent-hover: #96430f;
  --accent-text: #ffffff;
  --accent-ink: #8f4315;
  --accent-soft: #f7ebe0;
  --accent-chip: #8c400f;

  /* Status */
  --done: #46731f;
  --done-soft: #eaf1dd;
  --done-check: #ffffff;

  /* Grund och text */
  --bg: #f4f4f1;
  --surface: #ffffff;
  --surface-2: #e9e9e3;
  --primary: #1f2a2a;
  --text: #252525;
  --text-soft: #5c615c;
  --line: #d9ddd8;
  --control-line: #787d77;
  --focus: #1f2a2a;

  /* Ägaretiketter och tips */
  --owner-chef: #e6efd9;
  --owner-chef-text: #3f5a1e;
  --owner-person: #e9e9f4;
  --owner-person-text: #3d3d6b;
  --owner-it: #e1eff1;
  --owner-it-text: #17535e;
  --owner-hr: #f6e8ec;
  --owner-hr-text: #7a3146;
  --tip-bg: #f7f1e2;
  --tip-text: #4c4531;

  /* Utanför ESEM-paletten -------------------------------------------------
     Paletten saknar en färg för destruktiva åtgärder och felmeddelanden.
     Appen behöver en: "Ta bort" och "Kunde inte hämta data" måste läsas som
     något annat än en vanlig handling. Rödtonen är hållen i samma brända,
     lågmättade familj som --accent och används ENDAST för radering och fel —
     aldrig som statusfärg, kategori eller dekoration. Byt ut den om ESEM
     fastställer en egen felfärg. */
  --danger: #a32b1c;
  --danger-text: #ffffff;
  --danger-ink: #96271a;
  --danger-soft: #f9e7e3;
}

/* Mörkt läge gäller skärm. På papper är underlaget alltid vitt, så
   utskriften ska använda ljusa tokens även när skärmen står i mörkt läge –
   annars trycks ljus text på vitt papper. */
@media screen and (prefers-color-scheme: dark) {
  :root {
    --accent: #d2762f;
    --accent-hover: #e08b47;
    --accent-text: #161a12;
    --accent-ink: #f0a06a;
    --accent-soft: #3a2416;
    --accent-chip: #eda274;

    --done: #a8cf6e;
    --done-soft: #1f2818;
    --done-check: #14180f;

    --bg: #141918;
    --surface: #1c2322;
    --surface-2: #272f2d;
    --primary: #eceeec;
    --text: #eceeec;
    --text-soft: #a3aaa5;
    --line: #343c3a;
    --control-line: #7d857f;
    --focus: #eceeec;

    --owner-chef: #26301c;
    --owner-chef-text: #b3d18a;
    --owner-person: #26264a;
    --owner-person-text: #bdbdf0;
    --owner-it: #153338;
    --owner-it-text: #93d3de;
    --owner-hr: #33202a;
    --owner-hr-text: #eba8be;
    --tip-bg: #2b2718;
    --tip-text: #e6dbb4;

    /* Utanför ESEM-paletten, se kommentaren ovan. */
    --danger: #e0755f;
    --danger-text: #1a0f0c;
    --danger-ink: #f0a394;
    --danger-soft: #3a1e18;
  }
}

/* 2. Bro till Bootstrap ---------------------------------------------------- */

:root {
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-emphasis-color: var(--primary);
  --bs-secondary-color: var(--text-soft);
  --bs-tertiary-bg: var(--surface-2);
  --bs-border-color: var(--line);
  --bs-border-color-translucent: var(--line);
  --bs-link-color: var(--accent-ink);
  --bs-link-hover-color: var(--accent-ink);
  --bs-heading-color: var(--primary);
  --bs-body-font-size: 1rem;
  --bs-border-radius: .375rem;
}

body {
  background-color: var(--bg);
  color: var(--text);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--primary);
}

hr,
.dropdown-divider {
  border-top-color: var(--line);
  opacity: 1;
}

/* Länkar bär --accent-ink, aldrig --accent: fyllningsorangen faller under
   4,5:1 mot de tonade ytorna den möter i den här appen. */
a {
  color: var(--accent-ink);
  text-underline-offset: .15em;
}

a:hover,
a:focus {
  color: var(--accent-ink);
}

/* Bootstraps färgverktygsklasser pekas om mot paletten, så att gammal markup
   inte kan råka rita en Bootstrap-blå eller Bootstrap-grön yta. */
.text-primary { color: var(--primary) !important; }
.text-secondary,
.text-muted { color: var(--text-soft) !important; }
.text-dark { color: var(--text) !important; }
.text-white { color: var(--surface) !important; }
.text-white-50 { color: var(--text-soft) !important; }
.text-danger { color: var(--danger-ink) !important; }
.text-warning { color: var(--tip-text) !important; }
.bg-light { background-color: var(--surface-2) !important; }
.bg-white { background-color: var(--surface) !important; }
.bg-body,
.bg-body-tertiary { background-color: var(--bg) !important; }
.border,
.border-top,
.border-bottom,
.border-start,
.border-end { border-color: var(--line) !important; }

/* 3. Fokus ----------------------------------------------------------------- */

/* Fokusringen är grafit, aldrig orange: en orange ring runt en orange knapp
   landar på 2,95:1 och är i praktiken osynlig för den som behöver den.
   Ringen ritas med 2px offset och gränsar därför mot sidytan, inte mot
   knappfyllningen — 13,4:1 mot --bg och 14,8:1 mot --surface.

   Komponenterna räknas upp var för sig med flit. Bootstrap nollställer
   fokusringen per komponent (`.btn:focus-visible { outline: 0 }`), och en
   ensam `:focus-visible` (0,1,0) förlorar mot deras klass + pseudoklass
   (0,2,0). Utan de här selektorerna saknar varje knapp, fält och kryssruta
   synlig fokusmarkering — alltså just där den behövs mest. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.btn:focus-visible,
.btn-check:focus-visible + .btn,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.accordion-button:focus-visible,
.nav-link:focus-visible,
.navbar-brand:focus-visible,
.navbar-toggler:focus-visible,
.dropdown-item:focus-visible,
.list-group-item-action:focus-visible,
.page-link:focus-visible,
.btn-close:focus-visible,
.esem-filtertagg__bort:focus-visible,
.komp-sok-post:focus-visible,
a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: none;
}

/* Bootstraps egen blå fokusskugga bort — ringen ovan ersätter den. */
.btn:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.accordion-button:focus,
.page-link:focus,
.btn-close:focus {
  box-shadow: none;
  border-color: var(--control-line);
}

/* 4. Knappar --------------------------------------------------------------- */

/* Primärknapp = handling. Bootstraps primary, success och dark pekas alla hit:
   grönt får aldrig sitta på något klickbart, det skulle konkurrera med
   handlingsfärgen om samma uppmärksamhet. */
.btn-primary,
.btn-success,
.btn-dark {
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-color: var(--accent-text);
  --bs-btn-hover-bg: var(--accent-hover);
  --bs-btn-hover-border-color: var(--accent-hover);
  --bs-btn-hover-color: var(--accent-text);
  --bs-btn-active-bg: var(--accent-hover);
  --bs-btn-active-border-color: var(--accent-hover);
  --bs-btn-active-color: var(--accent-text);
  --bs-btn-disabled-bg: var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
  --bs-btn-disabled-color: var(--accent-text);
}

/* Räknarchip inuti en orange knapp. */
.btn-primary .badge,
.btn-success .badge {
  background-color: var(--accent-text);
  color: var(--accent-chip);
}

/* Sekundärknapp = vit yta med kontrollram, fylls med orange vid hover. */
.btn-secondary,
.btn-light,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-light,
.btn-outline-info {
  --bs-btn-bg: var(--surface);
  --bs-btn-border-color: var(--control-line);
  --bs-btn-color: var(--text);
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-hover-color: var(--accent-text);
  --bs-btn-active-bg: var(--accent-hover);
  --bs-btn-active-border-color: var(--accent-hover);
  --bs-btn-active-color: var(--accent-text);
  --bs-btn-disabled-bg: var(--surface);
  /* --line, inte --control-line: WCAG 1.4.11 undantar inaktiva kontroller, och
     en ram i full kontrollstyrka skulle fa knappen att se klickbar ut. */
  --bs-btn-disabled-border-color: var(--line);
  --bs-btn-disabled-color: var(--text-soft);
}

/* Destruktivt. Utanför paletten — se kommentaren vid --danger. */
.btn-danger {
  --bs-btn-bg: var(--danger);
  --bs-btn-border-color: var(--danger);
  --bs-btn-color: var(--danger-text);
  --bs-btn-hover-bg: var(--danger-ink);
  --bs-btn-hover-border-color: var(--danger-ink);
  --bs-btn-hover-color: var(--danger-text);
  --bs-btn-active-bg: var(--danger-ink);
  --bs-btn-active-border-color: var(--danger-ink);
  --bs-btn-active-color: var(--danger-text);
}

.btn-outline-danger {
  --bs-btn-bg: var(--surface);
  --bs-btn-border-color: var(--control-line);
  --bs-btn-color: var(--danger-ink);
  --bs-btn-hover-bg: var(--danger);
  --bs-btn-hover-border-color: var(--danger);
  --bs-btn-hover-color: var(--danger-text);
  --bs-btn-active-bg: var(--danger-ink);
  --bs-btn-active-border-color: var(--danger-ink);
  --bs-btn-active-color: var(--danger-text);
}

.btn-close {
  filter: none;
}

/* 5. Formulär -------------------------------------------------------------- */

/* Textfält är en nedsänkt yta, och ramen hör till en kontroll: --control-line,
   inte --line. --line ligger på ~1,3:1 och klarar inte WCAG 1.4.11. */
.form-control,
.form-select,
.input-group-text {
  background-color: var(--surface-2);
  border-color: var(--control-line);
  color: var(--text);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--surface-2);
  color: var(--text);
}

.form-control::placeholder {
  color: var(--text-soft);
  opacity: 1;
}

.input-group-text {
  color: var(--text-soft);
}

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

.form-text {
  color: var(--text-soft);
}

/* Kryssrutan är systemets ena sanktionerade gröna yta: ifylld = avklarat.
   Bocken använder --done-check, inte hårdkodad vit — en vit bock blir oläslig
   mot den ljusa gröna rutan i mörkt läge. */
.form-check-input {
  background-color: var(--surface);
  border-color: var(--control-line);
}

.form-check-input:checked {
  background-color: var(--done);
  border-color: var(--done);
}

.form-check-input:checked[type="checkbox"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

@media (prefers-color-scheme: dark) {
  .form-check-input:checked[type="checkbox"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2314180f' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  }
}

.form-check-label {
  color: var(--text);
}

/* 6. Kort ------------------------------------------------------------------ */

/* Kort får ingen skugga — bara det som faktiskt svävar över innehållet
   (dropdown, modal) skuggas. Växlingen mellan --surface och --bg bär
   strukturen i stället. */
.card {
  background-color: var(--surface);
  border-color: var(--line);
}

.card.shadow-sm,
.card.shadow {
  box-shadow: none !important;
}

/* Kortrubriken är struktur, inte kategori: neutral grafit i stället för en
   färgkodad rubrikrad per innehållstyp. Ikonen och texten säger vad kortet är. */
.card-header {
  font-size: .95rem;
  background-color: var(--surface-2);
  border-bottom-color: var(--line);
  color: var(--primary);
  font-weight: 600;
}

.card-footer {
  background-color: transparent;
  border-top-color: var(--line);
}

.card-title {
  color: var(--primary);
}

/* Fritext som skrivits med radbrytningar – syftet på en befattning – behåller
   dem vid utskrift på skärm. Ingen färg och ingen ram: texten är brödtext, det
   enda som skiljer den från annan brödtext är att raderna står kvar. */
.esem-fritext {
  white-space: pre-line;
}

.befattning-kort {
  transition: transform .15s ease, border-color .15s ease;
}

.befattning-kort:hover {
  transform: translateY(-3px);
  border-color: var(--control-line);
}

/* 7. Header och footer ----------------------------------------------------- */

/* Headern är vit med mörk text — inte en mörk platta. */
.navbar {
  background-color: var(--surface) !important;
  border-bottom: 1px solid var(--line);
  box-shadow: none !important;
}

.navbar .navbar-brand {
  color: var(--primary);
}

.navbar .nav-link {
  color: var(--text);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--accent-ink);
}

/* Aktiv sida markeras med en orange underkant: en liten highlight som pekar
   ut var man är, utan att måla en yta. */
.navbar .nav-link.active {
  color: var(--accent-ink);
  box-shadow: inset 0 -3px 0 var(--accent);
}

.navbar-toggler {
  border-color: var(--control-line);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231f2a2a' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (prefers-color-scheme: dark) {
  .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23eceeec' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }
}

.navbar-anvandare {
  color: var(--text-soft);
}

footer {
  font-size: .8rem;
  background-color: var(--surface) !important;
  border-top: 1px solid var(--line);
  color: var(--text-soft);
}

/* 8. Etiketter ------------------------------------------------------------- */

/* En etikett svarar på en av tre frågor: vad är det här för sorts sak
   (kategori → ägarfamiljen), i vilket läge är den (neutral eller klar), eller
   är det något att se upp med (tips). Ingen etikett är klickbar utom
   .esem-etikett--lank, och ingen av dem är orange: orange är reserverat för
   knappar och länkar. */
.esem-etikett {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .2em .55em;
  font-size: .75em;
  font-weight: 600;
  line-height: 1.2;
  border-radius: .3rem;
  border: 1px solid transparent;
  white-space: nowrap;
  vertical-align: middle;
}

/* Neutralt läge: inaktiv, tabellnamn, antal. */
.esem-etikett--neutral {
  background-color: var(--surface-2);
  color: var(--text);
  border-color: var(--line);
}

/* Nivå 1–5. Siffran bär informationen; en femfärgad regnbåge skulle vara
   dekoration och konkurrera med de två färger som betyder något. */
.esem-etikett--niva {
  background-color: var(--surface-2);
  color: var(--text);
  border-color: var(--control-line);
  font-variant-numeric: tabular-nums;
}

/* Räknare: antal befattningar, antal uppdrag. */
.esem-etikett--antal {
  background-color: var(--surface);
  color: var(--text-soft);
  border-color: var(--line);
  font-variant-numeric: tabular-nums;
}

/* Avklarat/på. Grönt sitter här därför att det är ett facit, inte en handling. */
.esem-etikett--klar {
  background-color: var(--done-soft);
  color: var(--text);
  border-color: var(--done);
}

/* Något att se upp med: överlapp, upprepning. */
.esem-etikett--tips {
  background-color: var(--tip-bg);
  color: var(--tip-text);
  border-color: var(--tip-text);
}

/* Krav: obligatoriskt kontra meriterande. Skillnaden bärs av vikt, inte kulör
   — det är ett strängkrav, inte ett fel. */
.esem-etikett--obligatorisk {
  background-color: var(--primary);
  color: var(--bg);
}

.esem-etikett--meriterande {
  background-color: var(--surface-2);
  color: var(--text-soft);
  border-color: var(--line);
}

/* Kategori- och källetiketter använder ägarfamiljen (--owner-*). Det är samma
   jobb som Chef/Medarbetare/IT/HR: en liten neutral bricka som säger vilken
   hink något hör till. Hitta aldrig på en egen hexfärg här. */
.esem-etikett--kat-a {
  background-color: var(--owner-chef);
  color: var(--owner-chef-text);
}

.esem-etikett--kat-b {
  background-color: var(--owner-person);
  color: var(--owner-person-text);
}

.esem-etikett--kat-c {
  background-color: var(--owner-it);
  color: var(--owner-it-text);
}

.esem-etikett--kat-d {
  background-color: var(--owner-hr);
  color: var(--owner-hr-text);
}

/* Destruktiv historik: borttaget. Utanför paletten, se --danger. */
.esem-etikett--borttagen {
  background-color: var(--danger-soft);
  color: var(--danger-ink);
}

/* Klickbar etikett — därför understruken vid hover och i handlingsfärgens
   textton, inte i någon av brickfärgerna. */
.esem-etikett--lank {
  background-color: var(--surface-2);
  color: var(--accent-ink);
  border-color: var(--control-line);
  text-decoration: none;
}

.esem-etikett--lank:hover {
  color: var(--accent-ink);
  text-decoration: underline;
}

/* Vald filtertagg i egenskapssoken. Sjalva taggen ar en kategoribricka ur
   agarfamiljen; kryssknappen inuti arver brickans textfarg i stallet for att
   vara hardkodat vit, som Bootstraps .btn-close-white ar. */
.esem-filtertagg {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .35rem .5rem .35rem .75rem;
  font-size: .82rem;
  line-height: 1.3;
  border-radius: .3rem;
}

.esem-filtertagg__typ {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .8;
  margin-right: .25rem;
}

.esem-filtertagg__bort {
  display: inline-flex;
  align-items: center;
  padding: .1rem .2rem;
  margin-left: .35rem;
  font-size: .65rem;
  line-height: 1;
  color: inherit;
  background: none;
  border: 0;
  border-radius: .2rem;
  cursor: pointer;
}

.esem-filtertagg__bort:hover {
  background-color: rgba(0, 0, 0, .12);
}

@media (prefers-color-scheme: dark) {
  .esem-filtertagg__bort:hover {
    background-color: rgba(255, 255, 255, .16);
  }
}

/* Forslagsraden i egenskapssoken: markering med den lilla highlightytan, inte
   med Bootstraps bla .active. */
.forslag-rad.active,
.forslag-rad:hover {
  background-color: var(--accent-soft);
  color: var(--accent-ink);
}

.list-group-item-secondary {
  background-color: var(--surface-2);
  color: var(--text-soft);
}

/* Utfalld detaljrad i andringsloggen: en nedsankt yta, inte en egen kulor. */
.andringslogg-detalj {
  background-color: var(--surface-2);
  border-bottom: 1px solid var(--line);
}

/* 9. Tabeller -------------------------------------------------------------- */

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--line);
  --bs-table-hover-bg: var(--surface-2);
  --bs-table-hover-color: var(--text);
}

.table th {
  white-space: nowrap;
}

.table > thead,
.table-light,
.table > thead.table-light > tr > th {
  background-color: var(--surface-2);
  color: var(--primary);
  border-bottom-color: var(--line);
}

/* 10. Meddelanden ---------------------------------------------------------- */

.alert {
  border-width: 1px;
  border-style: solid;
}

/* Info och varning delar tipsrutans ton: båda är "läs det här", inte "något
   är trasigt". */
.alert-info,
.alert-warning,
.alert-primary,
.alert-secondary {
  background-color: var(--tip-bg);
  border-color: var(--tip-text);
  color: var(--tip-text);
}

.alert-success {
  background-color: var(--done-soft);
  border-color: var(--done);
  color: var(--text);
}

.alert-danger {
  background-color: var(--danger-soft);
  border-color: var(--danger-ink);
  color: var(--danger-ink);
}

.alert a,
.alert .alert-link {
  color: inherit;
  font-weight: 600;
}

/* 11. Dragspel, brödsmulor, dropdown, modal -------------------------------- */

.accordion {
  --bs-accordion-bg: var(--surface);
  --bs-accordion-color: var(--text);
  --bs-accordion-border-color: var(--line);
  --bs-accordion-btn-bg: var(--surface);
  --bs-accordion-btn-color: var(--primary);
  --bs-accordion-active-bg: var(--surface-2);
  --bs-accordion-active-color: var(--primary);
  --bs-accordion-btn-focus-box-shadow: none;
}

.accordion-button::after,
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231f2a2a'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

@media (prefers-color-scheme: dark) {
  .accordion-button::after,
  .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23eceeec'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  }
}

.breadcrumb {
  --bs-breadcrumb-divider-color: var(--text-soft);
  --bs-breadcrumb-item-active-color: var(--text-soft);
}

/* Dropdown och modal svävar faktiskt över innehållet och får därför skugga. */
.dropdown-menu {
  --bs-dropdown-bg: var(--surface);
  --bs-dropdown-color: var(--text);
  --bs-dropdown-border-color: var(--line);
  --bs-dropdown-link-color: var(--text);
  --bs-dropdown-link-hover-bg: var(--surface-2);
  --bs-dropdown-link-hover-color: var(--accent-ink);
  --bs-dropdown-link-active-bg: var(--accent);
  --bs-dropdown-link-active-color: var(--accent-text);
  box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .12);
}

.modal-content {
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--line);
}

.modal-header,
.modal-footer {
  border-color: var(--line);
}

.list-group {
  --bs-list-group-bg: var(--surface);
  --bs-list-group-color: var(--text);
  --bs-list-group-border-color: var(--line);
  --bs-list-group-action-hover-bg: var(--surface-2);
  --bs-list-group-action-hover-color: var(--text);
}

/* Laddningssnurran ar varken en handling eller ett facit — den gar inte att
   klicka pa och betyder inte "klart". Darfor grafit, inte orange. */
.spinner-border {
  color: var(--text-soft);
}

/* 12. Kompetens-autocomplete ----------------------------------------------- */

.komp-sok-dropdown {
  position: absolute;
  z-index: 1050;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: .375rem;
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .12);
  max-height: 240px;
  overflow-y: auto;
}

.komp-sok-kategori {
  padding: .25rem .75rem;
  font-size: .7rem;
  font-weight: 600;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
}

.komp-sok-post {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .4rem .75rem;
  font-size: .85rem;
  color: var(--text);
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}

.komp-sok-post:hover,
.komp-sok-post.active {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.komp-sok-post:last-child {
  border-bottom: none;
}

.komp-sok-niva {
  font-size: .75rem;
  color: var(--text-soft);
  white-space: nowrap;
  margin-left: .5rem;
}

/* 13. Uppdragsval och profiler ---------------------------------------------- */

/* Varje valbart uppdrag är en klickbar yta med en kryssruta i. Ramen hör till
   en kontroll och tar därför --control-line, inte den hårfina --line. */
.uppdragsval__post {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding: .65rem .75rem;
  background-color: var(--surface);
  border: 1px solid var(--control-line);
  border-radius: .375rem;
  cursor: pointer;
}

.uppdragsval__post:hover {
  background-color: var(--surface-2);
}

/* Ett förbockat uppdrag ingår i profilen — ett facit, inte en handling. Det
   är därför statusfamiljens ljusa ton och inte handlingsorangen som markerar
   valet, precis som kryssrutan i den redan är --done. */
.uppdragsval__post--vald {
  background-color: var(--done-soft);
}

.uppdragsval__post--vald:hover {
  background-color: var(--done-soft);
}

.uppdragsval__post:focus-within {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Brickorna som sammanfattar vad profilen består av: grunduppdraget plus
   tillvalen. */
.profil-sammansattning {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
}

/* 14. Utskrift -------------------------------------------------------------- */

/* En profil skrivs ofta ut eller sparas som pdf inför ett medarbetarsamtal.
   Då ska innehållet vara kvar och allt som bara går att klicka på försvinna. */
@media print {
  .navbar,
  footer,
  .alert-dismissible .btn-close,
  .d-print-none {
    display: none !important;
  }

  body {
    background-color: var(--surface);
  }

  .card,
  .accordion-item {
    border-color: var(--line);
    break-inside: avoid;
  }

  /* Dragspelen är utfällda på papper – ett hopfällt avsnitt är osynligt i en
     utskrift, och sammansättningen är just det man vill kunna läsa. */
  .accordion-collapse {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
  }

  .accordion-button::after {
    display: none;
  }
}