/* ITPlugg v20.69 – varumärkeslager
   Emblemet är en bild, namnet är riktig text. Det gör att ordmärket följer
   temafärgerna, håller sig skarpt vid alla skalningar och går att läsa upp
   för skärmläsare. Lagret är rent visuellt: inga bootkrokar, ingen observer,
   inga nätverksanrop och ingenting som fångar pekare.
   Ersätter brand-20.68.css. */

:root {
  --itp-mark: url('./itplugg-emblem-2069.png');
  --itp-mark-glow: drop-shadow(0 6px 16px rgba(46, 196, 232, .28));
}

/* =========================================================================
   1. Emblemet som märke i sidebar, kompaktnavigering och Lärarstudio.
   Den gamla plattan med ram tas bort – emblemet har egen lyster och behöver
   ingen ruta runt sig.
   ========================================================================= */
html[data-v1919-theme] .v1919-dev-brand > span,
html[data-itplugg-navigation="desktop"] .v1919-dev-brand > span,
.v1919-dev-brand > span,
html[data-v1919-theme] .v1939-brand-mark,
.v1939-brand-mark {
  color: transparent !important;
  font-size: 0 !important;
  background: var(--itp-mark) center / contain no-repeat !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  filter: var(--itp-mark-glow) !important;
  overflow: visible !important;
}

.v1919-dev-brand > span img,
.v1939-brand-mark img { display: none !important; }

.v2052-studio-mark {
  background: var(--itp-mark) center / contain no-repeat !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: var(--itp-mark-glow) !important;
}
.v2052-studio-mark span { display: none !important; }

/* =========================================================================
   2. Sidebar – två lägen.
   Öppen: emblem till vänster, ITPlugg och studieportal till höger.
   Minimerad: bara emblemet, större och centrerat, eftersom det då är
   sidebarens enda identitetsbärare.
   ========================================================================= */

/* Öppet läge: visa ordmärket igen. Bastemat gömmer det alltid. */
html[data-itplugg-navigation="desktop"] body:not(.v1919-nav-collapsed):not(.v1923-auto-compact) .v1919-dev-brand > div {
  display: block !important;
  min-width: 0;
}
html[data-itplugg-navigation="desktop"] body:not(.v1919-nav-collapsed):not(.v1923-auto-compact) .v1919-dev-brand > span {
  flex: 0 0 34px !important;
  height: 34px !important;
}
.v1919-dev-brand b {
  letter-spacing: -.02em;
  font-size: 15.5px;
}
.v1919-dev-brand small {
  opacity: .8;
  letter-spacing: .14em;
}

/* Minimerat läge: emblemet ensamt, centrerat och något större. */
html[data-itplugg-navigation="desktop"] body.v1919-nav-collapsed .v1919-dev-brand,
html[data-itplugg-navigation="desktop"] body.v1923-auto-compact .v1919-dev-brand {
  justify-content: center !important;
  gap: 0 !important;
}
html[data-itplugg-navigation="desktop"] body.v1919-nav-collapsed .v1919-dev-brand > span,
html[data-itplugg-navigation="desktop"] body.v1923-auto-compact .v1919-dev-brand > span {
  flex: 0 0 40px !important;
  height: 40px !important;
  margin: 2px auto 4px !important;
  filter: drop-shadow(0 8px 20px rgba(46, 196, 232, .38)) !important;
}

/* Mobilen öppnar sidebaren som en låda – där ska hela lockupen synas. */
@media (max-width: 900px) {
  .v1919-dev-sidebar .v1919-dev-brand > div { display: block !important; }
  .v1919-dev-sidebar .v1919-dev-brand { justify-content: flex-start !important; gap: 10px !important; }
  .v1919-dev-sidebar .v1919-dev-brand > span { flex: 0 0 34px !important; height: 34px !important; margin: 0 !important; }
}

/* =========================================================================
   3. Sidhuvudets lockup: emblem till vänster, namnet som text till höger.
   Tidigare låg hela loggan som en enda bild och texten var dold. Nu bär
   texten namnet, vilket gör den skarp i alla storlekar och läsbar i alla teman.
   ========================================================================= */
.brand-lockup {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  min-width: 0;
}

.brand-logo-primary {
  display: block !important;
  flex: 0 0 auto !important;
  width: 62px !important;
  height: 62px !important;
  max-width: none !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  background: none !important;
  filter: drop-shadow(0 10px 24px rgba(46, 196, 232, .26)) !important;
}

/* Bastemat gömmer textblocket med clip. Här tas det fram igen. */
.brand-lockup > div {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  border: 0 !important;
  min-width: 0;
}

.brand-lockup .kick {
  margin: 0 0 3px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .17em !important;
  text-transform: uppercase !important;
  opacity: .72;
}

.brand-lockup h1 {
  margin: 0 !important;
  font-size: clamp(27px, 4.2vw, 35px) !important;
  line-height: .98 !important;
  letter-spacing: -.035em !important;
  font-weight: 800 !important;
}

@media (max-width: 640px) {
  .brand-lockup { gap: 12px !important; }
  .brand-logo-primary { width: 50px !important; height: 50px !important; }
  .brand-lockup h1 { font-size: 25px !important; }
  .brand-lockup .kick { font-size: 9.5px !important; letter-spacing: .14em !important; }
}

/* På desktop bor det riktiga varumärket i sidebaren. Undvik dubbel lockup. */
html[data-itplugg-navigation="desktop"] body.v1919-nav-active .site-header .brand-lockup,
html[data-itplugg-navigation="desktop"] body.v1919-nav-collapsed .site-header .brand-lockup,
html[data-itplugg-navigation="desktop"] body.v1923-auto-compact .site-header .brand-lockup {
  display: none !important;
}
html[data-itplugg-navigation="desktop"] body.v1919-nav-active .site-header,
html[data-itplugg-navigation="desktop"] body.v1919-nav-collapsed .site-header,
html[data-itplugg-navigation="desktop"] body.v1923-auto-compact .site-header {
  min-height: 0 !important;
  padding-top: 4px !important;
  justify-content: flex-end !important;
}

/* =========================================================================
   4. Sidebarens snabbstatus (oförändrad från v20.68).
   ========================================================================= */
.v2068-sidebar-status {
  margin: 10px 4px 4px;
  padding: 10px 11px;
  border: 1px solid rgba(76, 224, 241, .14);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(11, 34, 49, .72), rgba(5, 16, 26, .72));
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}
.v2068-sidebar-status > span { display: flex; align-items: center; gap: 7px; color: #b7cbd8; font-size: 10px; font-weight: 800; }
.v2068-sidebar-status > span i { width: 7px; height: 7px; border-radius: 50%; background: #49d9aa; box-shadow: 0 0 0 4px rgba(73, 217, 170, .10); }
.v2068-sidebar-status small { display: block; margin-top: 5px; color: #7591a4; font-size: 9px; line-height: 1.35; }
.v2068-sidebar-status[data-online="0"] > span i { background: #f1b955; box-shadow: 0 0 0 4px rgba(241, 185, 85, .10); }

html[data-itplugg-navigation="desktop"] body:not(.v1919-nav-collapsed):not(.v1923-auto-compact) .v1919-dev-sidebar {
  box-shadow: 16px 0 44px rgba(0, 0, 0, .12) !important;
}
html[data-itplugg-navigation="desktop"] .v1919-dev-sidebar nav button:focus-visible,
html[data-itplugg-navigation="desktop"] .v1919-dev-sidebar footer button:focus-visible {
  outline: 2px solid rgba(78, 218, 238, .72) !important;
  outline-offset: 2px !important;
}

/* Varumärket får aldrig blockera appen. */
.brand-logo-primary,
.v1919-dev-brand > span,
.v1939-brand-mark,
.v2052-studio-mark { pointer-events: none !important; }

@media (prefers-reduced-motion: reduce) {
  .brand-logo-primary, .v1919-dev-brand > span { transition: none !important; }
}

/* =========================================================================
   5. Marknadssidorna (produkt, demo, pilot, kvalitet …).
   Där låg hela loggan som en enda bild. Nu är emblemet en bild och namnet
   riktig text som ärver sidans textfärg.
   ========================================================================= */
.brand-logo {
  display: block !important;
  width: 44px !important;
  height: 44px !important;
  max-width: none !important;
  object-fit: contain !important;
  filter: drop-shadow(0 8px 20px rgba(46, 196, 232, .24)) !important;
}

.brand-word {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: inherit;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .brand-logo { width: 38px !important; height: 38px !important; }
  .brand-word { font-size: 17.5px; }
}

/* =========================================================================
   6. Snabbstatusen i minimerat läge.
   I den smala kolumnen får texten inte plats och kortet klämdes ihop till en
   oläslig klump. Minimerat reduceras kortet till enbart statusprickan –
   samma information, utan att bryta layouten.
   ========================================================================= */
html[data-itplugg-navigation="desktop"] body.v1919-nav-collapsed .v2068-sidebar-status,
html[data-itplugg-navigation="desktop"] body.v1923-auto-compact .v2068-sidebar-status {
  margin: 10px auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  display: grid !important;
  place-items: center !important;
}
html[data-itplugg-navigation="desktop"] body.v1919-nav-collapsed .v2068-sidebar-status > span b,
html[data-itplugg-navigation="desktop"] body.v1919-nav-collapsed .v2068-sidebar-status small,
html[data-itplugg-navigation="desktop"] body.v1923-auto-compact .v2068-sidebar-status > span b,
html[data-itplugg-navigation="desktop"] body.v1923-auto-compact .v2068-sidebar-status small {
  display: none !important;
}
html[data-itplugg-navigation="desktop"] body.v1919-nav-collapsed .v2068-sidebar-status > span,
html[data-itplugg-navigation="desktop"] body.v1923-auto-compact .v2068-sidebar-status > span {
  gap: 0 !important;
  justify-content: center !important;
}
html[data-itplugg-navigation="desktop"] body.v1919-nav-collapsed .v2068-sidebar-status > span i,
html[data-itplugg-navigation="desktop"] body.v1923-auto-compact .v2068-sidebar-status > span i {
  width: 9px !important;
  height: 9px !important;
}