/* Kunskap i Iteams interna VIG (internt material). Källa: vig.iteam.se, tokens via vig_get_design_tokens(intern).
   Regler: Iteam Orange är accent (aldrig grönt, aldrig som textfärg på ljust), ytor i Dimma-familjen,
   Iteam Dämpad för sekundär text, Roboto Light brödtext och Roboto Medium rubriker,
   orange accentlinje, subtil orange bakgrund i tabellhuvuden. INTERNT-stämpeln är medvetet utelämnad (beslut av Hans).

   OBS: Outline använder genererade klassnamn (sc-*). Väljarna nedan bygger på #sidebar, element och .ProseMirror,
   som är stabila. Sidopanel och dokumentyta är provade live mot Outline 1.10 (sidorna Keycloak och Rådighet). Kontrollera efter uppgradering. */

:root {
  --vig-ink: #19191B;
  --vig-dimma: #F4F5F8;
  --vig-dimma-mjuk: #EBEDF3;
  --vig-linje: #E1E3EA;
  --vig-linje-stark: #CACDD8;
  --vig-dampad: #62646C;
  --vig-orange: #FF8600;
  --vig-orange-text: #9A4F00;
}

@font-face { font-family: "Roboto"; font-weight: 300; font-style: normal; font-display: swap;
  src: url("/vig-tema/fonts/Roboto-Light.ttf") format("truetype"); }
@font-face { font-family: "Roboto"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/vig-tema/fonts/Roboto-Regular.ttf") format("truetype"); }
@font-face { font-family: "Roboto"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("/vig-tema/fonts/Roboto-Medium.ttf") format("truetype"); }

body, button, input, textarea, select {
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body { font-weight: 300; }

/* Orange accentlinje överst på varje sida. */
body::before {
  content: "";
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: var(--vig-orange); z-index: 10000; pointer-events: none;
}

/* Sidopanel enligt målbilden sales.iteam.se: Iteam Ink-yta, Linje-text, orange aktiv post med Ink-text.
   Provat mot Outline 1.10 i den inloggade vyn. #sidebar och .active/aria-current är stabila, klassnamnen sc-* är det inte. */
#sidebar { background: var(--vig-ink) !important; color: var(--vig-linje) !important; border-right: 1px solid #2a2a2e !important; }
#sidebar a, #sidebar button, #sidebar [role="button"] { color: var(--vig-linje) !important; font-weight: 400 !important; }
#sidebar a svg, #sidebar button svg { fill: currentColor !important; }
#sidebar a:hover, #sidebar button:hover { background: rgba(255, 255, 255, .07) !important; }
#sidebar a.active, #sidebar a[aria-current="page"] { background: var(--vig-orange) !important; color: var(--vig-ink) !important; font-weight: 500 !important; }
#sidebar span { color: inherit !important; }
#sidebar h3, #sidebar h3 button { color: #8C8C8C !important; font-size: 11px !important; font-weight: 500 !important;
  text-transform: uppercase; letter-spacing: .08em; }
/* Dokumentinnehåll (editorn): Ink-text, Roboto-skalan ur VIG, orange understrykning på länkar. */
.ProseMirror { color: var(--vig-ink); font-weight: 300; line-height: 1.5; }
.ProseMirror h1, .ProseMirror h2, .ProseMirror h3, .ProseMirror h4 { font-weight: 500; color: var(--vig-ink); }
.ProseMirror h2 { border-left: 3px solid var(--vig-orange); padding-left: 10px; }   /* kapitelmarkör */
.ProseMirror a { color: var(--vig-ink); text-decoration: underline;
  text-decoration-color: var(--vig-orange); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.ProseMirror a:hover { background: rgba(255, 134, 0, .13); }
.ProseMirror table th, .ProseMirror table thead td { background: rgba(255, 134, 0, .10) !important; color: var(--vig-ink) !important; font-weight: 500 !important; }  /* tabellhuvud; !important mot Outlines egen regel */
.ProseMirror td, .ProseMirror th { border-color: var(--vig-linje-stark); }
.ProseMirror hr { border-color: var(--vig-linje); }
.ProseMirror code { background: var(--vig-dimma-mjuk); }
.ProseMirror blockquote { border-left-color: var(--vig-orange); color: var(--vig-dampad); }

/* Skugga på högerkanten när en tabell går att scrolla i sidled (mobil). Outline har redan ytan, men utan bakgrund. */
.ProseMirror .table-wrapper.table-shadow-right::after,
.ProseMirror .table-wrapper.table-shadow-both::after {
  background: linear-gradient(to left, rgba(25, 25, 27, .18), rgba(25, 25, 27, 0)) !important; pointer-events: none; }

/* Mobilhuvudet i Outline 1.12: åtgärdspillret till höger krymper inte, och på samlingssidor innehåller det
   knappar med text ("Redigera", "Nytt dokument"). Under ~430 px trycker det menyknappen utanför skärmen.
   Här göms knapptexten på smala skärmar (ikonen blir kvar, texten finns kvar för skärmläsare).
   Väljaren: huvudet är första barnet under [role=main] > div, och kräver att det har ett piller med knappar,
   så att dokumentsidor (annan struktur) inte berörs. Provat live mot 1.12.0. Inte rapporterat uppströms än; ta bort regeln när Outline rättat det. */
@media (max-width: 480px) {
  [role="main"] > div > div:first-child:has(> div:last-child > div > [data-variant]) [data-variant] > span > svg + span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

::selection { background: rgba(255, 134, 0, .30); }