/* ============================================================
   norrljus-site.css v1 — Norrljus ljust tema på HELA sajten
   ------------------------------------------------------------
   Generaliserad ur norrljus-home.css v2/v5 (pilotens sektions-
   scopade arkitektur): ljus baskontext på body, mörk statement-
   kontext i .section--dark (max två per sida), ljus site-chrome.
   Laddas på ALLA sidor efter styles.css + tokens.css; på start-
   sidan laddas norrljus-home.css efteråt och behåller företräde
   för hero-/startsidespecifika regler.

   Typografi enligt ITSL:s grafiska profil v2: Montserrat
   (variabel vikt 100–900), self-hostad woff2 i assets/fonts/
   (SIL OFL, licens bredvid filerna). Inga externa CDN —
   CSP:ns connect-src 'self' är en del av suveränitetsargumentet.
   ============================================================ */

/* ---------- 0. TYPSNITT: Montserrat Variable ---------- */
@font-face {
  font-family: 'Montserrat Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat Variable';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat-latin-wght-italic.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Ersätter Inter-stacken i styles.css (Inter laddades aldrig — belagt fel
     i docs/HANDOVER-design-kund.md). Montserrat är profilens typsnitt. */
  --font: 'Montserrat Variable', Montserrat, ui-sans-serif, system-ui,
    -apple-system, 'Segoe UI', sans-serif;
}

/* Montserrat är bredare än systemtypsnitten — stram rubrikvikt och
   aningen tightare spårning ger profilens karaktär utan att svälla. */
body { font-family: var(--font); }
h1, h2, h3, h4 { letter-spacing: -0.015em; }

/* ---------- 1. LJUS BASKONTEXT (alla sidor) ---------- */
body {
  /* Sajtens variabler → Norrljus ljusa kontext */
  --bg: var(--nl-paper);
  --bg-2: var(--nl-paper-2);
  --bg-3: var(--nl-paper-2);
  --surface: var(--nl-paper-2);
  --surface-2: var(--nl-paper);
  --card: var(--nl-card);
  --card-2: var(--nl-card);
  --card-3: var(--nl-card);
  --text: var(--nl-ink);
  --text-2: #33415a;              /* v5: mörkare brödtext (~9,3:1) */
  --muted: var(--nl-ink-2);
  --ink: var(--nl-ink);
  --ink-soft: var(--nl-ink-2);
  --accent: var(--nl-accent-text); /* text-säker accent — aldrig #00947f som text */
  --accent-2: var(--nl-accent-text);
  --line: var(--nl-line);
  --shadow: var(--nl-shadow-card);
  --radius: var(--nl-r-l); --radius-sm: var(--nl-r-m); --radius-xs: var(--nl-r-s);

  /* Kontextuella komponent-tokens (byts om i mörk kontext) */
  --ctx-heading: var(--nl-ink);
  --ctx-eyebrow: var(--nl-accent-text);
  --ctx-chip-bg: color-mix(in srgb, var(--nl-accent) 10%, transparent);
  --ctx-chip-text: var(--nl-accent-text);
  --ctx-chip-line: color-mix(in srgb, var(--nl-accent) 30%, transparent);
  --ctx-btn-primary-bg: var(--nl-ink);
  --ctx-btn-primary-fg: #fff;
  --ctx-btn-primary-hover: var(--nl-ink-hover);
  --ctx-card-bg: var(--nl-card);
  --ctx-card-line: var(--nl-line);

  background: var(--nl-paper);
  color: var(--nl-ink);
  -webkit-font-smoothing: antialiased;
}

/* ---------- 2. MÖRK STATEMENT-KONTEXT (max två per sida) ---------- */
body .section--dark {
  --text: var(--nl-dark-text);
  --text-2: #c3cde0;
  --muted: var(--nl-dark-muted);
  --ink: #ffffff;
  --ink-soft: var(--nl-dark-muted);
  --line: var(--nl-dark-line);
  --card: var(--nl-dark-elev);
  --card-2: var(--nl-dark-elev);
  --card-3: var(--nl-dark-elev);
  --shadow: none;

  --ctx-heading: #ffffff;
  --ctx-eyebrow: var(--nl-aur-cyan);
  --ctx-chip-bg: rgba(255, 255, 255, 0.08);
  --ctx-chip-text: var(--nl-dark-text);
  --ctx-chip-line: rgba(255, 255, 255, 0.14);
  --ctx-btn-primary-bg: #ffffff;
  --ctx-btn-primary-fg: var(--nl-ink);
  --ctx-btn-primary-hover: #dfe7f0;
  --ctx-card-bg: var(--nl-dark-elev);
  --ctx-card-line: var(--nl-dark-line);

  background: linear-gradient(180deg, var(--nl-dark) 0%, var(--nl-dark-2) 100%);
  color: var(--text);
  border-block: 1px solid rgba(255, 255, 255, 0.06);
}
body .section--dark.is-flat { background: var(--nl-dark); }

/* ---------- 3. GEMENSAMMA KOMPONENTREGLER ---------- */
body h1, body h2, body h3 { color: var(--ctx-heading); }
body p { color: var(--text-2); font-weight: 420; }

/* Eyebrow: Montserrat enligt profilen (mono pensioneras som sajttext;
   --nl-mono behålls för produktmockupernas app-UI och tabellsiffror). */
body .eyebrow {
  color: var(--ctx-eyebrow);
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.8rem;
}

body .button--primary {
  background: var(--ctx-btn-primary-bg);
  color: var(--ctx-btn-primary-fg);
  border: 1px solid var(--ctx-btn-primary-bg);
  box-shadow: 0 10px 24px -14px rgba(29, 38, 55, 0.45);
}
body .button--primary:hover { background: var(--ctx-btn-primary-hover); border-color: var(--ctx-btn-primary-hover); }
body .button--secondary,
body .button--ghost {
  background: color-mix(in srgb, var(--ctx-card-bg) 55%, transparent);
  color: var(--text);
  border: 1.5px solid var(--ctx-card-line);
  box-shadow: none;
}
body .button--secondary:hover { border-color: var(--text-2); }
body .button--glow::after { display: none !important; }

/* Kort/paneler — definierad kant + djup i två lager (v5) */
body .light-card,
body .card,
body .metric-card,
body .checklist-card,
body .timeline-card,
body .step-card,
body .faq details {
  background: var(--ctx-card-bg);
  color: var(--text);
  border: 1px solid #d3dde7;
  box-shadow: 0 1px 2px rgba(29, 38, 55, 0.05), 0 14px 30px -20px rgba(29, 38, 55, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
body .light-card:hover, body .card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--nl-accent) 40%, var(--nl-line));
  box-shadow: 0 2px 4px rgba(29, 38, 55, 0.06), 0 22px 44px -22px rgba(29, 38, 55, 0.34);
}
body .light-card h3, body .card h3 { font-weight: 650; }
body .card p, body .light-card p,
body .metric-card p, body .timeline-card p, body .step-card p,
body details p { color: var(--text-2); }
body .faq summary { color: var(--text); }

/* Mörka kort behåller mörk yta i mörk kontext */
body .section--dark .light-card,
body .section--dark .card,
body .section--dark .metric-card,
body .section--dark .checklist-card,
body .section--dark .timeline-card,
body .section--dark .step-card,
body .section--dark .faq details {
  border: 1px solid var(--nl-dark-line);
  box-shadow: none;
}

/* CTA-panelen: kort i ljus kontext; transparent del av mörk sektion */
body .cta-panel {
  background: var(--ctx-card-bg);
  border: 1px solid var(--ctx-card-line);
  box-shadow: var(--nl-shadow-panel);
}
body .section--dark .cta-panel {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Chips/pills */
body .pill {
  background: var(--ctx-chip-bg);
  color: var(--ctx-chip-text);
  border: 1px solid var(--ctx-chip-line);
  font-family: var(--font);
  font-weight: 600;
}
body .card-number {
  background: color-mix(in srgb, var(--nl-accent) 12%, transparent);
  color: var(--ctx-chip-text);
  font-family: var(--font);
  font-weight: 700;
}

/* Statistik: siffror i bläck/vitt, tabulära siffror */
body .stat-item__number,
body .stat-item__suffix {
  color: var(--ctx-heading);
  font-family: var(--font);
  font-weight: 700;
  font-feature-settings: "tnum";
}
body .stat-item__label { color: var(--text-2); }
body .num, body td.num { font-feature-settings: "tnum"; }

/* Prosalänkar: alltid identifierbara (WCAG 1.4.1) */
body main p a:not([class]),
body .faq p a,
body .card p a, body .light-card p a {
  color: var(--nl-accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
body .section--dark p a:not([class]) { color: var(--nl-aur-cyan); }
body .news-card__link { color: var(--nl-accent-text); }
body .section--dark .news-card__link { color: var(--nl-aur-cyan); }

/* Tabeller (rollsidornas .table-wrap är byggd för mörk botten) */
body .table-wrap { border: 1px solid var(--nl-line); background: var(--nl-card); }
body .table-wrap table { color: var(--text); }
body .table-wrap th {
  color: var(--nl-ink-2);
  border-bottom: 1px solid var(--nl-line);
  background: var(--nl-paper-2);
}
body .table-wrap td { border-bottom: 1px solid var(--nl-line); color: var(--text-2); }
body .section--dark .table-wrap { border-color: var(--nl-dark-line); background: var(--nl-dark-elev); }
body .section--dark .table-wrap th { color: var(--nl-dark-muted); border-bottom-color: var(--nl-dark-line); background: transparent; }
body .section--dark .table-wrap td { border-bottom-color: var(--nl-dark-line); color: var(--text-2); }

/* ---------- 4. SITE-CHROME: ljus header/nav/megameny/sidfot ---------- */
body .site-header {
  background: var(--nl-paper);
  background: color-mix(in srgb, var(--nl-paper) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--nl-line);
  box-shadow: none;
}
body .site-header.scrolled {
  background: var(--nl-paper);
  background: color-mix(in srgb, var(--nl-paper) 96%, transparent);
}
body .nav__link { color: var(--nl-ink); font-weight: 600; }
body .nav__link:hover, body .nav__link:focus-visible {
  color: var(--nl-accent-text);
  background: color-mix(in srgb, var(--nl-accent) 8%, transparent);
}
body .nav__link.is-active {
  color: var(--nl-accent-text);
  background: color-mix(in srgb, var(--nl-accent) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nl-accent) 25%, transparent);
}
body .nav__login { color: var(--nl-ink-2); }
body .nav__login:hover { color: var(--nl-accent-text); }
body .menu-toggle { border-color: var(--nl-line); background: var(--nl-card); color: var(--nl-ink); }
body .menu-toggle span { background: var(--nl-ink); }
body .mega-menu {
  background: var(--nl-card);
  border: 1px solid var(--nl-line);
  box-shadow: var(--nl-shadow-panel);
  backdrop-filter: none;
}
body .mega-menu__heading {
  color: var(--nl-accent-text);
  border-bottom-color: var(--nl-line);
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: 0.08em;
}
body .mega-menu__list a { color: var(--nl-ink); }
body .mega-menu__list a:hover { color: var(--nl-accent-text); }
body .mega-menu__list span { color: var(--nl-ink-2); }
@media (max-width: 920px) {
  body .nav__list { background: var(--nl-card); border: 1px solid var(--nl-line); }
  body .mega-menu { background: var(--nl-paper-2); }
  body .mega-menu.is-open { border: 1px solid var(--nl-line); }
}

/* Loggan: vit SVG (fill:#fff) blir osynlig på papper → mörk överallt */
body .brand img { filter: brightness(0) saturate(0); }

/* Sidfot: mörk statement-yta (räknas inte som sektion — den är avslut) */
body .site-footer {
  background: var(--nl-dark);
  color: var(--nl-dark-text);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
body .site-footer .brand img { filter: none; }
body .site-footer p { color: var(--nl-dark-muted); }
body .footer-heading { color: #ffffff; }
body .site-footer a { color: var(--nl-dark-text); }
body .site-footer a:hover { color: var(--nl-aur-cyan); }
body .footer-bottom { color: var(--nl-dark-muted); border-top: 1px solid rgba(255, 255, 255, 0.08); }
body .site-footer__grid { margin-top: 40px; } /* ersätter tidigare inline-style på alla sidor */

/* ---------- 5. UNDERSIDORNAS HERO: ljust papper, släckta mörk-glows ---------- */
body .page-hero {
  background: var(--nl-paper);
  color: var(--nl-ink);
  border-bottom: 1px solid var(--nl-line);
}
body .page-hero .hero-bg-glow,
body .page-hero .hero-bg-beam { display: none !important; }
body .page-hero .hero-bg-grid { opacity: 0.35; }
/* Samma rubrikstorlek som startsidans hero (styles.css bas är 3.2–5.7rem —
   för stort i undersidornas spalter) */
body .page-hero h1 {
  color: var(--nl-ink);
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  line-height: 1.06;
  font-weight: 650;
  letter-spacing: -0.028em;
}
body .page-hero .hero__subtitle, body .page-hero p { color: #2f3d54; }
body .hero__trust-line { color: #33415a; }
body .cursor-glow { display: none !important; }

/* Sektionsrytm: ljus/dämpad växling så sidan inte blir platt */
body .section--muted { background: linear-gradient(180deg, #eef4f8 0%, #e7eef4 100%); }

/* ---------- 6. FOKUS + RÖRELSE ---------- */
body :focus-visible { outline: 2px solid var(--nl-accent); outline-offset: 3px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) {
  body [data-reveal], body .reveal {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- 8. KOMPONENTER MED HÅRDKODAT MÖRK BAS (inventering 2026-07-21) ----------
   styles.css ger dessa mörka gradienter/vita kanter; här får de ljus
   kontext-behandling. I .section--dark behåller de sin mörka originalstil. */

/* Callout-panel (7 sidors heros) + state-box (404/tack): mörk platta → ljust kort */
body .callout-panel,
body .state-box {
  background: var(--nl-card);
  border: 1px solid #d3dde7;
  box-shadow: 0 1px 2px rgba(29, 38, 55, 0.05), 0 14px 30px -20px rgba(29, 38, 55, 0.28);
}
body .callout-panel h2, body .callout-panel h3, body .state-box h1, body .state-box h2 { color: var(--nl-ink); }
body .callout-panel p, body .state-box p { color: var(--text-2); }
body .section--dark .callout-panel {
  background: var(--nl-dark-elev);
  border: 1px solid var(--nl-dark-line);
  box-shadow: none;
}
body .section--dark .callout-panel h2, body .section--dark .callout-panel h3 { color: #fff; }

/* Trust-chips i ljusa heros */
body .hero-trust-badge {
  background: var(--ctx-chip-bg);
  border: 1px solid var(--ctx-chip-line);
  color: var(--ctx-chip-text);
}
body .hero-trust-badge:hover { background: color-mix(in srgb, var(--nl-accent) 16%, transparent); }

/* SDK-diagrampanel: ljus panel (nätverksbilden behåller sin egen botten) */
body :not(.section--dark) .sdk-diagram {
  background: var(--nl-card);
  border: 1px solid #d3dde7;
  box-shadow: var(--nl-shadow-panel);
}

/* Kontaktkortet i kontaktsidans ljusa hero */
body .contact-card {
  background: var(--nl-card);
  border: 1px solid #d3dde7;
  box-shadow: var(--nl-shadow-panel);
}
body .contact-card h2, body .contact-card h3 { color: var(--nl-ink); }
body .contact-card p { color: var(--text-2); }
body .contact-card__divider { background: var(--nl-line); }
body .contact-card__logo img { filter: brightness(0) saturate(0); }

/* Kontaktformulärets knapp + fokus följer kontext-tokens */
body .kontakt-form__submit {
  background: var(--ctx-btn-primary-bg);
  color: var(--ctx-btn-primary-fg);
}
body .kontakt-form__submit:hover { background: var(--ctx-btn-primary-hover); }
body .kontakt-form__field input:focus,
body .kontakt-form__field select:focus,
body .kontakt-form__field textarea:focus {
  border-color: var(--nl-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nl-accent) 25%, transparent);
}

/* Skip-länk: accentyta med vit text (var mörk text på accent) */
body .skip-link { background: var(--nl-accent-text); color: #ffffff; }

/* Eyebrow-specificitet: styles.css .section--light/--muted .eyebrow (#1c6e9e)
   vinner annars över kontextfärgen */
body .section--light .eyebrow,
body .section--muted .eyebrow { color: var(--ctx-eyebrow); }

/* ---------- 9. PLATTFORMSSIDAN I LJUS KONTEXT ----------
   Modulsektionerna (fsect) och arkitektur/drift-komponenterna är byggda
   för mörk botten i styles.css; här får de sin ljusa behandling.
   Feature-map-sektionen (statement) och slut-CTA:n förblir mörka. */
body .section--light.fsect { border-top: 1px solid var(--nl-line); }
body .section--light .fsect__deco--dots {
  background-image: radial-gradient(circle, rgba(29, 38, 55, 0.10) 1px, transparent 1px);
}
body .section--light .fsect__deco--grid {
  background-image:
    linear-gradient(rgba(29, 38, 55, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 38, 55, 0.05) 1px, transparent 1px);
}
body .section--light .fsect__deco--lines {
  background-image: repeating-linear-gradient(
    -45deg, transparent, transparent 40px,
    rgba(29, 38, 55, 0.04) 40px, rgba(29, 38, 55, 0.04) 41px);
}

/* Mockup-skalet: vit produktpanel som svävar på papperet (jfr herons appframe) */
body .section--light .fsect__mockup {
  background: #ffffff;
  border: 1px solid #d3dde7;
  box-shadow: 0 44px 90px -34px rgba(21, 27, 38, 0.35), 0 10px 28px -14px rgba(21, 27, 38, 0.18);
}
body .section--light .fsect__mockup-bar { border-bottom: 1px solid var(--hubs-line); }
body .section--light .fsect__mockup-bar span { background: var(--hubs-dot); }

/* Arkitektur-/driftkorten + identitets- och tech-chips */
body .section--light .arch-col,
body .section--light .drift-card {
  background: var(--nl-card);
  border: 1px solid #d3dde7;
  box-shadow: 0 1px 2px rgba(29, 38, 55, 0.05), 0 14px 30px -20px rgba(29, 38, 55, 0.28);
}
body .section--light .arch-col:hover,
body .section--light .drift-card:hover {
  border-color: color-mix(in srgb, var(--nl-accent) 40%, var(--nl-line));
  box-shadow: 0 2px 4px rgba(29, 38, 55, 0.06), 0 22px 44px -22px rgba(29, 38, 55, 0.34);
}
body .section--light .arch-col__count {
  background: color-mix(in srgb, var(--nl-accent) 10%, transparent);
  color: var(--nl-accent-text);
}
body .section--light .id-strip {
  background: var(--nl-paper-2);
  border: 1px solid var(--nl-line);
}
body .section--light .id-badge,
body .section--light .tech-pill {
  background: var(--nl-card);
  border: 1px solid #d3dde7;
  color: var(--nl-ink);
  box-shadow: none;
}

/* ---------- 11. FIXAR UR VISUELLA QA-SVEPET (2026-07-21) ---------- */

/* BLOCKER (mobil): mockupernas fasta inre bredder blåste upp gridspåren
   (.fsect__text/__visual blev 549–767px på 375px-viewport). minmax(0,1fr)
   låter spåren krympa; mockupens overflow:hidden klipper interiören snyggt. */
body .fsect__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 900px) {
  body .fsect__inner { grid-template-columns: minmax(0, 1fr); }
}
body .fsect__mockup { max-width: 100%; }

/* Sidfoten: adressrad/tagline var ljusa temats mörka text-2 på mörk botten */
body .site-footer p,
body .site-footer li { color: #c3cde0; }

/* Mörk kontext: accentfärgade länkar (kontorskort m.m.) var mörk teal på
   mörkt — byt till ljus accent som klarar kontrastkravet */
body .section--dark { --accent: var(--nl-success-on-dark); --accent-2: var(--nl-success-on-dark); }

/* Sekundärknappen smälte in i mörka CTA-ytor */
body .section--dark .button--secondary {
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

/* Kvarglömd cyanfläck-dekor i CTA-paneler (sågs som "smutsfläck") */
body .cta-panel::after, body .footer-cta::after { display: none; }

/* Breadcrumbs låg klämda direkt under headerns logga */
body .breadcrumbs { margin: 20px 0 24px; }

/* Sundsvalls kundlogga är vit-textad (byggd för mörk botten) — ge just den
   chippen mörk yta tills en mörk textvariant av loggan finns */
body .logo-chip:has(img[src*="sundsvall"]) {
  background: var(--nl-dark);
  border-color: var(--nl-dark);
}

/* Långa svenska sammansättningar högg av vid kortkanter — avstava */
body .card h3, body .card p,
body .light-card h3, body .light-card p,
body .fsect__text h3,
body .table-wrap th, body .table-wrap td {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ---------- 7. HUBS-PANELPALETT (delas av alla produktmockuper) ----------
   Flyttad hit från norrljus-home.css v8 så att även plattformssidans
   modul-mockuper (fsect) kan konsumera samma blå/vita Hubs-look. */
body {
  --hubs-blue: #1a6fc4;
  --hubs-blue-bg: #e4eefb;
  --hubs-surface: #eef4fb;
  --hubs-surface-line: #dce7f3;
  --hubs-nav-bg: #f2f7fc;
  --hubs-line: #e2ebf5;
  --hubs-ink: #1c2e4a;
  --hubs-ink-2: #56668a;
  --hubs-ink-3: #7c8aa6;
  --hubs-skel: #e3ecf6;
  --hubs-green-bg: #e0f2ea;
  --hubs-green-text: #1f7a52;
  --hubs-green-line: #b8e0cb;
  --hubs-yellow-bg: #fcf0dc;
  --hubs-yellow-text: #9a6b1e;
  --hubs-teal-bg: #dcf1f3;
  --hubs-teal-text: #0e7a80;
  --hubs-dot: #c9d6e6;
}


/* ---------- 10. MOCKUPERNAS KLASSADE STILAR I LJUS HUBS-LOOK ----------
   Autogenererat underlag (6 familjeagenter, 2026-07-21), granskat och
   sammanfogat. Overrides av styles.css mörka mockup-stilar; inline-styles
   i markupen är redan ommappade till var(--hubs-*). ---------- */

/* ============================================================
   LJUST TEMA (Norrljus) — overrides for fil-listbas, bridge-bas,
   fmmock (filhantering) och tbmock (Teams Bridge).
   Endast farger — layout orord.
   ============================================================ */

/* --- Fillista (fsect__file): ljusa radkanter och skelett-staplar --- */
body .fsect__file-row {
  border-bottom: 1px solid var(--hubs-line);
}

body .fsect__file-name {
  background: var(--hubs-skel);
}

body .fsect__file-meta {
  color: var(--hubs-ink-3);
}

/* --- Bridge-bas (fsect__bridge): ljusa block, kanter och etiketter --- */
body .fsect__bridge-label {
  color: var(--hubs-ink-2);
}

body .fsect__bridge-block {
  background: var(--hubs-skel);
  border: 1px solid var(--hubs-surface-line);
}

body .fsect__bridge-arrows {
  color: var(--hubs-blue);
}

/* --- Filhantering (fmmock): delnings-avatarer far vit ring i stallet
       for mork, synk-ikoner i Hubs-bla/gron. Avatar-gradienter behalls. --- */
body .fmmock__share span {
  border: 1px solid #ffffff;
}

body .fmmock__sync-spin {
  color: var(--hubs-blue);
}

body .fmmock__sync-done {
  color: var(--hubs-green-text);
}

/* --- Teams Bridge (tbmock): cyanpuls mappas till teal-accent med
       ljusanpassad glod; Teams-lila puls behalls som fargad accent. --- */
body .tbmock__pulse--a {
  background: var(--hubs-teal-text);
  box-shadow: 0 0 8px rgba(14, 122, 128, 0.35);
}

/* (tbmock__pulse--b: #7b83eb ar Teams-lila varumarkesaccent — behalls.
   Samtliga keyframes i familjerna fm-*/tb-* animerar endast
   transform/opacity och lamnas darfor orörda.) */

/* ============================================================
   LJUST TEMA — video-bas (.fsect__mockup-video-familjen)
   + smmock (läskvittens/prio) + vcmock (talar-ram/typing)
   Overrides av mörka hårdkodade färger → Hubs-panelpalett.
   ============================================================ */

/* --- Video-bas: ljusa deltagarplattor och knappar på vit panel --- */
body .fsect__video-tile {
  background: linear-gradient(135deg, var(--hubs-teal-bg), var(--hubs-blue-bg));
  border: 1px solid var(--hubs-line);
}

body .fsect__vid-btn {
  background: var(--hubs-surface);
}
/* (.fsect__vid-btn--red behålls — röd inspelningsaccent) */

/* --- sdkmock: bekräftelse-badge grönt på ljus botten --- */
body .sdkmock__badge-ack {
  background: var(--hubs-green-bg);
  color: var(--hubs-green-text);
}
/* (@keyframes sdk-badge-in / sdk-badge-ack animerar bara opacity/transform — orörda) */

/* --- smmock: läskvittens ✓→✓✓ i bläck/teal i stället för vit/cyan --- */
body .smmock__receipt {
  color: var(--hubs-ink-3);
}

/* Färganimerande keyframes omdefinieras i sin helhet med ljusa värden */
@keyframes sm-receipt-color {
  0%, 40%   { color: var(--hubs-ink-3); }
  48%, 92%  { color: var(--hubs-teal-text); }
  100%      { color: var(--hubs-ink-3); }
}
/* (@keyframes sm-receipt-second / sm-prio animerar bara opacity — orörda) */

/* --- vcmock: vandrande talar-ram i teal som syns på ljusa plattor --- */
body .vcmock__tile::after {
  border: 2px solid var(--hubs-teal-text);
  box-shadow: 0 0 12px var(--hubs-teal-bg) inset;
}
/* (@keyframes vc-speak animerar bara opacity — orörd) */

/* --- vcmock: skriver-indikator i svag bläckton --- */
body .vcmock__typing {
  color: var(--hubs-ink-3);
}

body .vcmock__typing-dots i {
  background: var(--hubs-ink-3);
}

/* ============================================================
   LJUS RETEMA: fax-/supportlistor (fsect list, faxmock, spmock)
   Vit/ljusblå panel med mörkblått bläck enligt Hubs-panelpaletten.
   ============================================================ */

/* Listbas (fax/support): ljusa radavdelare, bläckade ikoner,
   ljusblå skeleton-staplar */
body .fsect__list-item { border-bottom: 1px solid var(--hubs-line); }
body .fsect__list-icon { color: var(--hubs-ink-3); }
body .fsect__list-text { background: var(--hubs-skel); }

/* Listtaggar: teal/gul mappas till palettens chipfärger;
   röd behålls som statusaccent */
body .fsect__list-tag {
  background: var(--hubs-teal-bg);
  color: var(--hubs-teal-text);
}
body .fsect__list-tag--green {
  background: var(--hubs-green-bg);
  color: var(--hubs-green-text);
}
body .fsect__list-tag--yellow {
  background: var(--hubs-yellow-bg);
  color: var(--hubs-yellow-text);
}

/* Skrivindikator-prickar (ligger i intervallet): svag bläcknivå
   i stället för halvtransparent vitt */
body .vcmock__typing-dots i { background: var(--hubs-ink-3); }

/* Faxmock: fil-chip byter cyan-på-mörkt till teal-chip på ljust,
   texten till primärt bläck; grönt kvitto till palettgrönt.
   (@keyframes fax-file/fax-sent animerar bara opacity/transform
   och lämnas orörda) */
body .faxmock__file {
  background: var(--hubs-teal-bg);
  border: 1px solid var(--hubs-teal-text);
  color: var(--hubs-ink);
}
body .faxmock__file span { color: var(--hubs-green-text); }
body .faxmock__sent { color: var(--hubs-green-text); }

/* Supportmock: nytt ärende markeras med ljusblå "vald rad"-yta.
   (@keyframes sp-row/sp-tag-new/sp-tag-assigned animerar bara
   max-height/padding/opacity/transform och lämnas orörda) */
body .spmock__new { background: var(--hubs-blue-bg); }

/* Tilldelad-badge: palettgrönt chip; NY-badgens röda accent behålls */
body .spmock__tag-assigned {
  background: var(--hubs-green-bg);
  color: var(--hubs-green-text);
}

body .fsect__mockup-bar { border-bottom-color: var(--hubs-line); }
body .fsect__mockup-bar span { background: var(--hubs-dot); }

/* Generiska mockup-rader: ljusa linjer och skelett-streck */
body .fsect__mockup-row { border-bottom-color: var(--hubs-line); }
body .fsect__mockup-lines span { background: var(--hubs-skel); }

/* Gul väntar-badge på ljus botten */
body .fsect__mockup-badge {
  background: var(--hubs-yellow-bg);
  color: var(--hubs-yellow-text);
}

/* ----------------------------------------
   SDK-mockup (levande säker inkorg) – ljus Hubs-panel
   ---------------------------------------- */

/* Svepljus vid ankomst: cyan → ljus teal */
body .sdkmock__scan {
  background: linear-gradient(90deg, transparent, var(--hubs-teal-text), transparent);
}

/* Sidopanel: ljus linje + mörkblått bläck i tre nivåer */
body .sdkmock__side { border-right-color: var(--hubs-line); }
body .sdkmock__side-label { color: var(--hubs-ink-3); }
body .sdkmock__side-item { color: var(--hubs-ink-3); }

/* Aktivt inkorgsval: teal-text på teal-yta */
body .sdkmock__side-item--active {
  color: var(--hubs-teal-text);
  background: var(--hubs-teal-bg);
  border-left-color: var(--hubs-teal-text);
}

/* Oläst-räknare: solid teal med vit siffra */
body .sdkmock__count {
  background: var(--hubs-teal-text);
  color: #fff;
}

/* Meddelanderader: ljusa avdelare, teal-tonade oläst/inkommande-ytor */
body .sdkmock__row { border-bottom-color: var(--hubs-line); }
body .sdkmock__row--unread { background: var(--hubs-teal-bg); }
body .sdkmock__row--incoming { background: var(--hubs-teal-bg); }

/* Textnivåer: ämne = bläck, avsändare/datum = dämpat bläck */
body .sdkmock__subject { color: var(--hubs-ink); }
body .sdkmock__from { color: var(--hubs-ink-3); }
body .sdkmock__date { color: var(--hubs-ink-3); }

/* Statusbadges: teal "Mottaget" och grönt "Kvitterat" i ljus chip-form */
body .sdkmock__badge-in {
  background: var(--hubs-teal-bg);
  color: var(--hubs-teal-text);
}
body .sdkmock__badge-ack {
  background: var(--hubs-green-bg);
  color: var(--hubs-green-text);
}

/* Ankomstpuls: samma tidpunkter, ljus teal-ring istället för cyan
   (sdk-scan, sdk-count, sdk-row-in, sdk-badge-in/-ack animerar bara
   transform/opacity/layout och lämnas orörda) */
@keyframes sdk-arrive-ring {
  0%, 9%    { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hubs-teal-text) 0%, transparent); }
  11%       { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hubs-teal-text) 50%, transparent); }
  16%       { box-shadow: 0 0 0 8px color-mix(in srgb, var(--hubs-teal-text) 0%, transparent); }
  17%       { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hubs-teal-text) 50%, transparent); }
  22%       { box-shadow: 0 0 0 8px color-mix(in srgb, var(--hubs-teal-text) 0%, transparent); }
  23%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hubs-teal-text) 0%, transparent); }
}

/* ==== LJUS OVERRIDE: Lärplattform (coursemock) ==== */
/* Progressbar: gul toning på ljus botten */
body .fsect__course-bar {
  background: linear-gradient(90deg, var(--hubs-yellow-text), var(--hubs-yellow-bg));
}

/* Skimmer: starkare vitt så det syns på ljus bar */
body .fsect__course-bar::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
}

/* Klar-stämpel: grön pill i ljus palett */
body .lpmock__done {
  background: var(--hubs-green-bg);
  color: var(--hubs-green-text);
}

/* ==== LJUS OVERRIDE: Kanban (projekthantering) ==== */
/* Kolumnrubrikens linje */
body .fsect__kanban-head {
  border-bottom: 1px solid var(--hubs-line);
}

/* Kort: ljus yta med tunn kant */
body .fsect__kanban-card {
  background: var(--hubs-surface);
  border: 1px solid var(--hubs-surface-line);
}

/* Aktivt kort: gul markering */
body .fsect__kanban-card--active {
  border-color: var(--hubs-yellow-text);
  background: var(--hubs-yellow-bg);
}

/* Bocken när kortet blir klart */
body .pjmock__active::after {
  color: var(--hubs-green-text);
}

/* Färganimation: aktivt kort arbetar (gult) → klart (grönt), ljusa värden */
@keyframes pj-card {
  0%, 48% {
    border-color: var(--hubs-yellow-text);
    background: var(--hubs-yellow-bg);
    box-shadow: 0 0 0 0 transparent;
  }
  10%, 30% {
    box-shadow: 0 0 10px 0 var(--hubs-yellow-bg);
  }
  56%, 88% {
    border-color: var(--hubs-green-line);
    background: var(--hubs-green-bg);
    box-shadow: 0 0 0 0 transparent;
  }
  96%, 100% {
    border-color: var(--hubs-yellow-text);
    background: var(--hubs-yellow-bg);
  }
}

/* ============================================================
   LJUS OVERRIDE — docmock/office + AI-assistent + chat-mockupens bas
   Hubs kunddemo: vit/ljusblå panel, mörkblått bläck, Hubs-blå accenter.
   Endast färger — layout orörd. Källordning: vinner över mörka originalen.
   ============================================================ */

/* --- Delad mockup-badge (gul etikett, kant mot chat-basen) --- */
body .fsect__mockup-badge {
  background: var(--hubs-yellow-bg);
  color: var(--hubs-yellow-text);
}

/* --- Chat-mockupens bas: bubblor på ljus yta --- */
body .fsect__chat-bubble--in {
  background: var(--hubs-surface);      /* var rgba(255,255,255,.06) */
  color: var(--hubs-ink);
}
body .fsect__chat-bubble--out {
  background: var(--hubs-green-bg);     /* var rgba(0,148,127,.12) */
  color: var(--hubs-ink);
}
body .fsect__chat-bubble--ai {
  background: var(--hubs-blue-bg);      /* var rgba(62,137,190,.12) */
}

/* --- Hänglås-raden: ljus delare, dämpat bläck, gult lås --- */
body .fsect__mockup-lock {
  border-top-color: var(--hubs-line);   /* var rgba(255,255,255,.06) */
  color: var(--hubs-ink-3);
}
body .fsect__mockup-lock svg {
  color: var(--hubs-yellow-text);       /* var #f9b233 */
}

/* --- Dokument-mockupens bas: skeletonblock + Hubs-blå markör --- */
body .fsect__doc-toolbar span {
  background: var(--hubs-skel);         /* var rgba(255,255,255,.06) */
}
body .fsect__doc-line {
  background: var(--hubs-skel);         /* var rgba(255,255,255,.07) */
}
body .fsect__doc-cursor {
  background: var(--hubs-blue);         /* var #3e89be; blink-keyframe rör bara opacity */
}

/* --- AI-assistent: tänkarprickar i sekundärt bläck ---
   (of-blink/of-line/of-saved/ai-dots/ai-text/ai-lock animerar bara
   opacity/width/transform — lämnas orörda) */
body .aimock__dots i {
  background: var(--hubs-ink-2);        /* var rgba(255,255,255,.45) */
}