/* DELAD UR style-admin.css (KAN-388 CSS-1): rad 7814-8422, byte-exakt; Quill images, template footer, singleton mode, pre-paint, test icons, widget hover. Laddas direkt efter föregående del i index.html. */
/* =============================================================================
GLOBAL BILDHANTERING FÖR ALLA QUILL-EDITORS (v4.0)
Ersätter gamla centrerade block-regler. Möjliggör textflöde och justering.
============================================================================= */
.ql-editor img {
/* Gör bilden 'inline' så den kan ligga på samma rad som text */
display: inline-block !important; 

/* Rimliga gränser för editorn */
max-width: 100% !important;
max-height: 220px !important; 

/* Snygg presentation */
object-fit: contain !important;
margin: 4px 6px !important;
vertical-align: bottom !important;
border-radius: 6px !important;

/* Visuell indikation vid hover */
cursor: default !important;
transition: outline 0.1s ease;
}

/* Markera bilden med agentfärgen när man hovrar för att visa att den kan styras */
.ql-editor img:hover {
outline: 2px solid var(--accent-primary);
}

/* Fix för att Quills justeringsknappar (Vänster/Center/Höger) ska fungera på bilder */
.ql-editor .ql-video, 
.ql-editor img {
float: none;
}
/* ============================================================
MALL-FOOTER: ta bort boxen/fyrkanten runt save/delete-knappar.
Overridar style-modals.css (.config-save-btn har border+bg).
Scoped till footern så övriga config-save-btn-användningar
i admin-vyn inte påverkas.
============================================================ */
#view-templates .detail-footer-toolbar .config-save-btn,
#view-templates .detail-footer-toolbar #delete-template-btn {
background: transparent !important;
border: none !important;
box-shadow: none !important;
transition: color 0.18s ease, filter 0.18s ease !important;
}
/* Spara: grön glow vid hover */
#view-templates .detail-footer-toolbar .config-save-btn:hover {
background: transparent !important;
filter: drop-shadow(0 0 6px rgba(76,217,100,0.7)) !important;
}
/* Radera: röd glow vid hover */
#view-templates .detail-footer-toolbar #delete-template-btn {
color: rgba(255,69,58,0.55) !important;
}
#view-templates .detail-footer-toolbar #delete-template-btn:hover {
background: transparent !important;
color: #ff453a !important;
filter: drop-shadow(0 0 6px rgba(255,69,58,0.7)) !important;
}
#view-templates .detail-footer-toolbar #delete-template-btn svg {
fill: currentColor !important;
stroke: none !important;
}

/* Sidopanel-sök: mjukare tema-tonad look, tydligt ljusare än standardfilter.
   Ligger sent i cascade för att vinna över global filter-kontrast. */
#inbox-search,
#my-tickets-search,
#customer-search-top,
#template-search-input,
#view-archive #filter-search {
background:
linear-gradient(180deg,
color-mix(in srgb, var(--bg-frosty-header) 64%, rgba(255,255,255,0.22)) 0%,
color-mix(in srgb, var(--bg-frosty-content) 68%, rgba(255,255,255,0.16)) 100%) !important;
border-color: color-mix(in srgb, var(--text-secondary) 34%, rgba(255,255,255,0.18)) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.07),
0 0 0 1px rgba(0,0,0,0.06) !important;
backdrop-filter: blur(8px) saturate(125%) !important;
-webkit-backdrop-filter: blur(8px) saturate(125%) !important;
}

#inbox-search:focus,
#my-tickets-search:focus,
#customer-search-top:focus,
#template-search-input:focus,
#view-archive #filter-search:focus {
background:
linear-gradient(180deg,
color-mix(in srgb, var(--bg-frosty-header) 60%, rgba(255,255,255,0.24)) 0%,
color-mix(in srgb, var(--bg-frosty-content) 64%, rgba(255,255,255,0.18)) 100%) !important;
border-color: color-mix(in srgb, var(--accent-primary) 70%, rgba(255,255,255,0.18)) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
0 0 0 1px color-mix(in srgb, var(--accent-primary) 16%, transparent) !important;
}

/* Kundchatt-/expertmarkörer i adminrubriker */
/* 🔴 #315 (fyndet inlämnat av #312, 2026-08-18): `Kundchatt & Kunskap` trunkerades på
   Box3/Box4-kodlinjen men inte på Box1/Box2 — mätt `scrollWidth 151 / clientWidth 125`.
   Rotorsak: `width/max-width: calc(100% - 65px)` reserverade `65px` åt syskonet
   `#admin-list-actions` OVILLKORLIGT, även när den är tom. Föräldern `.pane-header` är redan
   flex med `space-between`, så syskonet tar sin naturliga bredd av sig självt.
   ⇒ Den fasta reservationen ersatt med rätt flex-idiom: gruppen växer och krymper, `min-width:0`
   låter den krympa under sitt innehåll när utrymmet faktiskt tar slut.
   🔵 `L-037`: `125px` pinnas ALDRIG som facit — bredden ska följa av tillgängligt utrymme. */
.admin-list-title-group {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 auto;
  min-width: 0;
}

#admin-list-chat-affects {
  display: inline-flex;
  align-items: center;
}

.chat-affects-badge,
.expert-setting-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex-shrink: 0;
  cursor: help;
}

.chat-affects-badge {
  color: #34c759;
  background: rgba(52, 199, 89, 0.12);
  border: 1px solid rgba(52, 199, 89, 0.30);
}

.expert-setting-badge {
  color: #ff6b6b;
  background: rgba(255, 107, 107, 0.10);
  border: 1px solid rgba(255, 107, 107, 0.28);
}

#view-admin .header-tab .chat-affects-badge {
  width: 16px;
  height: 16px;
  margin-left: 6px;
  border: none;
  background: transparent;
}

#view-admin .header-tab .chat-affects-badge svg {
  width: 12px;
  height: 12px;
}

/* Tenant-obligatoriska konfigurationsfält — amber vänsterbård */
.tenant-required-row {
  border-left: 2px solid rgba(255, 196, 0, 0.45) !important;
  padding-left: 10px !important;
  border-radius: 0 6px 6px 0 !important;
  background: rgba(255, 196, 0, 0.04) !important;
}

#view-admin .admin-config-threshold-grid > .admin-config-row {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(140px, 1fr) auto auto auto;
  align-items: center;
  gap: 8px 10px;
}

#view-admin .admin-config-threshold-grid > .admin-config-row > label {
  min-width: 0;
  margin: 0;
}

#view-admin .admin-config-threshold-grid > .admin-config-row > .admin-config-field {
  width: 100%;
  min-width: 0;
}

#view-admin .admin-config-checkbox-pill {
  flex: none;
  min-width: 52px;
}

#view-admin .admin-config-checkbox-pill:disabled {
  opacity: 1;
  cursor: default;
}

@media (max-width: 900px) {
  #view-admin .admin-config-threshold-grid > .admin-config-row {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
  }

  #view-admin .admin-config-threshold-grid > .admin-config-row > label {
    grid-column: 1 / -1;
  }

  #view-admin .admin-config-threshold-grid > .admin-config-row > .admin-config-field {
    grid-column: 1;
  }
}

/* =============================================================================
   SINGLETON-LAGE - dolj multi-office/multi-agent UI-element
   Aktiveras via body.atlas-single-office / .atlas-no-colleagues / .atlas-singleton
   ============================================================================= */

body.atlas-no-colleagues .menu-item[data-view="inbox"],
body.atlas-no-colleagues #inbox-tab-btn-claimed,
body.atlas-no-colleagues #inbox-tab-badge-claimed,
body.atlas-no-colleagues #btn-mode-internal,
body.atlas-no-colleagues #composer-agent-grid,
body.atlas-no-colleagues #composer-mode-toggle,
body.atlas-no-colleagues #atlas-assign-modal .assign-tab-btn[data-tab="agenter"],
body.atlas-no-colleagues #atlas-bulk-assign-modal .assign-tab-btn[data-tab="agenter"],
body.atlas-no-colleagues .claim-mini-btn,
body.atlas-no-colleagues .claim-action,
body.atlas-no-colleagues .assign-action,
body.atlas-no-colleagues [data-action="assign"],
body.atlas-no-colleagues .ask-colleague-btn,
body.atlas-no-colleagues [onclick*="askColleague"],
body.atlas-no-colleagues [id*="ask-colleague"],
body.atlas-no-colleagues [data-action="eye"],
body.atlas-no-colleagues .hw-stat-internal {
  display: none !important;
}

body.atlas-single-office #atlas-assign-modal .assign-tab-btn[data-tab="kontor"],
body.atlas-single-office #atlas-bulk-assign-modal .assign-tab-btn[data-tab="kontor"],
body.atlas-single-office #hw-offices-card,
body.atlas-single-office .office-routing-select {
  display: none !important;
}

body.atlas-single-office .menu-item[data-view="inbox"],
body.atlas-single-office #badge-inbox,
body.atlas-single-office #badge-inbox-claimed {
  display: none !important;
}

/* =============================================================================
   K5c/§A (2026-07-25) — PRE-PAINT: dölj Inkorgen för icke-admin.
   SEPARAT mekanism från singleton-klasserna ovan: de hänger på ANTAL kontor/
   användare och är aldrig sanna i en multi-enhets-tenant. Denna hänger på
   ROLLEN, satt pre-paint av PRE-PAINT AUTH-GATE i index.html.
   !important krävs — style.css sätter `.menu-item { display: flex !important }`,
   så en regel utan det hade tyst inte gjort någonting alls.
   Rent kosmetisk: serverns auth är oberoende och switchView('inbox') har sin
   egen grind. updateInboxVisibility() tar bort klassen i sin isSupport-gren
   innan den nollställer inline-stilen, så en admin med stale cachad roll får
   tillbaka Inkorgen så fort servern svarat.
   ============================================================================= */
html.atlas-role-agent .menu-item[data-view="inbox"] {
  display: none !important;
}

/* Delat tomt-läge för listor och adminpaneler. Tema-tokens och riktig textfärg
   används i stället för opacity så copy behåller kontrast i alla teman. */
.atlas-empty-state{
  box-sizing: border-box;
  min-width: 0;
  margin: 4px 10px 10px;
  padding: 14px;
  border: 1px dashed color-mix(in srgb, var(--accent-primary) 35%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-dark-secondary) 94%, var(--accent-primary) 6%);
  overflow-wrap: anywhere;
}

.atlas-empty-state strong {
  display: block;
  margin-bottom: 5px;
  color: var(--text-primary);
}

.atlas-empty-state p {
  margin: 0;
  color: color-mix(in srgb, var(--text-secondary) 70%, var(--text-primary) 30%);
  font-size: 12px;
  line-height: 1.5;
}

.domain-admin-panel > .atlas-empty-state {
  margin: 0;
}

body.atlas-singleton #atlas-assign-modal,
body.atlas-singleton #atlas-bulk-assign-modal,
body.atlas-singleton .open-assign-modal,
body.atlas-singleton .menu-item[data-view="inbox"],
body.atlas-singleton #badge-inbox,
body.atlas-singleton #badge-inbox-claimed,
body.atlas-singleton .bulk-btn-assign {
  display: none !important;
}

/* ============================================================
   #86/#100 — "Testa"-ikonknapp i hemlighetsrader (Patrik IRL 2026-08-04:
   "gillar fortfarande inte textknappar med en rektangel runt, vill ha svg
   ikoner med hoovertext"). Ingen ram i viloläge — bakgrunden tänds först vid
   hover/fokus. Semantiska tokens, aldrig hårdkodad vit rgba, så den håller
   i alla tio teman inklusive de ljusa.
   ============================================================ */
/* #219 (2026-08-12): förälderkravet `.admin-config-row` är BORTTAGET ur selektorn.
   Mätt rotorsak: `#mail-test-btn` renderas i `<div data-mail-test-actions>`
   (`admin-config.js:838-840`), inte i en `.admin-config-row`, så regeln matchade
   aldrig och knappen föll till innehållsstorlek 15x20 med 15x15-glyf. Positiv
   kontroll samma runda: `#openai-test-btn`, samma klass men MED `.admin-config-row`
   som förälder, renderade 32x32/16x16. Klassen är specifik nog i sig — kravet på
   föräldern var oavsiktligt och gjorde standarden beroende av var knappen placeras. */
#view-admin .admin-config-test-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.75;
  transition: background 0.2s, color 0.2s, opacity 0.2s;
}
#view-admin .admin-config-test-btn svg {
  width: 16px;
  height: 16px;
}
#view-admin .admin-config-test-btn:hover,
#view-admin .admin-config-test-btn:focus-visible {
  opacity: 1;
  color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
}
#view-admin .admin-config-test-btn:disabled {
  opacity: 0.35;
  cursor: default;
  background: transparent;
  color: var(--text-secondary);
}

/* 🔴 #78 (Patriks IRL-fynd 2026-08-05): ikonkontraktet sätter `display: inline-flex`
   med specificitet 1,2,0 och slog därmed ut webbläsarens `[hidden] { display: none }`
   (0,1,0). Följden: hänglåset i kategoridetaljen låg kvar synligt mitt på raden efter
   upplåsning, trots att `unlockCategoryBuilderEdit` sätter `unlock.hidden = true`.
   Samma fälla fanns redan lappad ad hoc för `#catalog-kw-unlock-btn`; denna regel
   gäller alla scopen på en gång så nästa konverterade yta inte återupptäcker den.
   Måste ligga FÖRE kontraktsblocken den skyddar är irrelevant — !important avgör. */
#view-admin .admin-config-icon-btn[hidden] {
  display: none !important;
}

/* #78-pilot — AI-motorns ikonåtgärder använder samma 32px-ytor som den
   godkända testknappen. Scoped så övriga adminytor väntar på huvudrundan.
   🟢 #315 (2026-08-18) ÄR den huvudrundan för Kundchatt & Kunskap-flikarna.
   `.qq-admin-panel` och `.admin-kb-section-card`
   (Kunskapsbankens sektioner) tillkommer därför här. Mätt före ändringen:
   deras lås var ramade TEXTknappar (66×30 respektive 79×27) medan
   Bokningslänkar/TS-länkar redan hade det korrekta 32×32-ikonlåset — det är
   alltså de här två ytorna som avvek, inte länkflikarna. */
#view-admin .admin-config-row .admin-config-icon-btn,
#view-admin .admin-config-section-heading .admin-config-icon-btn,
#view-admin .domain-admin-panel .admin-config-icon-btn,
#view-admin .qq-admin-panel .admin-config-icon-btn,
#view-admin .admin-kb-section-card .admin-config-icon-btn,
#view-admin .ctpl-surface .admin-config-icon-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border: none !important;
  border-radius: 8px;
  background: transparent !important;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transform: none !important;
  transition: background 0.2s, color 0.2s, opacity 0.2s;
}
#view-admin .admin-config-row .admin-config-icon-btn svg,
#view-admin .admin-config-section-heading .admin-config-icon-btn svg,
#view-admin .domain-admin-panel .admin-config-icon-btn svg,
#view-admin .qq-admin-panel .admin-config-icon-btn svg,
#view-admin .ctpl-surface .admin-config-icon-btn svg,
#view-admin .admin-section-heading-icon svg {
  width: 16px;
  height: 16px;
}
#view-admin .admin-config-row .admin-config-icon-btn:focus-visible,
#view-admin .admin-config-section-heading .admin-config-icon-btn:focus-visible,
#view-admin .domain-admin-panel .admin-config-icon-btn:focus-visible,
#view-admin .qq-admin-panel .admin-config-icon-btn:focus-visible,
#view-admin .ctpl-surface .admin-config-icon-btn:focus-visible,
#view-admin .admin-operation-toggle:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}
#view-admin .admin-config-row .admin-edit-icon-btn,
#view-admin .admin-config-row .admin-config-lock-icon-btn,
#view-admin .admin-config-section-heading .admin-edit-icon-btn,
#view-admin .admin-config-section-heading .admin-config-lock-icon-btn,
#view-admin .domain-admin-panel .admin-edit-icon-btn,
#view-admin .domain-admin-panel .admin-config-lock-icon-btn,
#view-admin .ctpl-surface .admin-edit-icon-btn,
#view-admin .ctpl-surface .admin-config-lock-icon-btn {
  color: var(--text-secondary);
}
#view-admin .admin-config-row .admin-edit-icon-btn:hover,
#view-admin .admin-config-row .admin-edit-icon-btn:focus-visible,
#view-admin .admin-config-row .admin-config-lock-icon-btn:hover,
#view-admin .admin-config-row .admin-config-lock-icon-btn:focus-visible,
#view-admin .admin-config-section-heading .admin-edit-icon-btn:hover,
#view-admin .admin-config-section-heading .admin-edit-icon-btn:focus-visible,
#view-admin .admin-config-section-heading .admin-config-lock-icon-btn:hover,
#view-admin .admin-config-section-heading .admin-config-lock-icon-btn:focus-visible,
#view-admin .domain-admin-panel .admin-edit-icon-btn:hover,
#view-admin .domain-admin-panel .admin-edit-icon-btn:focus-visible,
#view-admin .domain-admin-panel .admin-config-lock-icon-btn:hover,
#view-admin .domain-admin-panel .admin-config-lock-icon-btn:focus-visible,
#view-admin .ctpl-surface .admin-edit-icon-btn:hover,
#view-admin .ctpl-surface .admin-edit-icon-btn:focus-visible,
#view-admin .ctpl-surface .admin-config-lock-icon-btn:hover,
#view-admin .ctpl-surface .admin-config-lock-icon-btn:focus-visible {
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent) !important;
}
/* #78 F2 (Claude-verifiering 2026-08-05): admin-reset-icon-btn namngavs i
   ikonkontraktet men saknade CSS helt — den renderade som odefinierad brödtext.
   Återställ-till-standard är en neutral åtgärd, inte en fara, därför samma
   sekundärton som lås/redigera. */
#view-admin .admin-config-row .admin-reset-icon-btn,
#view-admin .admin-config-section-heading .admin-reset-icon-btn {
  color: var(--text-secondary);
}
#view-admin .admin-config-row .admin-reset-icon-btn:hover,
#view-admin .admin-config-row .admin-reset-icon-btn:focus-visible,
#view-admin .admin-config-section-heading .admin-reset-icon-btn:hover,
#view-admin .admin-config-section-heading .admin-reset-icon-btn:focus-visible {
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent) !important;
}
#view-admin .admin-config-row .admin-cancel-icon-btn,
#view-admin .admin-config-section-heading .admin-cancel-icon-btn,
#view-admin .domain-admin-panel .admin-cancel-icon-btn,
#view-admin .domain-admin-panel .admin-delete-icon-btn,
#view-admin .qq-admin-panel .admin-delete-icon-btn,
#view-admin .ctpl-surface .admin-cancel-icon-btn,
#view-admin .ctpl-surface .admin-delete-icon-btn {
  color: var(--status-danger, #ef4444);
}
body.atlas-light-theme #view-admin .admin-config-row .admin-cancel-icon-btn,
body.atlas-light-theme #view-admin .admin-config-section-heading .admin-cancel-icon-btn,
body.atlas-light-theme #view-admin .domain-admin-panel .admin-cancel-icon-btn,
body.atlas-light-theme #view-admin .domain-admin-panel .admin-delete-icon-btn,
body.atlas-light-theme #view-admin .qq-admin-panel .admin-delete-icon-btn,
body.atlas-light-theme #view-admin .ctpl-surface .admin-cancel-icon-btn,
body.atlas-light-theme #view-admin .ctpl-surface .admin-delete-icon-btn {
  color: #b91c1c;
}
#view-admin .admin-config-row .admin-cancel-icon-btn:hover,
#view-admin .admin-config-row .admin-cancel-icon-btn:focus-visible,
#view-admin .admin-config-section-heading .admin-cancel-icon-btn:hover,
#view-admin .admin-config-section-heading .admin-cancel-icon-btn:focus-visible,
#view-admin .domain-admin-panel .admin-cancel-icon-btn:hover,
#view-admin .domain-admin-panel .admin-cancel-icon-btn:focus-visible,
#view-admin .domain-admin-panel .admin-delete-icon-btn:hover,
#view-admin .domain-admin-panel .admin-delete-icon-btn:focus-visible,
#view-admin .qq-admin-panel .admin-delete-icon-btn:hover,
#view-admin .qq-admin-panel .admin-delete-icon-btn:focus-visible,
#view-admin .ctpl-surface .admin-cancel-icon-btn:hover,
#view-admin .ctpl-surface .admin-cancel-icon-btn:focus-visible,
#view-admin .ctpl-surface .admin-delete-icon-btn:hover,
#view-admin .ctpl-surface .admin-delete-icon-btn:focus-visible {
  background: color-mix(in srgb, var(--status-danger, #ef4444) 12%, transparent) !important;
}
#view-admin .admin-config-row .admin-config-icon-btn.admin-save-icon-btn,
#view-admin .admin-config-section-heading .admin-config-icon-btn.admin-save-icon-btn,
#view-admin .domain-admin-panel .admin-config-icon-btn.admin-save-icon-btn,
#view-admin .ctpl-surface .admin-config-icon-btn.admin-save-icon-btn {
  color: var(--status-success, #22c55e);
}
#view-admin .admin-config-row .admin-config-icon-btn.admin-save-icon-btn:hover,
#view-admin .admin-config-row .admin-config-icon-btn.admin-save-icon-btn:focus-visible,
#view-admin .admin-config-section-heading .admin-config-icon-btn.admin-save-icon-btn:hover,
#view-admin .admin-config-section-heading .admin-config-icon-btn.admin-save-icon-btn:focus-visible,
#view-admin .domain-admin-panel .admin-config-icon-btn.admin-save-icon-btn:hover,
#view-admin .domain-admin-panel .admin-config-icon-btn.admin-save-icon-btn:focus-visible,
#view-admin .ctpl-surface .admin-config-icon-btn.admin-save-icon-btn:hover,
#view-admin .ctpl-surface .admin-config-icon-btn.admin-save-icon-btn:focus-visible {
  background: color-mix(in srgb, var(--status-success, #22c55e) 12%, transparent) !important;
}
body.atlas-light-theme #view-admin .admin-config-row .admin-config-icon-btn.admin-save-icon-btn,
body.atlas-light-theme #view-admin .admin-config-section-heading .admin-config-icon-btn.admin-save-icon-btn,
body.atlas-light-theme #view-admin .domain-admin-panel .admin-config-icon-btn.admin-save-icon-btn,
body.atlas-light-theme #view-admin .ctpl-surface .admin-config-icon-btn.admin-save-icon-btn {
  color: #166534;
}
#view-admin .ctpl-surface .kb-save-icon-btn:not(.dirty) {
  color: var(--ctpl-muted-affordance, color-mix(in srgb, var(--text-secondary) 85%, var(--bg-dark-secondary) 15%)) !important;
}
#view-admin .kb-save-icon-btn.dirty,
#view-admin .kb-save-icon-btn.dirty:hover,
#view-admin .kb-save-icon-btn.dirty:focus-visible {
  color: #4cd964 !important;
}
#view-admin .admin-section-heading-icon {
  display: inline-flex;
  vertical-align: -3px;
  margin-right: 5px;
}
#view-admin .admin-config-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
}
#view-admin .admin-config-section-heading h4 {
  min-width: 0;
}
#view-admin .admin-config-section-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

/* ============================================================
   #78 delfix 2 (Patriks IRL-fråga 2026-08-05: "går det att få hovertexten på
   dessa PÅ/AV att synas utan att man måste låsa upp fältet först?").
   I låst läge bär pillret `pointer-events: none` — det ÄR låset, och det får
   inte avväpnas (AGENTS.md: försvaga aldrig ett skyddslager). Följden är att
   webbläsaren aldrig får en hover-träff på knappen och därför aldrig visar dess
   `title`. Omslaget tar emot hovern i stället och bär samma text, medan pillret
   behåller `pointer-events: none`. Det hybrida beteendet (none låst / auto
   upplåst) står orört.
   ============================================================ */
#view-admin .admin-toggle-hover-wrap {
display: inline-flex;
align-items: center;
pointer-events: auto;
}

/* Resultatet är ren text under raden — ingen ruta, ingen ram. */
#view-admin .admin-config-test-result {
  font-size: var(--text-micro-size);
  line-height: 1.5;
  min-height: 1.2em;
}
#view-admin .admin-config-test-result .is-ok { color: var(--success-text); }
#view-admin .admin-config-test-result .is-error { color: var(--danger-text); }
#view-admin .admin-config-test-result .is-pending {
  color: var(--text-secondary);
  opacity: var(--text-help-opacity);
}
.widget-preview-launch {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent-primary, #5fa8ff) 42%, var(--border-color, transparent));
  border-radius: 14px;
  background: linear-gradient(110deg, color-mix(in srgb, var(--accent-primary, #5fa8ff) 16%, transparent), color-mix(in srgb, var(--bg-dark-secondary, #202632) 96%, transparent));
}
.widget-preview-launch-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: color-mix(in srgb, var(--accent-primary, #5fa8ff) 20%, transparent); color: var(--accent-primary, #5fa8ff); }
.widget-preview-launch-copy { display: grid; min-width: 0; gap: 3px; }
.widget-preview-launch-copy strong { color: var(--text-primary); font-size: 14px; }
.widget-preview-launch-copy > span:last-child { color: var(--text-secondary); font-size: 11.5px; line-height: 1.4; }
.widget-preview-launch-button { display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; min-height: 42px; text-decoration: none; white-space: nowrap; }
.widget-preview-launch-button svg { width: 17px; height: 17px; }
.widget-test-bubble-button {
  min-height: 42px;
  padding: 0 17px 0 14px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--widget-preview-bg, #1a56db) 44%, #000 56%) !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(0,0,0,.22);
  font-weight: 700;
}
.widget-test-bubble-button:hover { filter: brightness(.94); }
.company-website-preview-status { border: 1px solid var(--border-color); background: var(--bg-secondary); }
.company-website-preview-status[data-preview-tone="success"] { border-color: color-mix(in srgb, #2fb171 45%, var(--border-color)); background: color-mix(in srgb, #2fb171 10%, var(--bg-secondary)); }
.company-website-preview-status[data-preview-tone="error"] { border-color: color-mix(in srgb, #ff6b6b 45%, var(--border-color)); background: color-mix(in srgb, #ff6b6b 10%, var(--bg-secondary)); }
.company-website-preview-status[data-preview-tone="warning"] { border-color: color-mix(in srgb, #e6a23c 45%, var(--border-color)); background: color-mix(in srgb, #e6a23c 10%, var(--bg-secondary)); }

@media (max-width: 700px) {
  .widget-preview-launch { grid-template-columns: auto minmax(0, 1fr); }
  .widget-preview-launch-button { grid-column: 1 / -1; width: 100%; }
}

/* KAN-146: vissa adminrader har en egen display-deklaration och läckte därför
   ur stängda details även på desktop. Grid-rader är summary-layoutrader och
   undantas enligt det befintliga mobilkontraktet. */
#view-admin details:not([open]) .admin-config-row:not([style*="display:grid"]) {
  display: none !important;
}