/* ============================================================================
   HunnaCRM designsystem
   ----------------------------------------------------------------------------
   Ett tema-lager ovanpå Bootstrap 5.3 (CSS-variabler – ingen Sass-omkompilering).
   Alla sidor ärver designen via befintliga Bootstrap-klasser; nya sidor behöver
   bara följa markupmönstren i CLAUDE.md ("Design & UI") så håller de stilen.

   Tokens (ändra HÄR, inte i komponenterna):
   ============================================================================ */
:root {
  /* Färger */
  --hunna-navy: #0f1e33;          /* navbar, mörka ytor */
  --hunna-navy-2: #1c2b42;        /* tabellhuvuden (table-dark) */
  --hunna-primary: #2563eb;       /* primär åtgärdsfärg */
  --hunna-primary-hover: #1d4fc4;
  --hunna-primary-tint: #e8effc;  /* markerad rad, hover i menyer */
  --hunna-bg: #f4f6fa;            /* sidbakgrund */
  --hunna-surface: #ffffff;       /* kort/ytor */
  --hunna-border: #e3e8f0;
  --hunna-text: #1c2430;
  --hunna-muted: #64748b;
  /* Tintade statusfärger (badge/chips): bakgrund + text */
  --hunna-success-bg: #dcf3e4;  --hunna-success-fg: #15803d;
  --hunna-warning-bg: #fdf1d8;  --hunna-warning-fg: #92600a;
  --hunna-danger-bg:  #fde4e4;  --hunna-danger-fg:  #b91c1c;
  --hunna-info-bg:    #dff1fb;  --hunna-info-fg:    #0369a1;
  --hunna-neutral-bg: #eef1f5;  --hunna-neutral-fg: #475569;
  /* Dashboardgruppernas kortbakgrunder: mycket diskreta, ljusa pasteller (en per grupp) */
  --hunna-dash-forsaljning: #f3f7fd;  /* ljusblå */
  --hunna-dash-support:     #fdf6f2;  /* ljus aprikos */
  --hunna-dash-leverans:    #f8f5fc;  /* ljus lila */
  --hunna-dash-inkop:       #f3faf5;  /* ljusgrön */
  --hunna-dash-ovrigt:      #f4f6f8;  /* ljusgrå */
  /* Form & effekter */
  --hunna-radius: .625rem;        /* kort */
  --hunna-radius-sm: .45rem;      /* knappar, fält */
  --hunna-shadow: 0 1px 2px rgba(15, 30, 51, .05), 0 1px 3px rgba(15, 30, 51, .06);
  --hunna-focus-ring: 0 0 0 .25rem rgba(37, 99, 235, .22);
  /* Bootstrap-globaler */
  --bs-body-bg: var(--hunna-bg);
  --bs-body-color: var(--hunna-text);
  --bs-link-color: var(--hunna-primary);
  --bs-link-hover-color: var(--hunna-primary-hover);
  --bs-link-color-rgb: 37, 99, 235;
  --bs-link-hover-color-rgb: 29, 79, 196;
}

html { font-size: 14px; }
@media (min-width: 768px) { html { font-size: 16px; } }
html { position: relative; min-height: 100%; }
body { margin-bottom: 60px; background-color: var(--hunna-bg); }

/* Rubriker: sidtitlar (h2) något nedtonade i storlek, tydliga i vikt. */
h2 { font-size: 1.45rem; font-weight: 650; color: var(--hunna-navy); letter-spacing: -.01em; }
h3 { font-size: 1.2rem; font-weight: 600; color: var(--hunna-navy); }

/* Länkar: färgade men utan understrykning (knappar/menyer påverkas inte). */
a, a:hover, a:focus { text-decoration: none; }

/* --- Navbar ------------------------------------------------------------- */
.navbar.bg-dark {
  background-color: var(--hunna-navy) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 2px 10px rgba(15, 30, 51, .25);
}
.navbar-brand { letter-spacing: -.02em; }
.navbar-brand::before {
  content: "";
  display: inline-block;
  width: .55em; height: .55em;
  margin-right: .45em;
  border-radius: .18em;
  background: linear-gradient(135deg, var(--hunna-primary), #60a5fa);
  vertical-align: baseline;
}
.navbar .nav-link { font-weight: 500; }

/* --- Dropdown-menyer ------------------------------------------------------ */
.dropdown-menu {
  --bs-dropdown-border-color: var(--hunna-border);
  --bs-dropdown-border-radius: var(--hunna-radius-sm);
  --bs-dropdown-link-hover-bg: var(--hunna-primary-tint);
  --bs-dropdown-link-active-bg: var(--hunna-primary);
  box-shadow: 0 8px 24px rgba(15, 30, 51, .12);
  padding: .375rem;
}
.dropdown-menu .dropdown-item { border-radius: .35rem; padding: .4rem .65rem; }

/* --- Kort ----------------------------------------------------------------- */
.card {
  --bs-card-border-color: var(--hunna-border);
  --bs-card-border-radius: var(--hunna-radius);
  --bs-card-cap-bg: #fbfcfe;
  box-shadow: var(--hunna-shadow);
}
.card-header { font-weight: 600; border-bottom-color: var(--hunna-border); }
/* Listkort (card-body p-0 table-responsive): runda hörnen snyggt runt tabellen. */
.card > .card-body.p-0.table-responsive:first-child {
  border-top-left-radius: calc(var(--hunna-radius) - 1px);
  border-top-right-radius: calc(var(--hunna-radius) - 1px);
}
.card > .card-body.p-0.table-responsive:last-child {
  border-bottom-left-radius: calc(var(--hunna-radius) - 1px);
  border-bottom-right-radius: calc(var(--hunna-radius) - 1px);
}

/* --- Tabeller -------------------------------------------------------------- */
/* Kolumnrubriker: små versaler för lugn, konsekvent listlook (gäller alla listor). */
.table thead th {
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}
/* Mörka tabellhuvuden: marinblått i stället för svart. */
.table-dark {
  --bs-table-bg: var(--hunna-navy-2);
  --bs-table-color: #dbe4f0;
  --bs-table-border-color: #2a3b55;
}
/* Ljusa tabellhuvuden (inre tabeller). */
.table-light {
  --bs-table-bg: #f1f4f9;
  --bs-table-color: var(--hunna-muted);
}
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #f2f6fc; }
.table > :not(caption) > * > * { border-bottom-color: #edf1f7; }

/* --- Badges: tintade chips -------------------------------------------------
   Solida bg-* görs om till ljus bakgrund + mörk text (lugnare i täta listor).
   Badges med inline-färg (t.ex. affärssteg, kundstatus) har ingen bg-klass och
   påverkas INTE. !important krävs för att slå Bootstraps egna !important. */
.badge { font-weight: 600; letter-spacing: .01em; border-radius: .4rem; }
.badge.bg-success   { background-color: var(--hunna-success-bg) !important; color: var(--hunna-success-fg) !important; }
.badge.bg-warning   { background-color: var(--hunna-warning-bg) !important; color: var(--hunna-warning-fg) !important; }
.badge.bg-danger    { background-color: var(--hunna-danger-bg)  !important; color: var(--hunna-danger-fg)  !important; }
.badge.bg-info      { background-color: var(--hunna-info-bg)    !important; color: var(--hunna-info-fg)    !important; }
.badge.bg-secondary { background-color: var(--hunna-neutral-bg) !important; color: var(--hunna-neutral-fg) !important; }
.badge.bg-primary   { background-color: var(--hunna-primary-tint) !important; color: var(--hunna-primary-hover) !important; }
/* bg-dark-badges ("System"/"Administratör") hålls solida men i temats marinblå. */
.badge.bg-dark { background-color: var(--hunna-navy-2) !important; color: #dbe4f0 !important; }
/* Undantag: badges på mörk botten (navbar) behöver mer mättnad för kontrast. */
.navbar .badge.bg-danger { background-color: #ef4444 !important; color: #fff !important; }

/* --- Knappar --------------------------------------------------------------- */
.btn { --bs-btn-border-radius: var(--hunna-radius-sm); font-weight: 500; }
.btn-primary {
  --bs-btn-bg: var(--hunna-primary);
  --bs-btn-border-color: var(--hunna-primary);
  --bs-btn-hover-bg: var(--hunna-primary-hover);
  --bs-btn-hover-border-color: var(--hunna-primary-hover);
  --bs-btn-active-bg: var(--hunna-primary-hover);
  --bs-btn-active-border-color: var(--hunna-primary-hover);
  --bs-btn-disabled-bg: #93b4f2;
  --bs-btn-disabled-border-color: #93b4f2;
}
.btn-outline-primary {
  --bs-btn-color: var(--hunna-primary);
  --bs-btn-border-color: #b9cdf5;
  --bs-btn-hover-bg: var(--hunna-primary);
  --bs-btn-hover-border-color: var(--hunna-primary);
  --bs-btn-active-bg: var(--hunna-primary);
  --bs-btn-active-border-color: var(--hunna-primary);
}
.btn-outline-secondary { --bs-btn-border-color: #cbd5e1; }
.btn-outline-danger { --bs-btn-border-color: #f3b4b4; }
.btn-outline-success { --bs-btn-border-color: #a7d9b9; }

/* Fokusring: enhetlig, i primärfärg. */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-select:focus, .form-check-input:focus {
  box-shadow: var(--hunna-focus-ring);
}

/* --- Formulär --------------------------------------------------------------- */
.form-control, .form-select {
  border-color: #d4dbe6;
  border-radius: var(--hunna-radius-sm);
}
.form-control:focus, .form-select:focus { border-color: #93b4f2; }
.form-label { font-weight: 500; }
.form-check-input:checked { background-color: var(--hunna-primary); border-color: var(--hunna-primary); }
.input-group-text { border-color: #d4dbe6; background-color: #f1f4f9; }

/* --- Flikar: understrykningsstil ------------------------------------------ */
.nav-tabs {
  --bs-nav-tabs-border-width: 0;
  border-bottom: 1px solid var(--hunna-border);
}
.nav-tabs .nav-link {
  color: var(--hunna-muted);
  font-weight: 500;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  padding: .55rem .9rem;
}
.nav-tabs .nav-link:hover { color: var(--hunna-text); border-bottom-color: #c4d3ee; }
.nav-tabs .nav-link.active {
  color: var(--hunna-primary);
  background: transparent;
  border-bottom: 2px solid var(--hunna-primary);
}

/* --- Alerts: tintade med accentkant ---------------------------------------- */
.alert { border: 0; border-left: 4px solid transparent; border-radius: var(--hunna-radius-sm); }
.alert-success { background-color: var(--hunna-success-bg); color: var(--hunna-success-fg); border-left-color: #22c55e; }
.alert-warning { background-color: var(--hunna-warning-bg); color: var(--hunna-warning-fg); border-left-color: #f59e0b; }
.alert-danger  { background-color: var(--hunna-danger-bg);  color: var(--hunna-danger-fg);  border-left-color: #ef4444; }
.alert-info    { background-color: var(--hunna-info-bg);    color: var(--hunna-info-fg);    border-left-color: #38bdf8; }

/* --- Paginering ------------------------------------------------------------- */
.pagination {
  --bs-pagination-active-bg: var(--hunna-primary);
  --bs-pagination-active-border-color: var(--hunna-primary);
  --bs-pagination-color: var(--hunna-primary);
  --bs-pagination-hover-color: var(--hunna-primary-hover);
  --bs-pagination-border-color: var(--hunna-border);
  --bs-pagination-border-radius: var(--hunna-radius-sm);
}

/* --- Modaler ---------------------------------------------------------------- */
.modal-content { border: 0; border-radius: var(--hunna-radius); box-shadow: 0 20px 60px rgba(15, 30, 51, .25); }
.modal-header { border-bottom-color: var(--hunna-border); }
.modal-footer { border-top-color: var(--hunna-border); }

/* --- Footer ------------------------------------------------------------------ */
footer.border-top { border-color: var(--hunna-border) !important; background: transparent; }

/* --- Dashboard ---------------------------------------------------------------
   Statistikkort: tintad ikonbubbla, stort värde, hela kortet klickbart (stretched-link)
   med diskret hover-lyft. Dölj-krysset tonas fram vid hover. Paneler (notiser/uppgifter)
   får accentkant i stället för solida färgblock. */
.dash-kort { transition: transform .12s ease, box-shadow .12s ease; }
.dash-kort:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15, 30, 51, .10); }
.dash-ikon {
  width: 3rem; height: 3rem;
  border-radius: .9rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.45rem;
  flex-shrink: 0;
  margin-right: 1.4rem; /* lämnar plats för dölj-krysset i hörnet – ingen överlappning */
  /* Harmoniserade ikoner: gråskala + dämpad, i en halvgenomskinlig vit bubbla –
     ikonerna ska inte lysa; gruppfärgen bärs av kortbakgrunden. */
  background: rgba(255, 255, 255, .65);
  filter: grayscale(1);
  opacity: .6;
}
/* --- Förhandsbild vid hovring (t.ex. artikellistans bildkolumn) --------------
   Fixed position (via site.js) så den inte klipps av tabellens scrollyta. */
.bild-forhandsvisning { cursor: zoom-in; }
.forhandsvisning-yta {
  display: none; position: fixed; z-index: 1080;
  background: var(--hunna-surface); border: 1px solid var(--hunna-border);
  border-radius: var(--hunna-radius); box-shadow: 0 8px 24px rgba(15, 30, 51, .18);
  padding: .4rem;
}
.forhandsvisning-yta.visas { display: block; }
.forhandsvisning-yta img { max-width: 260px; max-height: 260px; display: block; }

/* Kortbakgrund per dashboardgrupp – samma diskreta pastell för alla kort i gruppen. */
.dash-grupp-forsaljning { background: var(--hunna-dash-forsaljning); }
.dash-grupp-support     { background: var(--hunna-dash-support); }
.dash-grupp-leverans    { background: var(--hunna-dash-leverans); }
.dash-grupp-inkop       { background: var(--hunna-dash-inkop); }
.dash-grupp-ovrigt      { background: var(--hunna-dash-ovrigt); }
.dash-varde { font-size: 2.1rem; font-weight: 700; line-height: 1.15; color: var(--hunna-navy); letter-spacing: -.02em; }
.dash-lank { font-weight: 600; font-size: .85rem; }
/* Kort som kräver uppmärksamhet (Uppmarksamma på kortdatat) pulserar med en tydlig
   rödorange ring. Vid reducerad rörelse visas ringen statiskt i stället. */
.dash-kort.dash-pulserar { animation: dash-puls 2.2s ease-in-out infinite; }
@keyframes dash-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
  50%      { box-shadow: 0 0 0 8px rgba(220, 53, 69, .55); }
}
@media (prefers-reduced-motion: reduce) {
  .dash-kort.dash-pulserar { animation: none; box-shadow: 0 0 0 4px rgba(220, 53, 69, .55); }
}

/* Drag-and-drop på dashboarden: handtag på kort och grupprubriker, drop-markering
   på kortytor. "Dra kort hit"-texten syns bara i tomma grupper. */
.dash-handtag { cursor: grab; color: #94a3b8; opacity: .35; z-index: 2; user-select: none; transition: opacity .12s ease; }
.dash-kort:hover .dash-handtag, .dash-grupprubrik:hover .dash-handtag { opacity: 1; }
.dash-gruppknapp { opacity: .3; transition: opacity .12s ease; text-decoration: none; }
.dash-gruppknapp button { text-decoration: none; }
.dash-grupprubrik:hover .dash-gruppknapp { opacity: 1; }
.dash-drar { opacity: .45; }
.dash-kortyta.dash-drop { outline: 2px dashed var(--hunna-primary); outline-offset: 4px; border-radius: .5rem; }
.dash-kortyta:has(.dash-kortcol) .dash-tomtext { display: none; }
/* Hopfällbar kortheader (panel-toggle på card-header + Bootstrap collapse): pilen
   roterar när panelen öppnas. Generellt mönster för sällan använda paneler. */
.panel-toggle { user-select: none; }
.panel-toggle .panel-pil { display: inline-block; transition: transform .15s ease; }
.panel-toggle:not(.collapsed) .panel-pil { transform: rotate(90deg); }

/* Blink-lampan på kortet: diskret – släckt är gråskalad och nästan osynlig tills man
   hovrar över kortet; tänd anas svagt även utan hovring. */
.dash-puls-knapp { opacity: 0; transition: opacity .12s ease; z-index: 2; filter: grayscale(1); }
.dash-puls-knapp.dash-puls-pa { opacity: .45; filter: none; }
.dash-kort:hover .dash-puls-knapp { opacity: 1; }
.dash-puls-knapp button { text-decoration: none; }
.dash-dolj { opacity: .3; transition: opacity .12s ease; z-index: 2; }
.dash-dolj button { text-decoration: none; }
.dash-kort:hover .dash-dolj { opacity: 1; }
/* --- Accentpaneler (systemgemensamt mönster) ---------------------------------
   Ett kort som ska sticka ut (uppmaning/varning/info) får en 4px accentkant i
   stället för solida färgblock i headern. Används på dashboard, granskningssidor m.fl. */
.accent-primar { border-left: 4px solid var(--hunna-primary); }
.accent-lyckad { border-left: 4px solid #22c55e; }
.accent-varning { border-left: 4px solid #f59e0b; }
.accent-fara { border-left: 4px solid #ef4444; }
.accent-info { border-left: 4px solid #38bdf8; }

/* --- Delordrar i orderlistan (nästlade, expanderbara rader) ------------------ */
.delorder-toggle {
  transition: transform .15s ease;
  text-decoration: none;
  color: var(--hunna-muted);
  font-size: .95rem;
  line-height: 1;
  vertical-align: baseline;
}
.delorder-toggle[aria-expanded="true"] { transform: rotate(90deg); }
/* Expander-pilen hänger i cellens vänsterpadding så att ordernumret ligger strikt
   vänsterjusterat med raderna utan pil (pilen behöver inte vara justerad). */
td.delorder-toggle-cell { position: relative; }
td.delorder-toggle-cell .delorder-toggle {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
}
td.delorder-toggle-cell .delorder-toggle[aria-expanded="true"] { transform: translateY(-50%) rotate(90deg); }
tr.delorder-rad > td { background-color: #f7f9fd; }

/* --- Strukturträd (produktionsplanering) ------------------------------------ */
/* Godtyckligt djup: varje nivå indenteras med en guidelinje; hela trädet får
   sidledsscroll internt på små skärmar i stället för att spränga sidbredden. */
.bom-trad { overflow-x: auto; }
.bom-trad .bom-nod { margin-bottom: .5rem; min-width: 340px; }
.bom-trad .bom-barn {
  margin-left: 1.6rem;
  padding-left: .9rem;
  border-left: 2px solid #dbe3ee;
  margin-top: .5rem;
}
.bom-trad summary.bom-kort { cursor: pointer; list-style: none; }
.bom-trad summary.bom-kort::-webkit-details-marker { display: none; }
.bom-trad details > summary .bom-nod-rad::before {
  content: "▾";
  color: var(--hunna-muted);
  margin-right: .1rem;
}
.bom-trad details:not([open]) > summary .bom-nod-rad::before { content: "▸"; }
.bom-kort { margin-bottom: 0; }

/* Whiteboard-diagrammet (grafisk SVG-vy av strukturträdet): köpta komponenter = cirklar
   (grön = enkel, röd = kritisk), sammansättningar = blå rektanglar, roller = gula.
   Diagrammet scrollar internt i båda led på små skärmar. */
.bom-graf { overflow: auto; }
.bom-svg-kant { stroke: #b9c6d8; stroke-width: 1.6; fill: none; }
.bom-svg-kant.alternativ { stroke-dasharray: 5 4; }
.bom-svg-antal { font-size: 11px; fill: var(--hunna-muted); }
.bom-svg-etikett { font-size: 12px; fill: #1f2a3d; }
.bom-svg-etikett.fet { font-weight: 600; }
.bom-svg-under { font-size: 10.5px; fill: var(--hunna-muted); }
.bom-svg-saldo { font-size: 10.5px; fill: #33507a; font-weight: 600; }
/* Paket: ram runt närstående komponenter (t.ex. tillbehörspaket) med samlad koppling. */
.bom-svg-ram { fill: rgba(100, 116, 139, .05); stroke: #94a3b8; stroke-width: 1.6; stroke-dasharray: 7 5; }
.bom-svg-paketbox:hover { fill: rgba(100, 116, 139, .12); }
.bom-paket { border: 1.6px dashed #94a3b8; border-radius: var(--hunna-radie, .5rem); background: rgba(100, 116, 139, .04); }
.bom-svg-rot { fill: #e7f1fb; stroke: #38bdf8; stroke-width: 2.5; }
.bom-svg-sammansattning { fill: #e7f1fb; stroke: #38bdf8; stroke-width: 1.8; }
.bom-svg-roll { fill: #fdf3e0; stroke: #f59e0b; stroke-width: 1.8; }
.bom-svg-kopt { fill: #e5f7ec; stroke: #22c55e; stroke-width: 1.8; }
.bom-svg-kritisk { fill: #fdeaea; stroke: #ef4444; stroke-width: 1.8; }
.bom-graf svg a:hover .bom-svg-etikett { text-decoration: underline; }

/* --- Tidslinjen (produktionsplanering etapp 3) ------------------------------- */
.tl-manadslinje { stroke: #e6ebf3; stroke-width: 1; }
.tl-manad { font-size: 11px; fill: var(--hunna-muted); font-weight: 600; }
.tl-idag { stroke: #2563eb; stroke-width: 1.6; stroke-dasharray: 4 3; }
.tl-idag-text { font-size: 10.5px; fill: #2563eb; font-weight: 600; }
.tl-sektion { font-size: 11px; fill: var(--hunna-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.tl-etikett { font-size: 11.5px; fill: #1f2a3d; font-weight: 600; }
.tl-under { font-size: 10.5px; fill: var(--hunna-muted); }
.tl-ao { fill: #e7f1fb; stroke: #38bdf8; stroke-width: 1.6; }
.tl-ao.tl-levererad { fill: #22c55e; stroke: #15803d; }
.tl-ao.tl-dragbar { cursor: grab; }
.tl-ao.tl-drar { cursor: grabbing; opacity: .7; stroke-dasharray: 5 3; }
.tl-io { fill: #e5f7ec; stroke: #22c55e; stroke-width: 1.4; }
.tl-order { fill: #e8ecf6; stroke: #1c2b45; stroke-width: 1.6; }
.tl-order.tl-allokerad { fill: #22c55e; stroke: #15803d; }
.tl-fonster { stroke-width: 3; opacity: .55; }
.tl-fonster.tl-gul { stroke: #f59e0b; }
.tl-fonster.tl-rod { stroke: #ef4444; }
.tl-punkt.tl-gul { fill: #fdf3e0; stroke: #f59e0b; stroke-width: 1.6; }
.tl-punkt.tl-rod { fill: #fdeaea; stroke: #ef4444; stroke-width: 1.6; }
.tl-brist { fill: none; stroke-width: 2.2; }
.tl-brist.tl-gul { stroke: #f59e0b; }
.tl-brist.tl-rod { stroke: #ef4444; }
/* --- Supportärendets komposer ------------------------------------------------ */
/* Flyter fastnålad i botten av skärmen (Zendesk-stil) medan konversationen scrollas.
   Sticky i stället för fixed: tar sin plats i flödet, kräver ingen JS och krockar
   aldrig med sidopanelen. */
.support-komposer {
  position: sticky;
  bottom: .75rem;
  z-index: 100;
  background: var(--hunna-surface);
  border: 1px solid var(--hunna-border);
  border-radius: var(--hunna-radius);
  box-shadow: 0 -4px 16px rgba(15, 30, 51, .12), var(--hunna-shadow);
  padding: .75rem;
  margin-top: 1rem;
  transition: background-color .15s ease;
}
/* Komposern speglar vald kommentartyp (samma färgspråk som konversationen;
   arbetslogg delar interngult – båda är interna). */
.support-komposer.komposer-publik { background: var(--hunna-success-bg); }
.support-komposer.komposer-intern { background: var(--hunna-warning-bg); }

/* Konversationens kommentartyper: tydlig färgkodning av vem som sagt vad */
.support-komm { border: 1px solid var(--hunna-border); border-left-width: 4px; border-radius: var(--hunna-radius-sm); padding: .5rem .75rem; margin-bottom: .5rem; }
.support-komm-kund { background: var(--hunna-info-bg); border-left-color: var(--hunna-info-fg); }        /* kundens svar */
.support-komm-publik { background: var(--hunna-success-bg); border-left-color: var(--hunna-success-fg); } /* vårt publika svar */
.support-komm-intern { background: var(--hunna-warning-bg); border-left-color: var(--hunna-warning-fg); } /* intern notering */
.support-komm-arbetslogg { background: var(--hunna-neutral-bg); border-left-color: var(--hunna-neutral-fg); }
/* Bilder i ärendekonversationen: inline (på cid-referensens plats) respektive miniatyr under texten. */
.support-komm-bild { display: block; max-width: min(100%, 420px); height: auto; border: 1px solid var(--hunna-border); border-radius: var(--hunna-radius-sm); margin: .25rem 0; }
.support-komm-bild-mini { max-height: 140px; max-width: min(100%, 220px); height: auto; border: 1px solid var(--hunna-border); border-radius: var(--hunna-radius-sm); }

/* Flytande "scrolla till botten"-knapp (visas när sidan inte är nedscrollad) */
.flyt-scrollknapp {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 9.5rem;
  z-index: 101;
  border-radius: 999px;
  background: var(--hunna-navy);
  color: #fff;
  border: none;
  padding: .4rem 1rem;
  font-size: .875rem;
  box-shadow: 0 4px 14px rgba(15, 30, 51, .3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.flyt-scrollknapp.synlig { opacity: .92; pointer-events: auto; }
.flyt-scrollknapp:hover { opacity: 1; color: #fff; }
/* Motsvarande "till toppen" – fastnålad under navbaren */
.flyt-scrollknapp-topp { bottom: auto; top: 4.5rem; }

/* Pil från en dedikerad arbetsorder upp till kundordern (◆) den byggs för */
.tl-dedik-pil { fill: none; stroke: #1c2b45; stroke-width: 1.4; stroke-dasharray: 6 4; opacity: .55; }
.tl-dedik-pil:hover { opacity: 1; }
.tl-dedik-spets { fill: #1c2b45; }

/* Saldokurvan (expanderad komponentrad i planeringen) */
.saldo-kurva-linje { fill: none; stroke: #38bdf8; stroke-width: 2; }
.saldo-kurva-linje.negativ { stroke: #ef4444; }
.saldo-kurva-noll { stroke: #94a3b8; stroke-width: 1; stroke-dasharray: 4 3; }
.saldo-kurva-brist { fill: rgba(239, 68, 68, .08); }
.saldo-kurva-text { font-size: 10px; fill: var(--hunna-muted); }

/* Förväntade förnyelser: stapeldiagrammet (inline-SVG, samma familj som saldokurvorna). */
.fornyelse-msa { fill: #1d4ed8; }
.fornyelse-licens { fill: #38bdf8; }
.fornyelse-forfallet { opacity: 0.55; }
.fornyelse-skalstreck { stroke: var(--hunna-border, #dee2e6); stroke-width: 1; stroke-dasharray: 3 3; }
.fornyelse-forklaring { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: -1px; }
.fornyelse-forklaring.fornyelse-msa { background: #1d4ed8; }
.fornyelse-forklaring.fornyelse-licens { background: #38bdf8; }

/* --- Autospar-indikator (autosave.js) --------------------------------------- */
#autosaveStatus {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1090;
  padding: .45rem .8rem;
  border-radius: 2rem;
  font-size: .85rem;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(15, 30, 51, .18);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}
#autosaveStatus.visas { opacity: 1; transform: translateY(0); }
#autosaveStatus.sparar { background: var(--hunna-neutral-bg); color: var(--hunna-neutral-fg); }
#autosaveStatus.ok     { background: var(--hunna-success-bg); color: var(--hunna-success-fg); }
#autosaveStatus.fel    { background: var(--hunna-danger-bg);  color: var(--hunna-danger-fg); }

/* ============================================================================
   Funktionella regler (oförändrad funktionalitet)
   ============================================================================ */

/* @-omnämnande-listan (mention.js) */
.mention-dd { z-index: 1080; max-height: 240px; overflow-y: auto; }
.mention-dd .list-group-item { cursor: pointer; }

/* Highlight-yta bakom kommentarsrutan: speglar texten och färgar @-omnämnanden blå. */
.mention-wrap { position: relative; }
.mention-backdrop {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden; pointer-events: none; z-index: 1;
}
.mention-highlights {
  width: 100%; color: #212529; white-space: pre-wrap;
  overflow-wrap: break-word; word-wrap: break-word; background: transparent;
}
textarea.mention-on {
  position: relative; z-index: 2; background: transparent;
  color: transparent; caret-color: #212529;
}
.mention-entity { color: var(--hunna-primary); font-weight: 600; }

.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;
}

/* Drag-and-drop: markerar släppmål (artikelgrupp-sektion) under pågående drag. */
tr.drop-mal td { background-color: var(--hunna-primary-tint) !important; }

/* Globalt sökfält i toppmenyn (globalsok.js): full bredd på egen rad på mobil.
   På desktop smalt (100px) och expanderar högerut ÖVER menyelementen vid fokus
   (fältet tar ingen extra plats i layouten – det lägger sig ovanpå).
   Klassen .oppen sätts av JS när träfflistan visas, så fältet inte kollapsar
   medan man klickar i den. */
.global-sok { position: relative; width: 100%; }
.global-sok .dropdown-menu {
  position: absolute; top: 100%; left: 0; right: 0;
  max-height: 60vh; overflow-y: auto; z-index: 1090;
}
.global-sok .dropdown-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 992px) {
  .global-sok { width: 100px; }
  .global-sok input { width: 100%; transition: width .15s ease; }
  .global-sok:focus-within input,
  .global-sok.oppen input { width: 420px; position: relative; z-index: 1091; }
  .global-sok .dropdown-menu { width: 420px; right: auto; }
}

/* Transportörsmärken i försändelselistan – egna mini-logotyper (inte officiella).
   Undantaget från tokenregeln: märkena bygger på transportörernas kännefärger. */
.frakt-logo {
  display: inline-block; font-weight: 700; font-size: .65rem; line-height: 1;
  padding: 3px 5px; border-radius: 4px; vertical-align: middle; letter-spacing: .2px;
}
.frakt-postnord { background: #00a1de; color: #fff; }
.frakt-fedex { background: #4d148c; color: #fff; }
.frakt-fedex .fx { color: #ff9e16; }

/* Toppmenyn: aldrig radbrytning i menyelement. */
.navbar .nav-link, .navbar .dropdown-item, .navbar .btn,
.navbar .navbar-brand, .navbar a { white-space: nowrap; }

/* Kunskapsartiklar: bilder skalas ned automatiskt, klick zoomar (kbbilder.js). */
.kb-innehall img {
  max-width: 100%; height: auto; max-height: 22rem; width: auto;
  display: block; margin: .5rem 0;
  border-radius: var(--hunna-radius-sm); cursor: zoom-in;
}
.kb-bildzoom {
  position: fixed; inset: 0; z-index: 1090;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .75); padding: 2rem; cursor: zoom-out;
}
.kb-bildzoom img { max-width: 100%; max-height: 100%; width: auto; height: auto; }

/* --- Mobilanpassning ---------------------------------------------------- */
.table-responsive { -webkit-overflow-scrolling: touch; }
@media (max-width: 575.98px) {
  .btn-sm, .page-link { padding-top: 0.4rem; padding-bottom: 0.4rem; }
  .table td .btn { white-space: nowrap; }
}

/* --- Undermenyer i navbar-dropdowns ------------------------------------- */
.dropdown-submenu { position: relative; }
.dropdown-submenu > .dropdown-toggle::after {
  border-top: 0.3em solid transparent;
  border-bottom: 0.3em solid transparent;
  border-left: 0.3em solid;
  border-right: 0;
  margin-left: 0.4em;
  vertical-align: middle;
}
.dropdown-submenu > .dropdown-menu { margin-top: -0.4rem; }
@media (min-width: 992px) {
  .dropdown-submenu > .dropdown-menu { position: absolute; top: 0; left: 100%; }
}
@media (max-width: 991.98px) {
  .dropdown-submenu > .dropdown-menu {
    position: static; border: 0; box-shadow: none; padding-left: 1rem;
  }
  .dropdown-submenu > .dropdown-toggle::after {
    border-left: 0.3em solid transparent;
    border-right: 0.3em solid transparent;
    border-top: 0.3em solid;
    border-bottom: 0;
  }
}

/* Element med title-tooltip som enda detaljvisning (t.ex. prognosens antal-badgar). */
.tooltip-hjalp { cursor: help; }
/* Värde med förklarande title-tooltip vid hovring (t.ex. orderunderlaget på artikelsidan). */
.underlag-hint { cursor: help; text-decoration: underline dotted; text-underline-offset: 2px; }

/* Pajdiagrammets legend: klickbara kategorirader; släckta rader tonas och stryks. */
.paj-legend-rad { cursor: pointer; }
.paj-legend-rad.paj-av { opacity: .45; text-decoration: line-through; }

/* Linjediagrammets legend: klickbara poster; släckta linjer tonas i legenden. */
.linje-legend-post { cursor: pointer; }
.linje-legend-post.linje-av { opacity: .4; }

/* Kombidiagrammets legend: klickbara poster; släckta serier tonas i legenden. */
.kombi-legend-post { cursor: pointer; }
.kombi-legend-post.kombi-av { opacity: .4; }

/* Diagramruta: omsluter en diagram-SVG och ger kopieringsknappen (partialen
   _DiagramKopiera) sin plats uppe till höger. Knappen tonas fram vid hovring. */
.diagram-ruta { position: relative; display: inline-block; max-width: 100%; }
.diagram-kopiera {
    position: absolute; top: 0; right: 0; z-index: 2;
    border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-sm);
    background: var(--bs-body-bg); color: var(--bs-secondary-color);
    padding: .2rem .4rem; line-height: 1; opacity: .55; cursor: pointer;
}
.diagram-kopiera:hover { opacity: 1; color: var(--bs-body-color); }

/* Stapeldiagram (SVG): text följer temats brödtextfärg, stödlinjer temats kantfärg. */
.stapeldiagram text { fill: var(--bs-body-color); font-size: 12px; }
.stapeldiagram .stapel-summa { font-size: 11px; opacity: .75; }
.stapeldiagram .stapel-axel { font-size: 10px; opacity: .7; }
.stapeldiagram .stodlinje { stroke: var(--bs-border-color); stroke-width: 1; stroke-dasharray: 3 3; }
.stapeldiagram .baslinje { stroke: var(--bs-border-color); stroke-width: 1; }
.stapeldiagram .grupp-etikett { font-weight: 600; }
.stapeldiagram .etikett-helg { fill: var(--hunna-danger-fg); }

/* Prognossegment i statistikdiagram: randigt mönster på ljusare basfärg skiljer prognos
   (orderbok respektive förväntade förnyelser) från historiken. */
.prognos-orderbok-bas { fill: #60a5fa; }
.prognos-fornyelse-bas { fill: #c4b5fd; }
.prognos-rand { stroke: rgba(255, 255, 255, .55); stroke-width: 2; }

/* Försäljningskategori-palett för statistikdiagram (paj/stapel = fill, linje = stroke). */
:root {
    --fkat-0: #1d4ed8; --fkat-1: #38bdf8; --fkat-2: #10b981; --fkat-3: #f59e0b;
    --fkat-4: #8b5cf6; --fkat-5: #ef4444; --fkat-6: #14b8a6; --fkat-7: #94a3b8;
}
.fkat-farg-0 { fill: var(--fkat-0); }
.fkat-farg-1 { fill: var(--fkat-1); }
.fkat-farg-2 { fill: var(--fkat-2); }
.fkat-farg-3 { fill: var(--fkat-3); }
.fkat-farg-4 { fill: var(--fkat-4); }
.fkat-farg-5 { fill: var(--fkat-5); }
.fkat-farg-6 { fill: var(--fkat-6); }
.fkat-farg-7 { fill: var(--fkat-7); }
.fkat-linje-0 { stroke: var(--fkat-0); fill: none; stroke-width: 2.5; }
.fkat-linje-1 { stroke: var(--fkat-1); fill: none; stroke-width: 2.5; }
.fkat-linje-2 { stroke: var(--fkat-2); fill: none; stroke-width: 2.5; }
.fkat-linje-3 { stroke: var(--fkat-3); fill: none; stroke-width: 2.5; }
.fkat-linje-4 { stroke: var(--fkat-4); fill: none; stroke-width: 2.5; }
.fkat-linje-5 { stroke: var(--fkat-5); fill: none; stroke-width: 2.5; }
.fkat-linje-6 { stroke: var(--fkat-6); fill: none; stroke-width: 2.5; }
.fkat-linje-7 { stroke: var(--fkat-7); fill: none; stroke-width: 2.5; }
/* Prognosdelen av en linje ritas streckad (avvikande stil, som randning i staplar). */
.stapeldiagram .linje-prognos { stroke-dasharray: 6 5; }

/* Flerradiga listtooltips (Bootstrap): en post per rad, vaenster-justerat. */
.tooltip-lista .tooltip-inner {
  white-space: pre-line;
  text-align: left;
  max-width: 420px;
}

/* WYSIWYG (Quill) – nyhetsbrev/HTML-mall. */
.wysiwyg-editor.ql-container { background: #fff; }
.wysiwyg-editor.ql-container .ql-editor { min-height: 320px; color: #212529; cursor: text; }

/* ===========================================================================
   Portal-hjaelpcentral (kundportalens kunskapsdatabas)
   Egen ren markup/CSS som aaterskapar Zendesk-hjaelpcentralens utseende med
   Hunnas egen grafik (wwwroot/img/portal) och varumaerkesfaerg (espresso).
   =========================================================================== */
:root {
  --portal-brand: #3a2b26;        /* Hunna espresso (fraan logotypen) */
  --portal-brand-2: #2a1f1b;      /* moerkare (footer) */
  --portal-ink: #2b211d;          /* rubriktext */
  --portal-tint: #f2ece8;         /* ljus varm yta */
}

/* Re-branda HELA portalen till espresso: overlagra CRM:ets blaa tokens i portal-scopen.
   Alla portalsidor delar _PortalLayout (body.hc-portal), saa varje sida faar
   varumaerkesfaergen automatiskt (rubriker, knappar, laenkar, fokus, tabellhuvuden). */
.hc-portal {
  --hunna-primary: var(--portal-brand);
  --hunna-primary-hover: var(--portal-brand-2);
  --hunna-primary-tint: var(--portal-tint);
  --hunna-navy: var(--portal-ink);
  --hunna-navy-2: var(--portal-brand-2);
  --hunna-focus-ring: 0 0 0 .25rem rgba(58, 43, 38, .22);
  --bs-link-color: var(--portal-brand);
  --bs-link-hover-color: var(--portal-brand-2);
  --bs-link-color-rgb: 58, 43, 38;
}
/* Haardkodade blaa nyanser i bas-CSS:en -> varma motsvarigheter, bara i portalen. */
.hc-portal .form-control:focus,
.hc-portal .form-select:focus,
.hc-portal .form-check-input:focus { border-color: #c3b3a8; }
.hc-portal .form-check-input:checked { background-color: var(--portal-brand); border-color: var(--portal-brand); }
.hc-portal .btn-outline-primary { --bs-btn-border-color: #d3c4b9; }
.hc-portal .btn-primary { --bs-btn-disabled-bg: #a9968c; --bs-btn-disabled-border-color: #a9968c; }

/* Header (moerk varumaerkesbrun med vit logotyp) */
.hc-header { background: var(--portal-brand) !important; }
.hc-header .navbar-brand { padding-top: .2rem; padding-bottom: .2rem; }
.hc-header .navbar-brand img { height: 26px; width: auto; display: block; }
.hc-header .nav-link { color: rgba(255,255,255,.82); }
.hc-header .nav-link:hover, .hc-header .nav-link.active { color: #fff; }

/* Hero med kaefoto + rubrik + soek */
.hc-hero {
  position: relative;
  background: #eceae8 url('/img/portal/hero-light.jpg') center/cover no-repeat;
  border-radius: var(--hunna-radius);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.hc-hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.72));
}
.hc-hero__inner {
  position: relative;
  padding: clamp(2.5rem, 7vw, 4.75rem) 1rem;
  text-align: center;
}
.hc-hero__title {
  color: var(--portal-ink); font-weight: 700; letter-spacing: -.01em;
  font-size: clamp(1.6rem, 4vw, 2.4rem); margin-bottom: 1.25rem;
}
.hc-hero__search { max-width: 620px; margin: 0 auto; position: relative; }
.hc-hero__search .form-control {
  height: 3.25rem; border-radius: 999px; padding: 0 3.5rem 0 1.35rem;
  border-color: transparent; box-shadow: 0 12px 32px rgba(0,0,0,.14);
}
.hc-hero__search .form-control:focus { box-shadow: 0 12px 32px rgba(0,0,0,.18), var(--hunna-focus-ring); }
.hc-hero__search .hc-search-btn {
  position: absolute; top: 6px; right: 6px; bottom: 6px; width: 2.75rem;
  border: 0; border-radius: 999px; background: var(--portal-brand); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.hc-hero__spinner { position: absolute; top: 50%; right: 3.6rem; transform: translateY(-50%); }

/* Sektionsrubrik */
.hc-section-title { font-weight: 700; color: var(--portal-ink); margin: 1.5rem 0 1rem; font-size: 1.15rem; }

/* Kategorikort (2 kolumner, staplas paa telefon) */
.hc-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 575.98px) { .hc-cats { grid-template-columns: 1fr; } }
.hc-cat {
  display: flex; align-items: center; gap: .85rem;
  background: var(--hunna-surface); border: 1px solid var(--hunna-border);
  border-radius: var(--hunna-radius); padding: 1.05rem 1.25rem;
  text-decoration: none; color: var(--portal-ink); box-shadow: var(--hunna-shadow);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.hc-cat:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.10); border-color: var(--portal-brand); color: var(--portal-ink); }
.hc-cat__icon {
  flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--portal-tint); color: var(--portal-brand);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
}
.hc-cat__title { font-weight: 600; }
.hc-cat__count { margin-left: auto; color: var(--hunna-muted); font-weight: 500; font-size: .85rem; white-space: nowrap; }

/* Foerfattarrad paa en artikel: rund profilbild + namn + datum (som hjaelpcentralen) */
.hc-author { display: flex; align-items: center; gap: .6rem; }
.hc-author__bild,
.hc-author__initialer {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
  object-fit: cover; background: var(--portal-tint);
}
.hc-author__initialer {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--portal-brand); font-weight: 700; font-size: .85rem;
}
.hc-author__namn { font-weight: 600; color: var(--portal-ink); }
.hc-author__datum { color: var(--hunna-muted); font-size: .85rem; }
.hc-author__datum::before { content: "·"; margin-right: .6rem; }

/* Artikellista grupperad per kategori */
.hc-artikel-grupp + .hc-artikel-grupp { margin-top: 1.25rem; }
.hc-footer { background: var(--portal-brand-2); color: rgba(255,255,255,.75); }
.hc-footer a { color: #fff; text-decoration: none; }


/* ---------- Notistoast: diskret kort nere till höger vid ny notis ---------- */
#notisToastAnkare {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 1090;
  display: flex; flex-direction: column; gap: .5rem; align-items: flex-end;
  pointer-events: none; /* bara korten själva fångar klick */
}
.notis-toast {
  pointer-events: auto; cursor: pointer;
  max-width: 320px; padding: .6rem .85rem;
  background: var(--hunna-surface); border: 1px solid var(--hunna-border);
  border-left: 4px solid var(--hunna-primary);
  border-radius: var(--hunna-radius-sm);
  box-shadow: 0 4px 14px rgba(15, 30, 51, .16);
  opacity: 0; transform: translateY(.5rem);
  transition: opacity .25s ease, transform .25s ease;
}
.notis-toast-in { opacity: 1; transform: translateY(0); }
.notis-toast-ut { opacity: 0; transform: translateY(.5rem); }
.notis-toast-rubrik { font-weight: 600; font-size: .875rem; color: var(--hunna-text); }
.notis-toast-text { font-size: .8125rem; color: var(--hunna-muted); margin-top: .15rem; white-space: pre-wrap; }

/* ---------- Hårdvarutest: touchvy för testbordets 10 platser ---------- */
.hwtest-rad {
  display: grid; grid-template-columns: repeat(10, 1fr); gap: .75rem;
}
@media (max-width: 1400px) { .hwtest-rad { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 576px)  { .hwtest-rad { grid-template-columns: repeat(2, 1fr); } }
.hwtest-plats { display: flex; flex-direction: column; gap: .6rem; }
.hwtest-ruta {
  position: relative; aspect-ratio: 3 / 4;
  background: var(--hunna-surface); border: 3px solid var(--hunna-border);
  border-radius: var(--hunna-radius); box-shadow: var(--hunna-shadow);
  display: flex; align-items: center; justify-content: center;
  user-select: none; -webkit-user-select: none;
}
.hwtest-nr {
  position: absolute; top: .35rem; left: .6rem;
  font-weight: 700; font-size: 1.25rem; color: var(--hunna-muted);
}
.hwtest-symbol { font-size: clamp(2.2rem, 4.5vw, 4rem); line-height: 1; }
.hwtest-knappar { display: flex; gap: .5rem; }
.hwtest-knappar .btn {
  flex: 1; min-height: 64px; font-size: 1.9rem; line-height: 1;
  touch-action: manipulation; /* ingen dubbeltrycks-zoom på touchskärmen */
}
.hwtest-klar {
  width: 100%; min-height: 56px; font-size: 1.35rem; font-weight: 600;
  touch-action: manipulation;
}
.hwtest-raknare {
  text-align: center; font-size: 2rem; font-weight: 700; line-height: 1;
  color: var(--hunna-text); user-select: none; -webkit-user-select: none;
}
.hwtest-ruta[role="button"] { cursor: pointer; }
.hwtest-ruta[role="button"]:active { border-color: var(--hunna-primary); }
.hwtest-terminal { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; padding: 0 .3rem; }
.hwtest-serienr { font-size: clamp(1rem, 1.6vw, 1.5rem); font-weight: 700; word-break: break-all; }
.hwtest-typ { font-size: .85rem; color: var(--hunna-muted); }
.hwtest-terminalval {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; min-height: 68px; margin-bottom: .5rem; padding: .8rem 1.2rem;
  font-size: 1.35rem; text-align: left;
  background: var(--hunna-surface); border: 2px solid var(--hunna-border);
  border-radius: var(--hunna-radius-sm); touch-action: manipulation;
}
.hwtest-terminalval:active { border-color: var(--hunna-primary); background: var(--hunna-primary-tint); }
.hwtest-terminalval .badge { font-size: .95rem; }
.hwtest-alla {
  width: 100%; min-height: 64px; font-size: 1.5rem; font-weight: 600;
  touch-action: manipulation;
}
/* Tomt dashboardkort (platshållare): osynlig yta; handtag/kryss syns vid hovring. */
.dash-kort-tomt { min-height: 7rem; border-radius: var(--hunna-radius); border: 2px dashed transparent; }
.dash-kort-tomt .dash-handtag, .dash-kort-tomt .dash-dolj { opacity: 0; transition: opacity .15s ease; }
.dash-kort-tomt:hover { border-color: var(--hunna-border); }
.dash-kort-tomt:hover .dash-handtag, .dash-kort-tomt:hover .dash-dolj { opacity: 1; }