html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

a#tv-attr-logo {
    display: none!important;
}



@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ======================================================================
   App-skal: header + minifierbar vänstermeny + innehåll
   ====================================================================== */
:root {
  --header-h: 58px;
  --sidebar-w: 240px;
  --sidebar-w-min: 66px;
  --brand: #2962ff;
}
[data-bs-theme="dark"] { --brand: #4d88ff; }

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--header-h) 1fr;
  grid-template-areas: "header header" "sidebar main";
  min-height: 100vh;
}
:root.sidebar-collapsed .app-shell { grid-template-columns: var(--sidebar-w-min) 1fr; }

/* Mjuk in-/utfällning av menybredden (endast desktop där kollapsen sker). */
@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
  .app-shell { transition: grid-template-columns .2s ease; }
}

/* Header */
.app-header {
  grid-area: header;
  position: sticky; top: 0; z-index: 1035;
  /* Rutnät i stället för flex. Mobil först: sidorna tar precis vad ikonerna behöver och sökfältet
     får resten. Från 768px blir sidokolumnerna exakt lika breda (se nedan) så att fältet hamnar
     i headerns MITT — med enbart 1fr hade spåren fått olika bredd eftersom vänster- och
     högergruppen innehåller olika mycket. */
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 12px;
  padding: 0 14px;
  background: var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color);
}
.header-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* Lika breda sidospår (minmax(0,1fr), inte 1fr) ⇒ mittspåret ligger exakt i headerns mitt
   oavsett innehållets bredd. Taket på 520px hindrar fältet från att bli löjligt brett. */
@media (min-width: 768px) {
  .app-header { grid-template-columns: minmax(0, 1fr) minmax(0, 520px) minmax(0, 1fr); }
}
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--bs-body-color); font-weight: 700; font-size: 18px; }
.brand-mark { display: inline-flex; color: var(--brand); }
.brand-mark img { display: block; }
.brand:hover { color: var(--bs-body-color); }
@media (max-width: 575.98px) { .app-header .brand-name { display: none; } }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 0; border-radius: 9px;
  background: transparent; color: var(--bs-body-color); cursor: pointer;
}
.icon-btn:hover { background: var(--bs-tertiary-bg); }

/* Global sök */
.global-search { position: relative; min-width: 0; }
.gs-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--bs-secondary-color); pointer-events: none; }
.gs-input {
  width: 100%; height: 40px; padding: 0 14px 0 38px;
  border: 1px solid var(--bs-border-color); border-radius: 10px;
  background: var(--bs-tertiary-bg); color: var(--bs-body-color); font-size: 14px;
}
.gs-input:focus { outline: none; border-color: var(--brand); background: var(--bs-body-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.gs-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1040;
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.18); overflow: hidden; max-height: 70vh; overflow-y: auto;
}
.gs-section-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); padding: 9px 14px 4px; }
.gs-item { display: flex; align-items: center; gap: 10px; padding: 8px 14px; cursor: pointer; border: 0; background: transparent; width: 100%; text-align: left; color: var(--bs-body-color); }
.gs-item:hover, .gs-item.active { background: var(--bs-tertiary-bg); }
.gs-item .gs-name { font-weight: 600; font-size: 14px; }
.gs-item .gs-meta { font-size: 12px; color: var(--bs-secondary-color); }
.gs-item .inst-logo { width: 30px; height: 30px; border-radius: 7px; }
.gs-item .inst-mono { font-size: 12px; }
.gs-empty { padding: 12px 14px; color: var(--bs-secondary-color); font-size: 13px; }

.header-right { display: flex; align-items: center; gap: 6px; justify-self: end; }

/* --- Global sökning på mobil ---
   Tre saker gör den obrukbar på telefon utan detta: fältet kläms ihop till några centimeter
   mellan menyknappen och ikonerna, träfflistan ärver den bredden, och iOS zoomar in hela sidan
   när man fokuserar ett fält med mindre än 16 px text. */
@media (max-width: 767.98px) {
  /* 16px är iOS-gränsen för att slippa autozoom vid fokus. */
  .gs-input { font-size: 16px; }
  /* Under fokus tar sökfältet hela headern — resten är ändå i vägen medan man skriver. */
  .app-header:has(.global-search:focus-within) { grid-template-columns: 1fr; }
  .app-header:has(.global-search:focus-within) .header-left,
  .app-header:has(.global-search:focus-within) .header-right { display: none; }
  /* Träfflistan läggs som ett ark under headern i stället för att ärva inputens bredd.
     dvh, inte vh: adressfältet i mobila webbläsare räknas annars in i höjden. */
  .gs-results {
    position: fixed; top: var(--header-h); left: 8px; right: 8px;
    max-height: calc(100vh - var(--header-h) - 16px);
    max-height: calc(100dvh - var(--header-h) - 16px);
  }
}
.profile-btn { border: 0; background: transparent; padding: 0; cursor: pointer; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 14px; }
.profile-menu { min-width: 220px; }

/* Sidebar */
.app-sidebar {
  grid-area: sidebar;
  position: sticky; top: var(--header-h); align-self: start;
  height: calc(100vh - var(--header-h)); overflow-y: auto;
  border-right: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  padding: 10px 10px;
}
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  color: var(--bs-secondary-color); text-decoration: none; white-space: nowrap;
}
.side-link:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.side-link.active { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); font-weight: 600; }
.side-ico { display: inline-flex; flex: 0 0 auto; }
:root.sidebar-collapsed .side-label { display: none; }
:root.sidebar-collapsed .side-link { justify-content: center; padding: 10px; }

.sidebar-backdrop { display: none; }

/* Main */
.app-main { grid-area: main; min-width: 0; }
.app-main .container-fluid { max-width: 1320px; }

/* Mobil: sidebar som off-canvas */
@media (max-width: 991.98px) {
  .app-shell { grid-template-columns: 1fr; grid-template-areas: "header" "main"; }
  .app-sidebar {
    position: fixed; top: var(--header-h); left: 0; z-index: 1045;
    width: var(--sidebar-w); transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: 0 12px 32px rgba(0,0,0,.25);
  }
  .app-shell.sidebar-open .app-sidebar { transform: translateX(0); }
  .app-shell.sidebar-open .sidebar-backdrop {
    display: block; position: fixed; inset: var(--header-h) 0 0 0; z-index: 1040; background: rgba(0,0,0,.4);
  }
  :root.sidebar-collapsed .app-shell { grid-template-columns: 1fr; }
  :root.sidebar-collapsed .side-label { display: inline; }
}

/* Inloggningssidor (utan skal) */
.auth-shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; }
.auth-body { width: 100%; max-width: 420px; }
/* Kortytan på login/registrering: svagt upphöjd mot djupblå botten, mjuk skugga.
   dvh ovan: 100vh räknar in mobilens adressfält och trycker annars innehållet ur bild. */
.auth-card { border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, .35); }
[data-bs-theme="dark"] .auth-card { background: #101a2e; border-color: #223049; }

/* Mörkt tema lutar mot djupblått à la tradingvyer snarare än neutralgrått */
[data-bs-theme="dark"] {
  --bs-body-bg: #0b1220;
  --bs-body-color: #dbe4f0;
}

[data-bs-theme="dark"] .navbar {
  background-color: #0e1728;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--bs-body-bg), 0 0 0 0.25rem #258cfb;
}

/* Positiv/negativ utveckling — används genomgående för siffror och procent */
.value-up {
  color: #16a34a;
}

[data-bs-theme="dark"] .value-up {
  color: #22c55e;
}

.value-down {
  color: #dc2626;
}

[data-bs-theme="dark"] .value-down {
  color: #ef4444;
}

/* ---- Portföljens innehavstabell: tät, sticky header + första kolumn ---- */
.holdings-scroll {
  overflow-x: auto; overflow-y: visible;
  border: 1px solid var(--bs-border-color); border-radius: 10px;
}
.holdings-table { margin: 0; font-variant-numeric: tabular-nums; }
.holdings-table th, .holdings-table td {
  padding: 5px 12px; white-space: nowrap; font-size: 13px; border-bottom-color: var(--bs-border-color);
}
.holdings-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bs-body-bg); box-shadow: inset 0 -1px 0 var(--bs-border-color);
  font-weight: 600;
}
.holdings-table .sticky-col {
  position: sticky; left: 0; z-index: 1;
  background: var(--bs-body-bg); border-right: 1px solid var(--bs-border-color);
  min-width: 170px; max-width: 260px;
}
.holdings-table thead th.sticky-col { z-index: 3; }
.holdings-table tbody tr:hover td { background: var(--bs-tertiary-bg); }
.holdings-table tbody tr:hover .sticky-col { background: var(--bs-tertiary-bg); }
tr[data-href] { cursor: pointer; }

/* Grafer på touch: låt vertikalt fingerdrag scrolla sidan (webbläsaren), medan grafen
   behåller horisontell panorering + nyp-zoom. Överstyr Lightweight Charts touch-action:none. */
.chart-touch-scroll, .chart-touch-scroll * { touch-action: pan-y !important; }

/* Liten pane-pill (t.ex. "RSI 14") i grafpanelens hörn */
.chart-pane-pill {
  position: absolute; z-index: 4; pointer-events: none;
  font-size: 10px; font-weight: 600; line-height: 1; padding: 2px 7px;
  border-radius: 999px; background: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color); border: 1px solid var(--bs-border-color);
}

/* Köp/sälj-pluppar (K/S-cirklar) i kursgrafen — i höjd med transaktionspriset */
.trade-marker {
  position: absolute; transform: translate(-50%, -50%);
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; line-height: 1;
  border: 2px solid var(--bs-body-bg); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
  z-index: 4; cursor: default; user-select: none;
}
.trade-marker.buy { background: #2962ff; }   /* köp = blå, sticker ut mot gröna/röda staplar */
.trade-marker.sell { background: #f59e0b; }  /* sälj = orange, distinkt mot stapelfärgerna */

/* Rekommendationspluppar (romber) i kursgrafen — logglägen ur PortfolioRecommendationLogs */
.rec-marker {
  position: absolute; transform: translate(-50%, -50%) rotate(45deg);
  width: 11px; height: 11px; border-radius: 2px;
  border: 2px solid var(--bs-body-bg); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
  z-index: 4; cursor: default; user-select: none;
}
.rec-marker.good { background: #16a34a; }
.rec-marker.warn { background: #f59e0b; }
.rec-marker.bad { background: #dc2626; }
.rec-marker.mid { background: #8892a6; }

/* Bolagshändelser (X-dag/rapport) — små brickor längs prispanelens nederkant */
.event-marker {
  position: absolute; transform: translate(-50%, -100%);
  min-width: 15px; height: 15px; padding: 0 3px; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff; line-height: 1;
  border: 1px solid var(--bs-body-bg); z-index: 4; cursor: default; user-select: none;
}
.event-marker.ex { background: #0ea5e9; }      /* X-dag — neutral blå, inte en köp/säljfärg */
.event-marker.report { background: #a855f7; }  /* rapport — lila, samma familj som RSI-panelen */

/* Varningsbanner på instrumentsidan inför X-dag/rapport */
.event-banner {
  border: 1px solid var(--bs-border-color); border-left: 3px solid #a855f7;
  border-radius: 8px; background: var(--bs-tertiary-bg); padding: 8px 12px; font-size: 13px;
}
.event-banner .eb-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.event-banner .eb-row + .eb-row { margin-top: 4px; }
.event-banner .eb-dot { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }
.event-banner .eb-dot.ex { background: #0ea5e9; }
.event-banner .eb-dot.report { background: #a855f7; }
.event-banner .eb-when { font-variant-numeric: tabular-nums; }

/* Hover-tooltip för köp/sälj-pluppar */
.chart-trade-tip {
  position: absolute; z-index: 5; pointer-events: none; max-width: 260px;
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  border-radius: 8px; padding: 6px 9px; font-size: 12px; box-shadow: var(--bs-box-shadow);
}
.chart-trade-tip .tt-date { font-weight: 600; margin-bottom: 2px; }
.chart-trade-tip .tt-row { white-space: nowrap; }
/* Rekommendationstips har längre motiveringstexter — radbryt inom maxbredden i stället */
.chart-trade-tip.rec-tip { width: max-content; }
.chart-trade-tip.rec-tip .tt-row { white-space: normal; }

/* ---- Kolumnväljare (dra för att ändra ordning) ---- */
#col-list .col-item {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; border-radius: 6px; user-select: none;
}
#col-list .col-item:hover { background: var(--bs-tertiary-bg); }
#col-list .col-item.dragging { opacity: 0.5; background: var(--bs-tertiary-bg); }
#col-list .col-drag {
  cursor: grab; color: var(--bs-secondary-color); font-size: 16px; line-height: 1;
  padding: 6px 6px; margin: -4px 0; border-radius: 4px;
  touch-action: none; /* låt handtaget dra på touch utan att sidan scrollar */
}
#col-list .col-drag:active { cursor: grabbing; }
#col-list .col-item label { cursor: pointer; }

/* ---- Periodväljare för portföljgrafen ---- */
.perf-ranges { display: flex; flex-wrap: wrap; gap: 6px; }
.perf-range {
  display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15;
  min-width: 54px; padding: 4px 9px; cursor: pointer;
  border: 1px solid var(--bs-border-color); border-radius: 8px;
  background: transparent; color: var(--bs-body-color);
}
.perf-range:hover { background: var(--bs-tertiary-bg); }
.perf-range.active { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }
.perf-range .pr-label { font-size: 12px; font-weight: 600; }
.perf-range .pr-pct { font-size: 11px; font-variant-numeric: tabular-nums; }

/* ---- Enhetsväxlare %/kr för utvecklingskurvan ---- */
.perf-unit-toggle {
  display: inline-flex; border: 1px solid var(--bs-border-color);
  border-radius: 8px; overflow: hidden;
}
.perf-unit-toggle button {
  border: 0; background: transparent; color: var(--bs-body-color);
  padding: 4px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.perf-unit-toggle button + button { border-left: 1px solid var(--bs-border-color); }
.perf-unit-toggle button:hover { background: var(--bs-tertiary-bg); }
.perf-unit-toggle button.active { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }

/* ---- Tooltip på utvecklingskurvan: dagens förändring vid hovring ---- */
#perf-chart { position: relative; }
.perf-tooltip {
  position: absolute; z-index: 5; display: none; pointer-events: none;
  padding: 6px 10px; font-size: 12px; line-height: 1.5; white-space: nowrap;
  background: var(--bs-body-bg); color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color); border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.perf-tooltip .pt-date { font-weight: 600; margin-bottom: 2px; }
.perf-tooltip .pt-grid {
  display: grid; grid-template-columns: repeat(3, max-content);
  gap: 1px 14px; align-items: baseline;
}
.perf-tooltip .pt-head { font-size: 11px; color: var(--bs-secondary-color); text-align: right; }
.perf-tooltip .pt-swatch {
  display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px;
}
.perf-tooltip .pt-value { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Jämförelseindex: chip + väljare i modal ---- */
.benchmark-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; cursor: pointer; font-size: 13px; white-space: nowrap;
  border: 1px solid var(--bs-border-color); border-radius: 999px;
  background: var(--bs-body-bg); color: var(--bs-body-color);
}
.benchmark-chip:hover { background: var(--bs-tertiary-bg); }
.benchmark-chip .bc-swatch { display: inline-block; width: 16px; border-top: 2px dashed #f5a623; }
.benchmark-chip .bc-text { font-weight: 600; }
.benchmark-chip .bc-pct { font-variant-numeric: tabular-nums; font-weight: 600; }
.benchmark-chip svg { color: var(--bs-secondary-color); }

.benchmark-search-wrap { position: relative; }
.benchmark-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5;
  max-height: 260px; overflow-y: auto; padding: 4px;
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  border-radius: 10px; box-shadow: var(--bs-box-shadow);
}
.benchmark-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 7px 10px; text-align: left; cursor: pointer;
  border: 0; border-radius: 7px; background: transparent; color: var(--bs-body-color);
}
.benchmark-item:hover { background: var(--bs-tertiary-bg); }
.benchmark-item .bi-ticker { font-size: 12px; color: var(--bs-secondary-color); }
.benchmark-empty { padding: 8px 10px; color: var(--bs-secondary-color); }

/* ---- Ticker-kort (dashboard) ---- */
.ticker-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
@media (min-width: 992px) { .ticker-row { grid-template-columns: repeat(5, 1fr); } }
.ticker-card {
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  border-radius: 12px; padding: 10px 12px 6px; box-shadow: var(--bs-box-shadow-sm);
}
.tc-head { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.tc-ticker { font-weight: 700; font-size: 13px; }
.tc-time { margin-left: auto; font-size: 11px; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.tc-price { display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
.tc-price [data-live-price] { font-size: 18px; font-weight: 700; }
.tc-chg { font-size: 12px; font-weight: 600; }
.tc-spark { width: 100%; height: 46px; display: block; margin-top: 4px; }

/* Nyckeltalsförklaring: diskret info-ikon + bredare, vänsterställd tooltip i temats färger. */
.kpi-info {
  display: inline-flex; margin-left: 3px; vertical-align: -1px;
  color: var(--bs-secondary-color); cursor: help; opacity: .75;
}
.kpi-info:hover, .kpi-info:focus-visible { color: var(--brand); opacity: 1; }
.tooltip.kpi-tip { --bs-tooltip-max-width: 330px; --bs-tooltip-opacity: 1; }
.tooltip.kpi-tip .tooltip-inner {
  text-align: left; padding: 10px 13px; font-size: 12.5px; line-height: 1.5;
  background: var(--bs-body-bg); color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}
.tooltip.kpi-tip .tooltip-arrow { display: none; }

/* Kurstidsstatus: klocka (idag) eller kalender (annan dag) framför tiden — växlas via is-today/is-other. */
.qstatus { display: inline-flex; align-items: center; }
.qstatus .qs-clock, .qstatus .qs-cal { display: none; margin-right: 4px; flex: 0 0 auto; }
.qstatus.is-today .qs-clock { display: inline-block; }
.qstatus.is-other .qs-cal { display: inline-block; }
/* Grön klocka + tid när börsen är öppen (öppet-indikator i stället för en separat prick). */
.qstatus.is-live { color: #16a34a; }
[data-bs-theme="dark"] .qstatus.is-live { color: #22c55e; }

/* Klistrad instrumentrubrik (namn + kursdata) — fäster direkt under app-headern. */
.inst-sticky-head {
  position: sticky; top: var(--header-h);
  z-index: 20; background: var(--bs-body-bg);
  padding: 10px 0; border-bottom: 1px solid var(--bs-border-color);
}

/* ---- Headerns indexticker (rad överst i innehållet, scrollar med sidan) ---- */
.hdr-ticker-strip {
  background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color);
}
.hdr-ticker {
  display: flex; align-items: stretch; gap: 0;
  overflow-x: auto; scrollbar-width: none;
}
.hdr-ticker::-webkit-scrollbar { display: none; }
.hdr-tk {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 16px; min-width: max-content; flex: 0 0 auto;
  text-decoration: none; color: var(--bs-body-color);
  border-right: 1px solid var(--bs-border-color);
}
.hdr-tk:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.hdr-tk-body { display: flex; flex-direction: column; gap: 1px; min-width: 96px; }
.hdr-tk-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.hdr-tk-name { font-size: 12px; font-weight: 600; color: var(--bs-secondary-color); letter-spacing: .01em; }
.hdr-tk-time { font-size: 11px; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.hdr-tk-price { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hdr-tk-chg { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Intervallstapel: dagens lägsta (botten) → högsta (topp), med en pil som visar var kursen ligger.
   Färg (grön upp / röd ner) styrs av dir-up/dir-down på länken (satt server-side + live). */
.hdr-tk-range {
  position: relative; width: 3px; align-self: stretch; margin: 3px 0;
  border-radius: 2px; background: var(--bs-border-color); min-height: 26px;
}
.hdr-tk.dir-up .hdr-tk-range { background: color-mix(in srgb, #16a34a 40%, var(--bs-border-color)); }
.hdr-tk.dir-down .hdr-tk-range { background: color-mix(in srgb, #dc2626 40%, var(--bs-border-color)); }
[data-bs-theme="dark"] .hdr-tk.dir-up .hdr-tk-range { background: color-mix(in srgb, #22c55e 45%, var(--bs-border-color)); }
[data-bs-theme="dark"] .hdr-tk.dir-down .hdr-tk-range { background: color-mix(in srgb, #ef4444 45%, var(--bs-border-color)); }
/* Vänsterpekande triangel (◀) vid kursens läge — sitter till höger om stapeln. */
.hdr-tk-marker {
  position: absolute; right: 0; transform: translateY(50%);
  width: 0; height: 0;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  border-right: 6px solid var(--bs-body-color);
}
.hdr-tk.dir-up .hdr-tk-marker { border-right-color: #16a34a; }
.hdr-tk.dir-down .hdr-tk-marker { border-right-color: #dc2626; }
[data-bs-theme="dark"] .hdr-tk.dir-up .hdr-tk-marker { border-right-color: #22c55e; }
[data-bs-theme="dark"] .hdr-tk.dir-down .hdr-tk-marker { border-right-color: #ef4444; }
.hdr-tk.live-closed .hdr-tk-range,
.hdr-tk.live-closed .hdr-tk-marker { opacity: .6; }
@media (max-width: 575.98px) { .hdr-tk { padding: 6px 12px; } .hdr-tk-body { min-width: 84px; } }

/* ---- Landsflagga ---- */
.flag {
  display: inline-block; width: 20px; height: 15px;
  border-radius: 3px; object-fit: cover; vertical-align: -2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12);
}
.flag-sm { width: 17px; height: 13px; vertical-align: -1px; }
.flag-globe {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 15px; vertical-align: -2px; color: var(--bs-secondary-color);
}
.flag-globe.flag-sm { width: 17px; height: 13px; }
.flag-globe svg { width: 100%; height: 100%; }

/* ---- Bolagslogga (tile med monogram-fallback) ---- */
.inst-logo {
  position: relative; display: inline-flex; flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: 10px; overflow: hidden;
}
.inst-mono {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 17px; letter-spacing: .02em;
}
.inst-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 5px; background: #fff; opacity: 0;
}
.inst-img.loaded { opacity: 1; }

/* ---- Statremsa i instrumentheadern ---- */
/* Flex i stället för fast kolumnantal: sista radens rutor växer och fyller bredden, så det
   aldrig uppstår tomma celler där containerns bakgrund lyser igenom — oavsett hur många mått
   remsan innehåller. (Med grid måste kolumnantalet jämnt dela antalet rutor.) */
.stat-strip {
  display: flex; flex-wrap: wrap;
  gap: 1px; background: var(--bs-border-color);
  border: 1px solid var(--bs-border-color); border-radius: 10px; overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.stat-strip .stat { background: var(--bs-body-bg); padding: 8px 12px; flex: 1 1 150px; }
.stat-strip .k { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); }
.stat-strip .v { font-size: 14px; font-weight: 600; margin-top: 2px; }
@media (max-width: 480px) { .stat-strip .stat { flex-basis: 120px; } }

/* ---- KPI-paneler på instrumentsidan ---- */
.kpi-metric { padding: 11px 0; border-bottom: 1px solid var(--bs-border-color); }
.kpi-metric:last-child { border-bottom: 0; }
.kpi-metric .m-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kpi-metric .m-lab { font-size: 13px; color: var(--bs-secondary-color); }
.kpi-metric .m-val { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.arw { font-size: 10px; }
.arw.up { color: #16a34a; }
.arw.down { color: #dc2626; }
.arw.flat { color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .arw.up { color: #22c55e; }
[data-bs-theme="dark"] .arw.down { color: #ef4444; }

.rng { margin-top: 9px; }
.rng-track { position: relative; height: 6px; border-radius: 4px;
  background: linear-gradient(90deg, #2fbf71 0%, #d9c04a 55%, #e0654f 100%); opacity: .9; }
.rng-track.q { background: linear-gradient(90deg, #e0654f 0%, #d9c04a 45%, #2fbf71 100%); }
.rng-dot { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%;
  transform: translate(-50%,-50%); background: var(--bs-body-bg); border: 2.5px solid var(--bs-body-color); }
.rng-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 5px;
  font-size: 11px; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.rng-chips { display: flex; gap: 6px; }
.kpi-chip { font-size: 11px; padding: 1px 7px; border-radius: 999px;
  background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); border: 1px solid var(--bs-border-color); }
.kpi-chip.lo { color: #16a34a; border-color: rgba(34,197,94,.4); }
.kpi-chip.hi { color: #c67c00; border-color: rgba(245,166,35,.4); }
[data-bs-theme="dark"] .kpi-chip.lo { color: #22c55e; }
[data-bs-theme="dark"] .kpi-chip.hi { color: #f5a623; }

.kpi-sub { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 12px; }
.kpi-sub .trend { font-size: 11px; color: var(--bs-secondary-color); }
.kpi-pill { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.kpi-pill.good { color: #16a34a; background: rgba(34,197,94,.14); }
.kpi-pill.bad { color: #dc2626; background: rgba(239,68,68,.13); }
.kpi-pill.mid { color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); }
.kpi-pill.warn { color: #d97706; background: rgba(245, 158, 11, .14); }

/* Informationsruta i profilformuläret */
.profile-note {
  border-left: 3px solid var(--brand); border-radius: 4px;
  background: var(--bs-tertiary-bg); padding: 8px 12px; font-size: 13px;
}

/* --- Signalhistorik: klockan i headern + listan --- */
.signal-badge {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 999px; background: #dc2626; color: #fff;
  font-size: 10px; font-weight: 600; line-height: 16px; text-align: center;
}
.signal-menu { width: 340px; max-width: 92vw; padding: 0; }
.signal-menu-body { max-height: 60vh; overflow: auto; }
.signal-menu-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  color: inherit; text-decoration: none; border-bottom: 1px solid var(--bs-border-color);
}
.signal-menu-item:hover { background: var(--bs-tertiary-bg); color: inherit; }
.signal-menu-main { min-width: 0; display: flex; flex-direction: column; }
.signal-menu-name { font-size: 13px; font-weight: 500; }
.signal-menu-name, .signal-menu-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.signal-menu-meta { font-size: 11px; color: var(--bs-secondary-color); }

/* Periodrubriken följer med i kanten när man scrollar. top = headerns höjd, eftersom headern
   är sticky och annars hade legat över rubriken. */
.signal-group {
  position: sticky; top: var(--header-h); z-index: 2;
  padding: 6px 2px; margin-top: 10px;
  background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color);
  font-size: 12px; font-weight: 600; color: var(--bs-secondary-color);
  text-transform: uppercase; letter-spacing: .04em;
}
.signal-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 2px;
  color: inherit; text-decoration: none; border-bottom: 1px solid var(--bs-border-color);
}
.signal-row:hover { background: var(--bs-tertiary-bg); color: inherit; }
.signal-action { flex: 0 0 auto; }
/* Klockslaget i egen kolumn med tabellsiffror, så tiderna står i lodrät linje. */
.signal-time {
  flex: 0 0 auto; width: 40px; font-size: 12px; color: var(--bs-secondary-color);
  font-variant-numeric: tabular-nums;
}
.signal-headline { font-weight: 500; }
.signal-main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.signal-name { font-size: 14px; }
.signal-reason {
  font-size: 12px; color: var(--bs-secondary-color);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.signal-meta {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end;
  font-size: 12px; white-space: nowrap;
}
@media (max-width: 576px) {
  .signal-reason { white-space: normal; }
}

/* Andelsstapeln i portföljtabellen.
   Talet säger hur stor positionen är i portföljen; stapeln säger hur nära taket den ligger.
   Skalan är alltså TAKET, inte portföljen — en position på 6 % med 10 % tak fyller 60 %. Skalad
   mot portföljen hade varje stapel varit en osynlig sliver, och just närheten till taket är det
   man agerar på. Färgerna följer regelmotorn: över taket = amber, över tak × 1,10 = rött, vilket
   är precis där "Skala av" utlöses.
   Stapeln ligger PÅ SAMMA RAD som talet, före det. En stapel under talet hade gjort varje rad i
   tabellen ~5 px högre, och radhöjd är dyrare än kolumnbredd här: höjden kostar antal synliga
   innehav, bredden bara lite av ett vågrätt scrollutrymme som redan finns. */
.wbar {
  position: relative; display: inline-block; vertical-align: middle;
  width: 34px; height: 5px; margin-right: 6px;
  background: var(--bs-tertiary-bg); border-radius: 999px; overflow: hidden;
}
/* Stapel och tal ska aldrig brytas isär till två rader — då är höjdvinsten borta. */
.col-weight { white-space: nowrap; }
.wbar-fill { position: absolute; top: 0; bottom: 0; left: 0; background: var(--brand); border-radius: 999px; }
.wbar.near .wbar-fill { background: #d97706; }
.wbar.over .wbar-fill { background: #dc2626; }
/* Målvikten: tunt streck tvärs stapeln. Kontrastfärg mot både fyllnad och spår, så det syns
   oavsett hur långt fyllnaden nått och i båda teman. */
.wbar-target { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--bs-body-color); opacity: .55; }

/* Signalstaplarna: hela raden bär tooltipen, vikten visas dämpad efter etiketten */
.sub-row { cursor: help; }
.sub-info { color: var(--bs-secondary-color); font-size: 10px; }
.sub-weight { color: var(--bs-secondary-color); font-size: 10px; font-weight: 400; }

/* Sentiment är en justering (±), inte 0–100 — halv stapel som växer från mitten. Nollstrecket
   ritas alltid ut, så en oförändrad rad läses som "neutral" i stället för som betyget noll. */
.sub-row .bar.sentiment { position: relative; }
.sub-row .bar.sentiment::before {
  content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px;
  background: var(--bs-secondary-color); opacity: .5; transform: translateX(-50%);
}
.sub-row .bar.sentiment i { position: absolute; top: 0; bottom: 0; left: 50%; }
.sub-row .bar.sentiment i.pos { background: #22c55e; }
.sub-row .bar.sentiment i.neg { background: #ef4444; transform: translateX(-100%); }
.sub-row .n.neutral { color: var(--bs-secondary-color); font-size: 11px; }

/* Summeringsraden under delpoängen */
.sub-sum {
  text-align: right; font-weight: 700; font-variant-numeric: tabular-nums;
  border-top: 1px solid var(--bs-border-color); margin-top: 6px; padding-top: 6px; cursor: help;
}
.sub-outside { border-top: 1px solid var(--bs-border-color); padding-top: 10px; }

/* Bolagshändelse inom tre dagar — lyft fram i innehavstabellen */
.days-soon { color: #d97706; font-weight: 600; }
[data-bs-theme="dark"] .days-soon { color: #f5a623; }

/* P/E som inte går att läsa rakt av (förlustår eller engångsposter) — dämpad + varningsmarkör */
.pe-suspect { color: var(--bs-secondary-color); cursor: help; }
[data-bs-theme="dark"] .kpi-pill.good { color: #22c55e; }
[data-bs-theme="dark"] .kpi-pill.bad { color: #ef4444; }
[data-bs-theme="dark"] .kpi-pill.warn { color: #f5a623; }

/* Infopanel i transaktionsmodalen: innehav, disposition mot regler och rekommendation */
.tx-holding-info {
  border: 1px solid var(--bs-border-color); border-radius: 8px;
  padding: 8px 12px; font-size: 13px; background: var(--bs-tertiary-bg);
}
.tx-holding-info .thi-row + .thi-row { margin-top: 3px; }
.tx-holding-info .thi-rules { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.tx-holding-info .thi-rules input { width: 64px; text-align: right; }

/* Dispositionslinje: vikt som fyllnad, streckmarkörer för målvikt (grå) och tak (röd) */
.disp-bar {
  position: relative; height: 8px; margin: 7px 0 4px;
  background: var(--bs-secondary-bg); border-radius: 999px;
}
.disp-bar .db-fill { height: 100%; border-radius: 999px; background: var(--brand); }
.disp-bar .db-fill.warn { background: #f59e0b; }
.disp-bar .db-fill.over { background: #dc2626; }
.disp-bar .db-mark { position: absolute; top: -3px; width: 2px; height: 14px; border-radius: 1px; }
.disp-bar .db-mark.target { background: var(--bs-secondary-color); }
.disp-bar .db-mark.cap { background: #dc2626; }
.disp-bar .db-mark.now { background: var(--bs-body-color); opacity: .55; } /* nuvarande vikt i förhandsvisningen */
.tx-holding-info .thi-after { font-weight: 600; }

/* Pennknapp i rekommendationskolumnen (tak/målvikt per innehav) — diskret tills raden hovras */
.rec-edit {
  border: 0; background: transparent; color: var(--bs-secondary-color);
  padding: 0 4px; margin-left: 2px; cursor: pointer; font-size: 12px; line-height: 1;
  opacity: 0; transition: opacity .12s ease;
}
tr:hover .rec-edit, .rec-edit:focus-visible { opacity: 1; }
.rec-edit:hover { color: var(--bs-body-color); }

/* --- Marknadsklimat --- */

/* Kompakt prick i headern. Färgen är hela poängen — den ska gå att läsa i förbifarten. */
.climate-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 9px; border-radius: 999px;
  text-decoration: none; white-space: nowrap;
  background: var(--bs-tertiary-bg); color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
}
.climate-pill:hover { color: var(--bs-body-color); border-color: var(--bs-secondary-color); }
.climate-pill .cp-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.climate-pill.good .cp-dot { background: #22c55e; }
.climate-pill.mid  .cp-dot { background: #f5a623; }
.climate-pill.bad  .cp-dot { background: #ef4444; }
.climate-pill .cp-num { font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.climate-pill .cp-lab { font-size: 12px; color: var(--bs-secondary-color); }
/* Chock: pulserande kant så den drar blicken utan att skrika. */
.climate-pill.shock { border-color: #ef4444; animation: climate-pulse 2s ease-in-out infinite; }
@keyframes climate-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .45); }
  50%      { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0); }
}
@media (prefers-reduced-motion: reduce) { .climate-pill.shock { animation: none; } }
/* Etiketten är det första som får vika på små skärmar; siffran och pricken bär informationen. */
@media (max-width: 767.98px) { .climate-pill .cp-lab { display: none; } }

.climate-card.is-shock { border-color: #ef4444; }
.climate-shock-banner {
  padding: 10px 12px; border-radius: 10px; font-size: 14px;
  background: color-mix(in srgb, #ef4444 12%, transparent);
  border: 1px solid color-mix(in srgb, #ef4444 45%, transparent);
}
.climate-degraded { color: #f5a623; cursor: help; }

/* Diskret markering när kortet bytts ut av en live-push — så man ser ATT det uppdaterades,
   utan att det blinkar till varje kvart. */
.climate-refreshed { animation: climate-fade .6s ease; }
@keyframes climate-fade { from { opacity: .45; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .climate-refreshed { animation: none; } }

/* Förvarning för makrohändelser (räntebesked m.m.) — dämpad, inte alarmerande: en VÄNTAD
   händelse är inprisad, det är avvikelsen som rör marknaden. */
.macro-warning {
  padding: 12px 14px; border-radius: 12px;
  background: color-mix(in srgb, #f5a623 9%, transparent);
  border: 1px solid color-mix(in srgb, #f5a623 38%, transparent);
}
.mw-head { font-size: 13px; font-weight: 600; margin-bottom: 7px; }
.mw-list { list-style: none; margin: 0; padding: 0; }
.mw-list li { display: flex; align-items: baseline; gap: 9px; font-size: 14px; padding: 3px 0; flex-wrap: wrap; }
.mw-list li.is-today { font-weight: 600; }
.mw-when { min-width: 82px; color: #d97706; }
[data-bs-theme="dark"] .mw-when { color: #f5a623; }
.mw-meta { color: var(--bs-secondary-color); font-size: 12px; }
.mw-foot { font-size: 12px; color: var(--bs-secondary-color); margin-top: 8px; }

/* Klimatheatmap: en ruta per timme, färgad efter timmens LÄGSTA läge. Flex med wrap i stället
   för fast rutnät — då fungerar den både som 24-timmarsremsa på kortet och som veckovy. */
.climate-heat { display: flex; flex-wrap: wrap; gap: 3px; }
.ch-cell {
  display: block; width: 13px; height: 13px; border-radius: 3px; flex: 0 0 auto;
  background: var(--bs-tertiary-bg); cursor: help;
}
.ch-cell.s1 { background: #dc2626; }                 /* riskflykt */
.ch-cell.s2 { background: #f5a623; }
.ch-cell.s3 { background: #64748b; }                 /* neutralt */
.ch-cell.s4 { background: #4ade80; }
.ch-cell.s5 { background: #16a34a; }                 /* riskpåslag */
.ch-cell.shock { background: #dc2626; box-shadow: inset 0 0 0 2px #fff; }
[data-bs-theme="dark"] .ch-cell.shock { box-shadow: inset 0 0 0 2px #0d1017; }
/* "Ingen avläsning" måste se annorlunda ut än "lugnt" — annars läses ett driftstopp som frid.
   Fasta grå toner i stället för temavariabler: den här cellen MÅSTE synas, och variablernas
   kontrast mot bakgrunden är för svag i mörkt läge (den blev osynlig vid granskning). */
.ch-cell.none {
  background: repeating-linear-gradient(45deg,
    rgba(148, 163, 184, .20), rgba(148, 163, 184, .20) 2px,
    rgba(148, 163, 184, .55) 2px, rgba(148, 163, 184, .55) 4px);
}
.climate-heat-axis {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 11px; color: var(--bs-secondary-color); margin-top: 6px;
}
.climate-heat-axis .che-mid { flex: 1 1 auto; text-align: center; }
@media (max-width: 575.98px) { .climate-heat-axis .che-mid { display: none; } }
.climate-heat-legend {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  font-size: 11px; color: var(--bs-secondary-color); margin-top: 12px;
}

/* Nyhetslistan bakom tonmätaren */
.news-list { list-style: none; margin: 0; padding: 0; max-height: 26rem; overflow-y: auto; }
.news-list li { padding: 7px 0; border-bottom: 1px solid var(--bs-border-color); }
.news-list li:last-child { border-bottom: 0; }
.news-list a { display: block; font-size: 14px; text-decoration: none; color: var(--bs-body-color); }
.news-list a:hover { color: var(--brand); text-decoration: underline; }
.news-list .nl-meta { display: block; font-size: 11px; color: var(--bs-secondary-color); margin-top: 2px; }
/* Flödesmärkning. Två flöden körs parallellt under utvärderingen — färgen gör det möjligt att
   skanna listan och se vilket som levererar utan att läsa varje rad. */
.news-list .nl-feed {
    display: inline-block; padding: 0 5px; margin-right: 5px; border-radius: 3px;
    font-size: 10px; font-weight: 600; letter-spacing: .02em; vertical-align: 1px;
    border: 1px solid currentColor;
}
.news-list .nl-feed-1 { color: #9a7b3f; }             /* GDELT */
.news-list .nl-feed-2 { color: #3f7ba0; }             /* Google News */
.news-list .nl-feed-3 { color: #5c8a4a; }             /* DI */
[data-theme="dark"] .news-list .nl-feed-1 { color: #d6b26a; }
[data-theme="dark"] .news-list .nl-feed-2 { color: #7fb6d8; }
[data-theme="dark"] .news-list .nl-feed-3 { color: #93c47f; }
/* Marknadston per artikel. Siffran är tonen, stapeln under är relevansen — en kort stapel betyder
   att rubriken knappt väger in, vilket är något annat än att den är neutral. */
.news-list .nl-tone {
    display: inline-block; min-width: 34px; padding: 0 4px; margin-right: 5px; border-radius: 3px;
    font-size: 10px; font-weight: 700; text-align: center; vertical-align: 1px;
    border: 1px solid currentColor; position: relative;
}
.news-list .nl-tone .nl-rel {
    display: block; height: 2px; margin: 1px auto 1px; background: currentColor; opacity: .55;
}
.news-list .t-pos { color: #2f7d4f; }
.news-list .t-neg { color: #b0453c; }
.news-list .t-neu { color: var(--bs-secondary-color); }
[data-theme="dark"] .news-list .t-pos { color: #6fc493; }
[data-theme="dark"] .news-list .t-neg { color: #e08a80; }
/* Morgonbriefen: sista stycket ska inte lämna tomrum mot kortkanten. */
.morning-brief p:last-of-type { margin-bottom: 0; }
/* Nyhetsflagga i tabellerna (AI-bonuslagret): negativ bolagsnyhet senaste två dygnen.
   Bara negativa flaggas — flaggan är ett "titta hit", inte en betygsskala. */
.news-flag { margin-left: 4px; font-size: 11px; cursor: help; }
.news-flag.nf-bad { color: #c0392b; }
.news-flag.nf-warn { color: #b8860b; }
[data-theme="dark"] .news-flag.nf-bad { color: #e57368; }
[data-theme="dark"] .news-flag.nf-warn { color: #d6b26a; }
/* Bolagsnyheter på instrumentsidan: hopfällbart kort med samma nl-tone-språk som klimatlistan. */
.company-news > summary { cursor: pointer; list-style: none; }
.company-news > summary::-webkit-details-marker { display: none; }
.company-news > summary h2::after { content: " ▸"; font-size: 12px; color: var(--bs-secondary-color); }
.company-news[open] > summary h2::after { content: " ▾"; }
/* Ingress. Finns bara i utgivarflödena; klamrad till tre rader så att en lång ingress inte
   tränger undan rubrikerna under den. */
.news-list .nl-summary {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 12px; line-height: 1.45; color: var(--bs-body-color); opacity: .8; margin-top: 3px;
}

.climate-gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 767.98px) { .climate-gauges { grid-template-columns: 1fr 1fr; } }
@media (max-width: 419.98px) { .climate-gauges { grid-template-columns: 1fr; } }
.cg-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 5px; }
.cg-title { font-size: 13px; color: var(--bs-secondary-color); }
.cg-score { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cg-score.good { color: #22c55e; } .cg-score.mid { color: #f5a623; } .cg-score.bad { color: #ef4444; }
.cg-track { height: 8px; border-radius: 5px; background: var(--bs-tertiary-bg); overflow: hidden; }
.cg-track i { display: block; height: 100%; border-radius: 5px; }
.cg-track i.good { background: #22c55e; } .cg-track i.mid { background: #f5a623; } .cg-track i.bad { background: #ef4444; }
.cg-band { font-size: 12px; color: var(--bs-secondary-color); margin-top: 4px; }

.climate-headline { font-size: 15px; margin-bottom: 0; }
.climate-details > summary { cursor: pointer; font-size: 13px; color: var(--bs-secondary-color); }
.climate-details > summary:hover { color: var(--bs-body-color); }
.cp-group { margin-top: 12px; }
.cp-group-head { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--bs-secondary-color); margin-bottom: 6px; }
/* Fast etikett- och sifferbredd: varje rad är ett eget grid, så "auto" hade gett osynkade staplar. */
.cp-row {
  display: grid; grid-template-columns: 118px 90px 30px 44px 1fr; gap: 8px;
  align-items: center; font-size: 13px; margin-bottom: 7px;
}
@media (max-width: 767.98px) { .cp-row { grid-template-columns: 108px 1fr 28px 40px; } .cp-row .cp-detail { display: none; } }
.cp-row .cp-lab { color: var(--bs-secondary-color); white-space: nowrap; }
.cp-row .cp-bar { height: 7px; border-radius: 4px; background: var(--bs-tertiary-bg); overflow: hidden; }
.cp-row .cp-bar i { display: block; height: 100%; }
.cp-row .cp-bar i.good { background: #22c55e; } .cp-row .cp-bar i.mid { background: #f5a623; } .cp-row .cp-bar i.bad { background: #ef4444; }
.cp-row .cp-n { text-align: right; font-variant-numeric: tabular-nums; }
.cp-row .cp-contrib { text-align: right; font-size: 11px; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.cp-row .cp-detail { color: var(--bs-secondary-color); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.climate-chart { width: 100%; overflow-x: auto; }
.cc-svg { width: 100%; height: 260px; display: block; }
.cc-grid { stroke: var(--bs-border-color); stroke-width: 1; }
.cc-grid.cc-mid { stroke-dasharray: 4 4; }
.cc-axis { fill: var(--bs-secondary-color); font-size: 10px; }
.cc-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.cc-swe { stroke: #22c55e; stroke-width: 2.5; }
.cc-eco { stroke: #2962ff; }
.cc-pol { stroke: #a855f7; }
.cc-shock { stroke: #ef4444; stroke-width: 2; opacity: .5; vector-effect: non-scaling-stroke; }
.climate-legend { display: flex; gap: 16px; font-size: 12px; color: var(--bs-secondary-color); margin-top: 8px; }
.climate-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.climate-legend .ll-swe { background: #22c55e; }
.climate-legend .ll-eco { background: #2962ff; }
.climate-legend .ll-pol { background: #a855f7; }
.climate-legend .ll-shock { background: #ef4444; }

/* --- Bevakningslistor --- */

/* Stjärnan i instrumentrubriken: kontur tills instrumentet ligger i minst en lista, då fylld. */
/* Ligger inline i rubriken (h1 är inte flex — stjärnan ska inte påverka namnets layout). */
.wl-star-wrap { display: inline-flex; vertical-align: middle; margin-left: 4px; }
.wl-star {
  border: 0; background: transparent; padding: 2px; line-height: 0; cursor: pointer;
  color: var(--bs-secondary-color); transition: color .12s ease, transform .12s ease;
}
.wl-star svg { fill: none; stroke: currentColor; stroke-width: 1.7; }
.wl-star:hover { color: #f5a623; transform: scale(1.08); }
.wl-star.on { color: #f5a623; }
.wl-star.on svg { fill: currentColor; stroke: currentColor; }
.wl-star-menu { min-width: 250px; }
.wl-star-lists { max-height: 40vh; overflow: auto; }
.wl-star-item {
  display: flex; align-items: center; gap: 8px; padding: 4px 6px;
  border-radius: 6px; cursor: pointer; font-size: 14px;
}
.wl-star-item:hover { background: var(--bs-tertiary-bg); }

/* Notering i bevakningstabellen: kapa långa texter i stället för att spränga radhöjden.
   Pennan ligger i samma cell och ska aldrig kapas — därav flex med krympbar text. */
.wl-note { max-width: 260px; }
.wl-note .wl-note-text {
  display: inline-block; max-width: calc(100% - 20px); vertical-align: middle;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--bs-secondary-color); font-size: 13px;
}

/* Valuta-badge: markerar att radens native kurs/GAV är i annan valuta än portföljen (SEK) */
.ccy-badge {
  display: inline-block; margin-left: 6px; padding: 0 5px;
  font-size: 10px; font-weight: 600; line-height: 15px;
  border-radius: 4px; letter-spacing: .03em;
  color: var(--bs-secondary-color); background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color); vertical-align: middle;
  cursor: help;
}

.spark { width: 92px; height: 26px; display: block; }
.fscore { display: flex; gap: 3px; }
.fscore i { width: 12px; height: 12px; border-radius: 3px; background: var(--bs-tertiary-bg); }
.fscore i.on { background: #22c55e; }

/* Signalpanel */
.signal-gauge { width: 100%; max-width: 240px; height: 128px; display: block; margin: 0 auto; }
.signal-verdict { text-align: center; }
.signal-verdict .big { font-size: 30px; font-weight: 800; letter-spacing: .04em; }
.signal-verdict .small { font-size: 12px; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .09em; }
/* FAST etikettbredd — varje rad är ett eget grid, så "auto" sizear per rad och staplarna
   hamnar osynkade. Bredden rymmer den längsta etiketten ("Låg volatilitet") utan radbrytning.
   Kolumnerna: etikett · stapel · delpoäng · bidrag i poäng. */
.sub-row { display: grid; grid-template-columns: 108px 1fr 30px 48px; gap: 8px; align-items: center; font-size: 13px; margin-bottom: 9px; }
.sub-row .lab { color: var(--bs-secondary-color); white-space: nowrap; }
.sub-row .contrib { text-align: right; font-variant-numeric: tabular-nums; font-size: 11px; color: var(--bs-secondary-color); }
.sub-row .bar { height: 7px; border-radius: 4px; background: var(--bs-tertiary-bg); overflow: hidden; }
.sub-row .bar > i { display: block; height: 100%; border-radius: 4px; }
.sub-row .n { text-align: right; font-variant-numeric: tabular-nums; }

/* Sorterbara tabellrubriker */
table.sortable thead th:not(.no-sort):hover {
  background-color: rgba(128, 128, 128, 0.12);
}

.sort-arrow {
  opacity: 0.7;
  font-size: 0.75em;
}

.live-flash {
  animation: live-flash 0.6s ease-out;
}

@keyframes live-flash {
  from { background-color: rgba(34, 197, 94, 0.25); }
  to { background-color: transparent; }
}

/* Pulsande pill på live-värden vid uppdatering (fade in + ut; grön upp, röd ner, neutral).
   Formen är snabb tändning → kort platå → lång uttoning: tändningen (~0,15 s) gör att pulsen
   registreras även i ögonvrån, platån ger tid att hinna vända blicken, och uttoningen på
   resterande ~1,5 s pekar ut VILKET värde som rörde sig utan att pocka. 0,85 s totalt var för
   kort — pulsen hann slockna innan man hunnit titta. */
.flash-up, .flash-down, .flash-neutral { border-radius: 6px; }
.flash-up { animation: flash-up 2s ease-out; }
.flash-down { animation: flash-down 2s ease-out; }
.flash-neutral { animation: flash-neutral 2s ease-out; }

@keyframes flash-up {
  0% { background-color: transparent; }
  8% { background-color: rgba(34, 197, 94, 0.55); }
  25% { background-color: rgba(34, 197, 94, 0.45); }
  100% { background-color: transparent; }
}
@keyframes flash-down {
  0% { background-color: transparent; }
  8% { background-color: rgba(239, 68, 68, 0.55); }
  25% { background-color: rgba(239, 68, 68, 0.45); }
  100% { background-color: transparent; }
}
@keyframes flash-neutral {
  0% { background-color: transparent; }
  8% { background-color: rgba(148, 163, 184, 0.45); }
  25% { background-color: rgba(148, 163, 184, 0.38); }
  100% { background-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .live-flash, .flash-up, .flash-down, .flash-neutral { animation: none; }
}

/* ── Utvecklingskalender (heatmap mot index) ───────────────────────────── */
.cal-years .btn.active { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }

/* Statistikkort */
.cal-stats {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.cal-stat {
  border: 1px solid var(--bs-border-color);
  border-radius: 10px; padding: 10px 12px; background: var(--bs-body-bg);
}
.cal-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary-color); }
.cal-stat-value { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; margin-top: 2px; }
.cal-stat-sub { font-size: 11px; color: var(--bs-secondary-color); }

/* Heatmap-rutnät */
.cal-heatmap-wrap { overflow-x: auto; padding-bottom: 4px; }
.cal-heatmap { min-width: max-content; }
.cal-grid { display: inline-flex; flex-direction: column; gap: 4px; }
.cal-month-row { display: flex; gap: 3px; height: 14px; align-items: flex-end; }
.cal-month-label { width: 12px; flex: 0 0 12px; font-size: 10px; color: var(--bs-secondary-color); white-space: nowrap; overflow: visible; }
.cal-wd-spacer { width: 30px; flex: 0 0 30px; }
.cal-body-row { display: flex; gap: 3px; }
.cal-weekdays { display: flex; flex-direction: column; gap: 3px; width: 30px; flex: 0 0 30px; }
.cal-weekdays span { height: 12px; font-size: 9px; line-height: 12px; color: var(--bs-secondary-color); }
.cal-cols { display: flex; gap: 3px; }
.cal-col { display: flex; flex-direction: column; gap: 3px; }
.cal-cell {
  width: 12px; height: 12px; border-radius: 2px;
  background: var(--bs-tertiary-bg);
  outline: 1px solid rgba(0,0,0,.04); outline-offset: -1px;
}
.cal-cell.cal-out { background: transparent; outline: none; }
.cal-cell.cal-empty { background: var(--bs-tertiary-bg); }
.cal-cell.cal-flat { background: #cbd5e1; }
.cal-cell[data-has] { cursor: pointer; }
.cal-cell[data-has]:hover { outline: 1.5px solid var(--bs-body-color); outline-offset: 0; }

/* Grön skala (slog index) */
.cal-cell.cal-up.lv1 { background: #d6f5df; }
.cal-cell.cal-up.lv2 { background: #a3e6b8; }
.cal-cell.cal-up.lv3 { background: #5fce85; }
.cal-cell.cal-up.lv4 { background: #2fb35f; }
.cal-cell.cal-up.lv5 { background: #178a44; }
/* Röd skala (sämre än index) */
.cal-cell.cal-down.lv1 { background: #fcdcdc; }
.cal-cell.cal-down.lv2 { background: #f7b0b0; }
.cal-cell.cal-down.lv3 { background: #ef7c7c; }
.cal-cell.cal-down.lv4 { background: #e14b4b; }
.cal-cell.cal-down.lv5 { background: #bf2626; }

[data-bs-theme="dark"] .cal-cell { background: #1c2230; outline-color: rgba(255,255,255,.04); }
[data-bs-theme="dark"] .cal-cell.cal-empty { background: #1c2230; }
[data-bs-theme="dark"] .cal-cell.cal-flat { background: #39424f; }
[data-bs-theme="dark"] .cal-cell.cal-up.lv1 { background: #123524; }
[data-bs-theme="dark"] .cal-cell.cal-up.lv2 { background: #17542f; }
[data-bs-theme="dark"] .cal-cell.cal-up.lv3 { background: #1f7a41; }
[data-bs-theme="dark"] .cal-cell.cal-up.lv4 { background: #2aa054; }
[data-bs-theme="dark"] .cal-cell.cal-up.lv5 { background: #34c766; }
[data-bs-theme="dark"] .cal-cell.cal-down.lv1 { background: #3a1a1c; }
[data-bs-theme="dark"] .cal-cell.cal-down.lv2 { background: #5c2224; }
[data-bs-theme="dark"] .cal-cell.cal-down.lv3 { background: #8a2d2f; }
[data-bs-theme="dark"] .cal-cell.cal-down.lv4 { background: #bf3b3d; }
[data-bs-theme="dark"] .cal-cell.cal-down.lv5 { background: #ef5052; }

/* Legend */
.cal-legend { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 11px; color: var(--bs-secondary-color); }
.cal-legend-scale {
  width: 130px; height: 10px; border-radius: 3px;
  background: linear-gradient(90deg, #bf2626, #ef7c7c, #cbd5e1, #5fce85, #178a44);
}
[data-bs-theme="dark"] .cal-legend-scale {
  background: linear-gradient(90deg, #ef5052, #8a2d2f, #39424f, #1f7a41, #34c766);
}

/* Månadssammanfattning */
.cal-months { display: flex; flex-wrap: wrap; gap: 8px; }
.cal-month {
  border: 1px solid var(--bs-border-color); border-radius: 8px;
  padding: 6px 10px; min-width: 84px; text-align: center;
}
.cal-month.cal-up { border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.08); }
.cal-month.cal-down { border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.08); }
.cal-month-name { font-size: 11px; text-transform: uppercase; color: var(--bs-secondary-color); }
.cal-month-diff { font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-month.cal-up .cal-month-diff { color: #16a34a; }
.cal-month.cal-down .cal-month-diff { color: #dc2626; }
[data-bs-theme="dark"] .cal-month.cal-up .cal-month-diff { color: #22c55e; }
[data-bs-theme="dark"] .cal-month.cal-down .cal-month-diff { color: #ef4444; }
.cal-month-sub { font-size: 10px; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }

/* Tooltip */
.cal-tooltip {
  position: absolute; z-index: 1080; pointer-events: none;
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  border-radius: 8px; padding: 8px 10px; min-width: 150px; font-size: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.cal-tooltip .cal-tip-date { font-weight: 700; margin-bottom: 4px; }
.cal-tooltip > div { display: flex; justify-content: space-between; gap: 16px; }
.cal-tooltip > div span { color: var(--bs-secondary-color); }
.cal-tooltip .cal-tip-diff { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--bs-border-color); }

/* ===== Portföljens heatmap (treemap) =================================================
   Färgskalans ytterlägen bor här, inte i JS: paletten ska kunna ändras per tema på ett
   ställe. portfolio-heatmap.js läser dem och interpolerar mot mittläget. */
.hm-box { position: relative; }
.hm-wrap {
  --hm-flat: #cbd5e1;
  --hm-up: #178a44;
  --hm-down: #bf2626;
  position: relative;
  width: 100%;
  height: clamp(340px, 62vh, 620px);
}
[data-bs-theme="dark"] .hm-wrap {
  --hm-flat: #39424f;
  --hm-up: #2aa054;
  --hm-down: #bf3b3d;
}

/* Rutorna positioneras i pixlar av layouten; gapet är marginalen mellan dem. */
.hm-tile {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden; text-decoration: none; line-height: 1.1;
  border-radius: 2px;
  transition: filter .12s ease-in-out;
}
.hm-tile:hover { filter: brightness(1.12); z-index: 2; }
.hm-tile:focus-visible { outline: 2px solid var(--bs-body-color); outline-offset: -2px; z-index: 2; }
.hm-ticker { font-weight: 700; letter-spacing: -.01em; color: inherit; }
.hm-pct { font-variant-numeric: tabular-nums; color: inherit; opacity: .92; }

/* Legend: samma gradient som skalan, med periodens ytterlägen som etiketter. */
.hm-legend { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--bs-secondary-color); }
.hm-legend-scale {
  display: inline-block; width: 120px; height: 10px; border-radius: 2px;
  border: 1px solid var(--bs-border-color);
}
.hm-legend-min, .hm-legend-max { font-variant-numeric: tabular-nums; }

.hm-tooltip {
  position: absolute; z-index: 1080; pointer-events: none;
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  border-radius: 8px; padding: 8px 10px; min-width: 170px; font-size: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.hm-tip-head { font-weight: 700; }
.hm-tip-sub { color: var(--bs-secondary-color); margin-bottom: 4px; }
.hm-tip-row { display: flex; justify-content: space-between; gap: 16px; }
.hm-tip-row > span:first-child { color: var(--bs-secondary-color); }
.hm-tip-row > span:last-child { font-variant-numeric: tabular-nums; }

/* ===== Andel över MA200: landchips (dagens siffra + landväljare för grafen) ===== */
.ma200-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ma200-chip {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--bs-border-color); border-radius: 999px;
  background: transparent; color: inherit;
  padding: 4px 12px 4px 8px; font-size: 13px; line-height: 1.2;
}
.ma200-chip:hover { border-color: var(--bs-secondary-color); }
.ma200-chip.is-on { border-color: var(--bs-body-color); }
/* Färgpunkten fylls av grafen med landets linjefärg när landet är valt. */
.ma200-swatch {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid var(--bs-border-color); background: transparent;
}
.ma200-name { white-space: nowrap; }
.ma200-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.ma200-sub { color: var(--bs-secondary-color); font-size: 11px; font-variant-numeric: tabular-nums; }
/* Land utan lagrad historik: siffran gäller, men det går inte att rita någon linje. */
.ma200-chip-nohistory { cursor: default; opacity: .75; }
.ma200-chip-nohistory .ma200-swatch { display: none; }

/* ===== AI-chatten ====================================================================
   Konversationsvy: användarens bubblor till höger, modellens till vänster i full bredd.
   Höjden låses mot viewporten så inmatningsraden alltid står still och bara historiken
   rullar — som i en meddelandeapp, inte som en sida som växer nedåt. */
.ai-chat {
  display: flex; flex-direction: column;
  max-width: 860px; margin: 0 auto;
  height: calc(100dvh - 215px); min-height: 420px;
}
.ai-chat-scroll { flex: 1 1 auto; overflow-y: auto; }
.ai-chat-messages { display: flex; flex-direction: column; gap: 12px; }

.ai-msg { display: flex; }
.ai-msg.user { justify-content: flex-end; }
.ai-msg.assistant { flex-direction: column; align-items: stretch; }
.ai-bubble {
  border-radius: 14px; padding: 8px 12px;
  font-size: 14px; line-height: 1.45; overflow-wrap: break-word;
}
.ai-msg.user .ai-bubble {
  background: var(--bs-primary-bg-subtle);
  max-width: 85%; white-space: pre-wrap;
}
.ai-msg.assistant .ai-bubble { background: var(--bs-tertiary-bg); }

/* Markdown-innehållet i modellens bubblor */
.ai-bubble p { margin: 0 0 8px; }
.ai-bubble p:last-child { margin-bottom: 0; }
.ai-bubble ul, .ai-bubble ol { margin: 0 0 8px; padding-left: 20px; }
.ai-bubble li { margin-bottom: 2px; }
.ai-bubble code {
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  border-radius: 4px; padding: 0 4px; font-size: 12.5px;
}
.ai-bubble pre {
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  border-radius: 8px; padding: 8px 10px; margin: 0 0 8px;
  font-size: 12.5px; overflow-x: auto;
}
.ai-bubble pre code { background: none; border: none; padding: 0; }
.ai-md-h { font-weight: 700; margin: 6px 0 2px; }
.ai-md-table { overflow-x: auto; }
.ai-md-table table { width: auto; margin: 0 0 8px; font-size: 13px; }

/* Statusraden medan modellen tänker eller ett verktyg kör */
.ai-status {
  display: flex; align-items: center; gap: 7px;
  margin: 6px 4px 0; font-size: 12px; color: var(--bs-secondary-color);
}
.ai-status::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--bs-secondary-color);
  animation: ai-pulse 1.1s ease-in-out infinite;
}
@keyframes ai-pulse {
  0%, 100% { opacity: .25; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-status::before { animation: none; }
}

.ai-error { margin-top: 6px; font-size: 13px; color: var(--bs-danger); }

.ai-chat-inputrow { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; }
.ai-chat-inputrow textarea { resize: none; }

/* Förslagen i den tomma vyn — samma chipspråk som landväljaren på marknadsklimatet. */
.ai-chat-suggestions { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-suggestion {
  border: 1px solid var(--bs-border-color); border-radius: 999px;
  background: transparent; color: inherit;
  padding: 5px 12px; font-size: 13px; line-height: 1.2; text-align: left;
}
.ai-suggestion:hover { border-color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); }