/* SmartCore — gemensam topprad (sc-header.css), v2 2026-10-14 (ström A "Skal"). Hör ihop med sc-header.js.
 * Färger och typsnitt från delens tokens (kontoret.css eller smartcore-tokens.css); saknas de används samma palett som reserv.
 * Tema: <html data-theme="dark|light"> — sc-header.js sätter alltid attributet (standard mörkt).
 * Klassnamnen .sc-user* är reserverade för delarnas egna element i facket (Nova, Rådet) och används inte här. */
.sc-top {
  --sch-bg: var(--topbar, var(--bg2, #10203C)); --sch-line: var(--line2, #1D3358); --sch-line2: var(--line, #274067); --sch-panel: var(--panel, #142848);
  --sch-fg: var(--fg, #F3F6FB); --sch-muted: var(--muted, #A9B4C6); --sch-dim: var(--dim, #8794AE); --sch-accent: var(--accent, #F5A524); --sch-on: var(--on-accent, #0B1730);
  --sch-hover: var(--hover, rgba(255, 255, 255, .06)); --sch-aktiv: rgba(255, 255, 255, .08);
  --sch-display: var(--display, 'Rubik', Arial, sans-serif); --sch-body: var(--body, 'IBM Plex Sans', Arial, sans-serif); --sch-mono: var(--mono, 'IBM Plex Mono', Consolas, monospace);
  --sch-shadow: var(--shadow, 0 12px 40px rgba(0, 0, 0, .35));
}
:root[data-theme="light"] .sc-top {
  --sch-bg: var(--topbar, var(--bg2, #EDF1F7)); --sch-line: var(--line2, #E8EDF5); --sch-line2: var(--line, #DCE3EE); --sch-panel: var(--panel, #FFFFFF);
  --sch-fg: var(--fg, #0B1730); --sch-muted: var(--muted, #4A5872); --sch-dim: var(--dim, #5F6B80);
  --sch-hover: var(--hover, rgba(11, 23, 48, .05)); --sch-aktiv: rgba(11, 23, 48, .06);
  --sch-shadow: var(--shadow, 0 12px 40px rgba(11, 23, 48, .12));
}

.sc-top, .sc-top * { box-sizing: border-box; }
.sc-top { position: relative; z-index: 30; display: flex; align-items: center; gap: 8px; height: 60px; padding: 0 16px; background: var(--sch-bg); color: var(--sch-fg); border-bottom: 1px solid var(--sch-line); font-family: var(--sch-body); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
/* nollställning: specificitet (0,1,0) — slår delarnas globala button-regler (Rådet: min-height 46px, ram, padding), men
 * komponenternas egna regler längre ned (tema, konto, språk) har samma eller högre specificitet och vinner */
.sc-top :where(button) { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; margin: 0; min-height: 0; border-radius: 0; font-weight: inherit; box-shadow: none; }
.sc-top a { text-decoration: none; }
.sc-top :focus-visible { outline: 2px solid var(--sch-accent); outline-offset: 2px; }
.sc-top [hidden] { display: none !important; }
.sc-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sc-i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* logotyp */
.sc-brand { display: flex; align-items: center; gap: 10px; color: var(--sch-fg); flex: none; margin-right: 6px; border-radius: 10px; }
.sc-logo { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, var(--sch-accent), #FFD27A); display: grid; place-items: center; color: #0B1730; font-family: var(--sch-display); font-weight: 700; font-size: 15px; box-shadow: 0 4px 14px rgba(245, 165, 36, .28); }
.sc-brand b { font-family: var(--sch-display); font-weight: 600; font-size: 17px; letter-spacing: .01em; }
.sc-brand .sc-sub { color: var(--sch-muted); font-size: 13px; font-weight: 600; }
.sc-brand .sc-sub:empty { display: none; }
.sc-env { font: 700 10.5px/1 var(--sch-body); letter-spacing: .08em; color: #0B1730; background: var(--sch-accent); border-radius: 999px; padding: 4px 8px; }

/* huvudmenyn */
/* menyn krymper aldrig (då lade den sig över företagschipet, 2026-10-22) – chipet krymper i stället, ner till bara ikonen */
.sc-nav { display: flex; align-items: center; flex: none; }
.sc-lista { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.sc-lista > li { display: flex; }
.sc-punkt { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border-radius: 10px; color: var(--sch-muted); font-weight: 500; font-size: 14.5px; white-space: nowrap; transition: background .15s, color .15s; }
.sc-punkt:hover { background: var(--sch-hover); color: var(--sch-fg); }
.sc-punkt[aria-current="page"] { background: var(--sch-aktiv); color: var(--sch-fg); font-weight: 600; }
.sc-punkt[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -11px; height: 2px; border-radius: 2px; background: var(--sch-accent); }
.sc-punkt[aria-current="page"] .sc-i { color: var(--sch-accent); }
.sc-punkt .sc-ext { width: 12px; height: 12px; opacity: .55; }
.sc-badge { min-width: 19px; height: 19px; padding: 0 6px; border-radius: 999px; background: var(--sch-accent); color: var(--sch-on); font: 700 11px/19px var(--sch-body); text-align: center; font-variant-numeric: tabular-nums; }
/* AI-teamet (Nova, Rådet): sekundärt — efter en avdelare, mindre och ljusare, så att det inte konkurrerar med huvuduppgifterna */
.sc-avdelare { width: 1px; height: 22px; margin: 0 8px; background: var(--sch-line2); }
.sc-punkt.sc-team { height: 34px; padding: 0 10px; font-size: 13.5px; color: var(--sch-dim); gap: 6px; }
.sc-punkt.sc-team .sc-i { width: 16px; height: 16px; opacity: .85; }
.sc-punkt.sc-team:hover { color: var(--sch-fg); }
.sc-punkt.sc-team[aria-current="page"] { color: var(--sch-fg); }
.sc-bara-mobil { display: none !important; }
.sc-grow { flex: 1; min-width: 8px; }
.sc-tools { display: flex; align-items: center; gap: 6px; flex: none; }

/* höger: företag, språk, tema, konto */
.sc-foretag { display: inline-flex; align-items: center; gap: 7px; height: 36px; max-width: 220px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--sch-line2); background: var(--sch-panel); color: var(--sch-muted); font-size: 13.5px; font-weight: 600; flex: 0 1 auto; min-width: 38px; transition: border-color .15s, color .15s; }
.sc-foretag .sc-i { width: 16px; height: 16px; }
.sc-foretag-namn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sc-foretag:hover, .sc-foretag[aria-current="page"] { color: var(--sch-fg); border-color: var(--sch-accent); }
/* delarnas egna ikonknappar (Nova): luftiga utan ram, ram vid hovring */
.sc-ikon { width: 36px; height: 36px; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--sch-fg); display: grid; place-items: center; transition: background .15s, border-color .15s; }
.sc-ikon:hover { border-color: var(--sch-accent); }
.sc-ikon[aria-pressed="true"] { background: var(--sch-accent); color: var(--sch-on); border-color: var(--sch-accent); }
.sc-ikon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sc-lang { display: inline-flex; border: 1px solid var(--sch-line2); border-radius: 999px; overflow: hidden; background: var(--sch-panel); flex: none; }
.sc-lang button { padding: 7px 10px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--sch-muted); transition: background .15s, color .15s; }
.sc-lang button:hover { color: var(--sch-fg); }
.sc-lang button[aria-pressed="true"] { background: var(--sch-accent); color: var(--sch-on); }
.sc-lang button:focus-visible { outline-offset: -2px; }
.sc-theme { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--sch-line2); background: var(--sch-panel); color: var(--sch-fg); display: grid; place-items: center; flex: none; transition: border-color .15s; }
.sc-theme:hover { border-color: var(--sch-accent); }
.sc-theme .sc-sun, .sc-theme .sc-moon { grid-area: 1 / 1; transition: opacity .2s, transform .3s; }
/* mörkt tema → solen visas (byt till ljust); ljust → månen */
.sc-theme .sc-sun { opacity: 1; transform: none; } .sc-theme .sc-moon { opacity: 0; transform: rotate(-60deg) scale(.6); }
:root[data-theme="light"] .sc-theme .sc-sun { opacity: 0; transform: rotate(60deg) scale(.6); } :root[data-theme="light"] .sc-theme .sc-moon { opacity: 1; transform: none; }
.sc-logout { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--sch-line2); color: var(--sch-muted); font-size: 13.5px; font-weight: 600; flex: none; transition: border-color .15s, color .15s; }
.sc-logout:hover { color: var(--sch-fg); border-color: var(--sch-accent); }
.sc-menu { display: none; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--sch-line2); background: var(--sch-panel); color: var(--sch-fg); place-items: center; flex: none; }

/* användarmeny */
.sc-konto { position: relative; flex: none; }
.sc-konto-knapp { display: inline-flex; align-items: center; gap: 4px; height: 38px; padding: 2px 8px 2px 2px; border-radius: 999px; border: 1px solid var(--sch-line2); background: var(--sch-panel); transition: border-color .15s; }
.sc-konto-knapp:hover, .sc-konto.open .sc-konto-knapp, .sc-konto-aktiv .sc-konto-knapp { border-color: var(--sch-accent); }
.sc-konto-knapp .sc-chev { width: 15px; height: 15px; color: var(--sch-muted); transition: transform .2s; }
.sc-konto.open .sc-chev { transform: rotate(180deg); }
.sc-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #4C8DFF, #8FB6FF); color: #0B1730; font: 700 12.5px/1 var(--sch-body); letter-spacing: .02em; flex: none; }
.sc-avatar-stor { width: 42px; height: 42px; font-size: 15px; }
.sc-konto-meny { position: absolute; right: 0; top: calc(100% + 10px); width: 280px; max-width: calc(100vw - 24px); padding: 6px; background: var(--sch-panel); border: 1px solid var(--sch-line2); border-radius: 16px; box-shadow: var(--sch-shadow); z-index: 40; animation: sc-in .14s ease-out; }
.sc-konto-huvud { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--sch-line); }
.sc-konto-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sc-konto-namn { font-family: var(--sch-display); font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-konto-epost { font: 12px/1.4 var(--sch-mono); color: var(--sch-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-konto-roll { font-size: 12.5px; color: var(--sch-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-mp { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 42px; padding: 0 10px; border-radius: 10px; color: var(--sch-fg); font-size: 14.5px; font-weight: 500; text-align: left; transition: background .12s; }
.sc-mp .sc-i { color: var(--sch-muted); }
.sc-mp:hover, .sc-mp:focus-visible { background: var(--sch-hover); outline: none; }
.sc-mp:focus-visible { box-shadow: inset 0 0 0 2px var(--sch-accent); }
.sc-mp[aria-current="page"] { background: var(--sch-aktiv); font-weight: 600; }
.sc-mp[aria-current="page"] .sc-i { color: var(--sch-accent); }
.sc-mp-avdelare { height: 1px; margin: 6px 4px; background: var(--sch-line); }
.sc-mp-grupp { margin: 6px 4px 0; padding: 9px 8px 4px; border-top: 1px solid var(--sch-line); font-size: 12px; font-weight: 600; }
@keyframes sc-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---- smalare skärmar: göm i tur och ordning ordet SmartCore, menyikonerna, företagschipet ---- */
@media (max-width: 1535px) {
  .sc-foretag { max-width: 180px; }
}
@media (max-width: 1279px) {
  .sc-brand b, .sc-env { display: none; }
  .sc-foretag { max-width: 170px; }
}
@media (max-width: 1100px) {
  .sc-punkt > .sc-i:not(.sc-ext) { display: none; }
  .sc-punkt { padding: 0 10px; }
  .sc-logout .sc-lbl { display: none; }
  .sc-logout { width: 36px; padding: 0; justify-content: center; }
}
@media (max-width: 1023px) {
  .sc-har-konto .sc-foretag { display: none; }
}
/* utan egen bottenmeny (Nova, Rådet): hamburgare från 900 px */
@media (max-width: 900px) {
  /* hamburgaren står till vänster om logotypen — höger sida är densamma på alla ytor: språk · tema · konto */
  .sc-top:not(.sc-har-flikar) .sc-menu { display: grid; order: -1; }
  .sc-top:not(.sc-har-flikar) .sc-nav { display: none; position: absolute; top: 60px; left: 0; right: 0; padding: 8px; background: var(--sch-bg); border-bottom: 1px solid var(--sch-line); box-shadow: var(--sch-shadow); }
  .sc-top:not(.sc-har-flikar).open .sc-nav { display: block; }
  .sc-top:not(.sc-har-flikar) .sc-lista { flex-direction: column; align-items: stretch; gap: 2px; }
  .sc-top:not(.sc-har-flikar) .sc-punkt, .sc-top:not(.sc-har-flikar) .sc-punkt.sc-team { height: 46px; padding: 0 14px; font-size: 16px; width: 100%; }
  .sc-top:not(.sc-har-flikar) .sc-punkt > .sc-i:not(.sc-ext) { display: block; }
  .sc-top:not(.sc-har-flikar) .sc-punkt[aria-current="page"]::after { left: 0; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; }
  .sc-top:not(.sc-har-flikar) .sc-avdelare { width: auto; height: 1px; margin: 6px 8px; }
  .sc-top:not(.sc-har-flikar) .sc-bara-mobil { display: flex !important; }
  .sc-top:not(.sc-har-flikar) .sc-bara-mobil .sc-punkt { color: var(--sch-muted); }
  .sc-top:not(.sc-har-flikar):has(.sc-menu) .sc-logout { display: none; }   /* finns i hamburgarmenyn i stället */
}
/* mobil: kompakt topprad; med bottenmeny (Kontoret) göms huvudmenyn helt */
@media (max-width: 767px) {
  .sc-top { height: 56px; padding: 0 12px; gap: 6px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .sc-top:not(.sc-har-flikar) .sc-nav { top: 56px; }
  .sc-har-flikar .sc-nav { display: none; }
  .sc-brand { margin-right: 0; }
  .sc-har-flikar.sc-har-konto .sc-foretag { display: inline-flex; max-width: 40vw; height: 34px; padding: 0 12px; font-size: 13px; }
  .sc-top:not(.sc-har-flikar) .sc-foretag { display: none; }   /* Nova och Rådet har egna ikoner i facket; företaget står i kontomenyn */
  .sc-foretag .sc-i { display: none; }
  .sc-lang button { padding: 7px 8px; font-size: 11px; }
  .sc-ikon, .sc-theme { width: 34px; height: 34px; }
  .sc-konto-knapp { height: 36px; padding-right: 6px; }
  .sc-konto-knapp .sc-avatar { width: 30px; height: 30px; font-size: 12px; }
  .sc-konto-meny { position: fixed; right: 10px; top: 62px; }
}
@media (max-width: 420px) {
  /* smal telefon: logotyp + upp till fyra egna ikoner + språk + tema + meny ska rymmas på 375 px */
  .sc-top { gap: 4px; padding: 0 10px; }
  .sc-tools { gap: 4px; }
  .sc-ikon, .sc-theme, .sc-menu { width: 32px; height: 32px; }
  .sc-ikon svg { width: 18px; height: 18px; }
  .sc-lang button { padding: 6px 6px; font-size: 10.5px; letter-spacing: .02em; }
  .sc-konto-knapp .sc-chev { display: none; }
  .sc-konto-knapp { padding: 2px; }
}
@media (prefers-reduced-motion: reduce) { .sc-top *, .sc-konto-meny { transition: none !important; animation: none !important; } }
/* kontot visas av toppraden (även i Nova och Rådet) — delens egen namnetikett blir då en dubblett */
.sc-har-konto .sc-tools .sc-user { display: none !important; }