/* =============================================================================
   MOBILSTIL ("mjuka öar") — Kundchatt & Kunskap-menyn, tjänstedetaljen, Kundinformation, admin-detaljvyernas gemensamma språk (AI-motor, Kunskapsbank, Kunskapsluckor, Rapporter, Systemkonfiguration).
   Mobilrundan 2026-10-09/10 (AT-74, KAN-421), godkänd live på Patriks telefon 10-10 00:58.
   Laddas med media="screen and (max-width: 768px)" direkt efter mobile-ticket-cards.css och
   FÖRE quill.snow.css och temafilen — samma kaskadplats som provets injicerade <style>
   (tools/phone.mjs:22-23). Därför bär reglerna :root body-prefix och !important: temana och
   inline-stilar sätter samma egenskaper med !important. Ingen "DELAD UR"-markör: filen är
   ingen del av CSS-2-gruppen. Desktop laddar inte filen.
   Ordningen mellan och inom filerna = provets injektionsordning (tools/inject_all.sh rad 3);
   ändra inte ordningen utan ny mätning.
   ============================================================================= */

/* ---- ur test-adminnav.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan (Patrik 10-09): Kundchatt & Kunskap / Systemkonfiguration — menyraderna som mjuka kort:
   rund ikon, titel, AI-pill, pil ›. Panelen bara så hög som innehållet. */
:root body #view-admin .admin-sidebar-list > .scroll-list#admin-main-list:has(> .admin-sysconfig-nav-item) { flex: 0 0 auto !important; height: auto !important; max-height: none !important; }
:root body #view-admin #admin-main-list .admin-sysconfig-nav-item.admin-sysconfig-nav-item {
  position: relative !important; display: flex !important; align-items: center !important; gap: 12px !important;
  min-height: 60px !important; padding: 8px 40px 8px 10px !important; margin: 0 0 8px !important;
  border-radius: 16px !important; border: 1px solid color-mix(in srgb, var(--accent-primary) 18%, transparent) !important;
  background: color-mix(in srgb, var(--ledare-varm) 40%, var(--bg-dark-primary)) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 10px -4px rgba(0,0,0,0.16) !important;
}
:root body #view-admin #admin-main-list .admin-sysconfig-nav-item > span:first-child {
  flex: 0 0 40px !important; width: 40px !important; height: 40px !important; border-radius: 50% !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  background: color-mix(in srgb, var(--accent-primary) 15%, transparent) !important; color: var(--accent-primary) !important;
}
:root body #view-admin #admin-main-list .admin-sysconfig-nav-item > span:first-child svg { width: 20px !important; height: 20px !important; }
:root body #view-admin #admin-main-list .admin-sysconfig-nav-item > span:nth-child(2) { flex: 1 1 auto !important; font-size: 15px !important; font-weight: 600 !important; }
:root body #view-admin #admin-main-list .admin-sysconfig-nav-item::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--accent-primary); border-top: 2px solid var(--accent-primary); transform: translateY(-50%) rotate(45deg); opacity: 0.8;
}
:root body #view-admin #admin-main-list .admin-nav-ai-chip.admin-nav-ai-chip {
  border-radius: 999px !important; padding: 3px 8px !important; font-size: 10.5px !important; font-weight: 700 !important; height: auto !important;
  background: color-mix(in srgb, var(--accent-primary) 14%, transparent) !important; border: none !important;
}
:root body #view-admin #admin-main-list .admin-mobile-kb-guide-btn { border: none !important; background: none !important; }
:root body #view-admin #admin-main-list .admin-sysconfig-nav-item.active { border-color: var(--accent-primary) !important; }
/* (10-14, ledartråd 25: ikon + pil blandas med temats textfärg, inte svart — svart gav kontrast 1,16 i Carbon med blå agentfärg; nu 3,3–10,4 i alla tio teman.)
   Menykorten tonas subtilt med den inloggades agentfärg (--min-agentfarg sätts av prov-JS
   ur currentUser.agent_color; i produktion sätts variabeln vid inloggning). */
:root body #view-admin #admin-main-list .admin-sysconfig-nav-item.admin-sysconfig-nav-item {
  background: color-mix(in srgb, var(--min-agentfarg, var(--accent-primary)) 8%, color-mix(in srgb, var(--ledare-varm) 40%, var(--bg-dark-primary))) !important;
  border-color: color-mix(in srgb, var(--min-agentfarg, var(--accent-primary)) 22%, transparent) !important;
}
:root body #view-admin #admin-main-list .admin-sysconfig-nav-item > span:first-child {
  background: color-mix(in srgb, var(--min-agentfarg, var(--accent-primary)) 16%, transparent) !important;
  color: color-mix(in srgb, var(--min-agentfarg, var(--accent-primary)) 55%, var(--text-primary)) !important;
}
:root body #view-admin #admin-main-list .admin-sysconfig-nav-item::after {
  border-color: color-mix(in srgb, var(--min-agentfarg, var(--accent-primary)) 55%, var(--text-primary)) !important;
}
/* Svagare ton (Patrik). */
:root body #view-admin #admin-main-list .admin-sysconfig-nav-item.admin-sysconfig-nav-item.admin-sysconfig-nav-item {
  background: color-mix(in srgb, var(--min-agentfarg, var(--accent-primary)) 4%, color-mix(in srgb, var(--ledare-varm) 40%, var(--bg-dark-primary))) !important;
  border-color: color-mix(in srgb, var(--min-agentfarg, var(--accent-primary)) 14%, transparent) !important;
}
:root body #view-admin #admin-main-list .admin-sysconfig-nav-item.admin-sysconfig-nav-item > span:first-child {
  background: color-mix(in srgb, var(--min-agentfarg, var(--accent-primary)) 10%, transparent) !important;
}

/* ---- ur test-tjanst.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan (Patrik 10-09): tjänstedetaljen (catalog-detail) i samma ö-språk som kategorin. */
:root body #view-admin .catalog-detail > .detail-body { padding: 12px !important; display: flex !important; flex-direction: column !important; gap: 14px !important; }
/* Huvudet: rundad ö med gradient, ingen vänsterkant. */
:root body #view-admin .catalog-detail > .detail-body > div:first-child {
  margin: 0 !important; padding: 12px 14px !important; border-radius: 20px !important;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, transparent) !important; border-left-width: 1px !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-primary) 16%, var(--bg-dark-primary)), color-mix(in srgb, var(--accent-primary) 6%, var(--bg-dark-primary))) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.10) !important;
}
/* Panelerna: lyfta ljusa kort, ingen grön vänsterkant. */
:root body #view-admin .catalog-detail .glass-panel:is(.catalog-chain-panel, .catalog-main-panel, .catalog-description-panel, .catalog-quick-question-panel, .catalog-components-panel) {
  margin: 0 !important; padding: 16px !important; border-radius: 20px !important;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 20%, transparent) !important; border-left-width: 1px !important;
  background: color-mix(in srgb, var(--ledare-varm) 45%, var(--bg-dark-primary)) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08) !important;
}
:root body #view-admin .catalog-detail .catalog-section-heading { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; gap: 10px !important; align-items: start !important; }
:root body #view-admin .catalog-detail .catalog-section-heading :is(h3, h4, strong, .catalog-section-title) { font-size: 15px !important; }
/* Tjänstekedjan: mjuka rader med rund bock. */
:root body #view-admin .catalog-detail .catalog-chain-row.catalog-chain-row {
  border: none !important; border-radius: 14px !important; padding: 10px 12px !important; margin: 0 0 6px !important;
  background: color-mix(in srgb, var(--accent-primary) 8%, transparent) !important; display: flex !important; align-items: center !important; gap: 10px !important;
}
:root body #view-admin .catalog-detail .catalog-chain-row.is-ok > :first-child {
  flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: #2e8b57 !important; color: #fff !important; font-size: 13px !important;
}
/* Lås: rund grön knapp, som i kategorin. */
:root body #view-admin .catalog-detail .catalog-section-heading .admin-lock-btn {
  width: 44px !important; height: 44px !important; min-height: 44px !important; border-radius: 50% !important; border: none !important;
  background: var(--accent-primary) !important; color: #fff !important; box-shadow: 0 3px 10px color-mix(in srgb, var(--accent-primary) 35%, transparent) !important;
}
:root body #view-admin .catalog-detail .catalog-section-heading .admin-lock-btn svg { stroke: #fff !important; color: #fff !important; }
/* Fält: rundade, ljusa. */
:root body #view-admin .catalog-detail :is(input.filter-input, textarea.filter-input, select.filter-input, .atlas-filter-dd) {
  border-radius: 14px !important; min-height: 44px !important;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 28%, transparent) !important;
  background: color-mix(in srgb, var(--ledare-varm) 55%, var(--bg-dark-primary)) !important; opacity: 1 !important; color: var(--text-primary) !important;
}
:root body #view-admin .catalog-detail .catalog-field > span:first-child,
:root body #view-admin .catalog-detail .catalog-field > label { font-size: 11.5px !important; letter-spacing: 0.5px !important; color: var(--text-secondary) !important; }
/* Paketinnehåll: rubrik + ikonknappar på en rad, beskrivningen i full bredd under. */
:root body #view-admin .catalog-detail .catalog-components-panel .catalog-section-heading {
  grid-template-columns: minmax(0,1fr) auto !important; grid-template-areas: "titel knappar" "text text" !important; row-gap: 4px !important;
}
:root body #view-admin .catalog-detail .catalog-components-panel .catalog-section-heading > div:first-child { display: contents !important; }
:root body #view-admin .catalog-detail .catalog-components-panel .catalog-section-heading > div:first-child > h4 { grid-area: titel; align-self: center !important; margin: 0 !important; }
:root body #view-admin .catalog-detail .catalog-components-panel .catalog-section-heading > div:first-child > :not(h4) { grid-column: 1 / -1 !important; }
:root body #view-admin .catalog-detail .catalog-components-panel .catalog-section-heading > .catalog-edit-only { grid-area: knappar; display: flex !important; gap: 4px !important; }
:root body #view-admin .catalog-detail .catalog-components-panel .catalog-edit-only > button.btn-glass-small {
  width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 0 !important; margin: 0 !important;
  border: none !important; background: transparent !important; box-shadow: none !important; border-radius: 50% !important;
  color: var(--accent-primary) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
/* "Samma"-reglaget: pill + förklaring på en rad i full bredd. */
:root body #view-admin .catalog-detail .catalog-components-variance-toggle.catalog-components-variance-toggle {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; margin: 10px 0 2px !important; width: 100% !important;
}
:root body #view-admin .catalog-detail .catalog-components-variance-toggle .catalog-duration-variance-copy { flex: 1 1 160px !important; font-size: 12.5px !important; line-height: 1.4 !important; color: var(--text-secondary) !important; }
:root body #view-admin .catalog-detail .catalog-components-variance-toggle .status-pill { border-radius: 999px !important; flex: 0 0 auto !important; }
/* Komponentraden: ta-bort = rent rött kryss utan ring. */
:root body #view-admin .catalog-detail .catalog-component-row { display: flex !important; gap: 8px !important; align-items: center !important; }
:root body #view-admin .catalog-detail .catalog-component-row .catalog-remove-component {
  border: none !important; background: transparent !important; box-shadow: none !important; width: 36px !important; height: 44px !important;
  color: #c62a2f !important; font-size: 22px !important; font-weight: 600 !important; padding: 0 !important; flex: 0 0 auto !important;
}
:root body #view-admin .catalog-detail .catalog-component-row > .catalog-component-service { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; }
:root body #view-admin .catalog-detail .catalog-component-row > .catalog-component-quantity { flex: 0 0 64px !important; width: 64px !important; text-align: center !important; }
:root body #view-admin .catalog-detail .catalog-component-row > :is(input, select) { max-width: 100% !important; }

/* ---- ur test-domain.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan (Patrik 10-09): Kundinformation / ärendefördelning — panelerna som öar,
   tabellerna som kort (ingen sidoscroll). */
:root body #view-admin .domain-admin-panel.domain-admin-panel {
  margin: 0 0 14px !important; padding: 16px !important; border-radius: 20px !important;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 20%, transparent) !important;
  background: color-mix(in srgb, var(--ledare-varm) 45%, var(--bg-dark-primary)) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08) !important;
}
:root body #view-admin .domain-admin-panel .admin-config-section-heading { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; }
:root body #view-admin .domain-admin-panel .admin-config-section-heading :is(h3, h4) { font-size: 16px !important; margin: 0 !important; }
:root body #view-admin .domain-admin-panel .admin-lock-btn {
  width: 44px !important; height: 44px !important; min-height: 44px !important; border-radius: 50% !important; border: none !important;
  background: var(--accent-primary) !important; color: #fff !important; box-shadow: 0 3px 10px color-mix(in srgb, var(--accent-primary) 35%, transparent) !important;
}
:root body #view-admin .domain-admin-panel .admin-lock-btn svg { stroke: #fff !important; color: #fff !important; }
:root body #view-admin .domain-admin-panel .domain-admin-panel-description { font-size: 13px !important; line-height: 1.45 !important; color: var(--text-secondary) !important; }
/* Ingen sidoscroll: tabellen blir en lista av kort. */
:root body #view-admin .domain-table-scroll.domain-table-scroll { overflow: visible !important; max-width: 100% !important; }
:root body #view-admin .domain-admin-panel table { display: block !important; width: 100% !important; min-width: 0 !important; border: none !important; }
:root body #view-admin .domain-admin-panel table thead { display: none !important; }
:root body #view-admin .domain-admin-panel table tbody { display: flex !important; flex-direction: column !important; gap: 8px !important; }
:root body #view-admin .domain-admin-panel table tbody tr {
  display: flex !important; flex-direction: column !important; gap: 6px !important;
  padding: 12px 14px !important; border-radius: 14px !important; border: none !important;
  background: color-mix(in srgb, var(--accent-primary) 7%, var(--bg-dark-primary)) !important;
}
:root body #view-admin .domain-admin-panel table tbody td {
  display: block !important; padding: 0 !important; border: none !important; width: auto !important; max-width: none !important;
  white-space: normal !important; overflow-wrap: anywhere !important; font-size: 14px !important;
}
:root body #view-admin .domain-admin-panel table tbody td[data-label]::before {
  content: attr(data-label); display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 2px;
}
/* Ärendefördelning: utbud + väljare på samma rad. */
:root body #view-admin .domain-routing-table tbody tr { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; }
:root body #view-admin .domain-routing-table tbody td:first-child { font-weight: 650 !important; font-size: 15px !important; }
:root body #view-admin .domain-routing-table tbody td:first-child::before { display: none !important; }
:root body #view-admin .domain-routing-table tbody td:last-child { flex: 0 0 58% !important; }
:root body #view-admin .domain-routing-table tbody td:last-child::before { display: none !important; }
:root body #view-admin .domain-admin-panel :is(select, .atlas-filter-dd, input.filter-input) { width: 100% !important; max-width: 100% !important; border-radius: 999px !important; min-height: 40px !important; }
/* Snabbfrågekortet: status som pill, åtgärder utan rubrik i en rad, mindre luft. */
:root body #view-admin .domain-fact-table tbody tr { gap: 8px !important; position: relative !important; }
:root body #view-admin .domain-fact-table tbody td:nth-child(4) { position: absolute !important; top: 12px !important; right: 12px !important; font-size: 0 !important; }
:root body #view-admin .domain-fact-table tbody td:nth-child(4)::before { display: none !important; }
:root body #view-admin .domain-fact-table tbody td:nth-child(4) > * { font-size: 11px !important; }
:root body #view-admin .domain-fact-table tbody td:nth-child(5)::before { display: none !important; }
:root body #view-admin .domain-fact-table tbody td:nth-child(5) { display: flex !important; justify-content: flex-end !important; gap: 4px !important; margin-top: 2px !important; }
:root body #view-admin .domain-fact-table tbody td:nth-child(1) { padding-right: 70px !important; }
:root body #view-admin .domain-admin-panel .admin-config-section-heading button {
  width: 44px !important; height: 44px !important; min-height: 44px !important; border-radius: 50% !important; border: none !important;
  background: var(--accent-primary) !important; color: #fff !important; box-shadow: 0 3px 10px color-mix(in srgb, var(--accent-primary) 35%, transparent) !important;
}
:root body #view-admin .domain-admin-panel .admin-config-section-heading button svg { stroke: #fff !important; color: #fff !important; }
:root body #view-admin .domain-admin-panel .admin-config-section-heading .admin-cancel-icon-btn { background: color-mix(in srgb, #e5484d 12%, transparent) !important; color: #c62a2f !important; box-shadow: none !important; }
:root body #view-admin .domain-admin-panel .admin-config-section-heading .admin-cancel-icon-btn svg { stroke: #c62a2f !important; }
:root body #view-admin .domain-admin-panel .admin-config-section-heading [hidden] { display: none !important; }
:root body #view-admin .domain-fact-table tbody td:nth-child(4) { font-size: 11px !important; font-weight: 700 !important; padding: 3px 10px !important; border-radius: 999px !important;
  background: color-mix(in srgb, #2e8b57 16%, transparent) !important; color: #1f6b43 !important; height: auto !important; line-height: 1.4 !important; }
:root body #view-admin .domain-admin-panel .domain-routing-table.domain-routing-table tbody tr.tr,
:root body #view-admin .domain-admin-panel .domain-routing-table tbody tr { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; padding: 8px 8px 8px 16px !important; }
:root body #view-admin .domain-admin-panel .domain-routing-table tbody td:first-child { flex: 1 1 auto !important; text-align: left !important; }
:root body #view-admin .domain-admin-panel .domain-routing-table tbody td:last-child { flex: 0 0 62% !important; }
:root body #view-admin .domain-fact-table tbody td:nth-child(4)::after { content: none !important; }
/* Mer luft före varje fältrubrik (SVAR, VISAS FÖR) i snabbfrågekorten. */
:root body #view-admin .domain-fact-table tbody td + td[data-label]::before { margin-top: 10px !important; }
/* Ärendefördelning: texten centrerad i rutorna (namn + väljare). */
:root body #view-admin .domain-admin-panel .domain-routing-table tbody td:first-child { text-align: left !important; }
:root body #view-admin .domain-admin-panel .domain-routing-table :is(select, .atlas-filter-dd, .atlas-filter-dd-label) { text-align: center !important; text-align-last: center !important; justify-content: center !important; }
:root body #view-admin .domain-admin-panel .domain-routing-table tbody td:last-child > select {
  font-size: 13px !important; padding: 0 14px !important; height: 40px !important; text-indent: 0 !important;
}
:root body #view-admin .domain-admin-panel .domain-routing-table tbody td:first-child { flex: 0 0 26% !important; }
:root body #view-admin .domain-admin-panel .domain-routing-table tbody td:last-child { flex: 1 1 auto !important; }
:root body #view-admin .domain-admin-panel .domain-routing-table tbody td:last-child > select.filter-input, :root body #view-admin .domain-admin-panel .domain-routing-table tbody td:last-child > select { padding-left: 12px !important; padding-right: 12px !important; text-align: center !important; text-align-last: center !important; }
/* Svaret ser ut som en textruta (ljus botten, tunn kant, rundad) — läsläge, redigeras via pennan. */
:root body #view-admin .domain-fact-table tbody td:nth-child(2) {
  padding: 10px 14px !important; border-radius: 14px !important; margin-top: 4px !important;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 28%, transparent) !important;
  background: color-mix(in srgb, var(--ledare-varm) 60%, var(--bg-dark-primary)) !important;
}
:root body #view-admin .domain-fact-table tbody td:nth-child(2)::before { margin: -2px 0 6px !important; }
/* Valen i ärendefördelningen: tydliga väljare — ljus botten, tydligare kant, nedåtpil. */
:root body #view-admin .domain-admin-panel .domain-routing-table tbody td:last-child > select.filter-input,
:root body #view-admin .domain-admin-panel .domain-routing-table tbody td:last-child > select {
  background-color: color-mix(in srgb, var(--ledare-varm) 65%, var(--bg-dark-primary)) !important;
  border: 1.5px solid color-mix(in srgb, var(--accent-primary) 45%, transparent) !important;
  color: var(--text-primary) !important; opacity: 1 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 14px 14px !important;
  padding-left: 32px !important; padding-right: 32px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
/* "Visas för" som pills: utbud i accent, kontor i guld-ton. */
:root body #view-admin .domain-fact-table .lv-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
:root body #view-admin .domain-fact-table .lv-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  background: color-mix(in srgb, var(--accent-primary) 14%, transparent); color: color-mix(in srgb, var(--accent-primary) 75%, var(--text-primary));
  border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, transparent);
}
:root body #view-admin .domain-fact-table .lv-pill.lv-kontor {
  background: color-mix(in srgb, #b8862b 14%, transparent); color: color-mix(in srgb, #b8862b 75%, var(--text-primary)); border-color: color-mix(in srgb, #b8862b 28%, transparent);
}
:root body #view-admin .domain-fact-table tbody td:nth-child(2) { position: relative !important; }
:root body #view-admin .domain-fact-table .lv-svar-utbud { position: absolute; top: 8px; right: 10px; display: flex; gap: 4px; }
:root body #view-admin .domain-fact-table td.lv-tom { display: none !important; }
/* Ärendefördelningens egen lista (knappen ersätter <select>). */
:root body #view-admin .domain-routing-table tbody td:last-child > .atlas-filter-dd {
  width: 100% !important; height: 42px !important; min-height: 42px !important; border-radius: 999px !important;
  justify-content: center !important; gap: 8px !important; font-size: 13.5px !important; text-transform: none !important; letter-spacing: 0 !important;
  background: color-mix(in srgb, var(--ledare-varm) 65%, var(--bg-dark-primary)) !important;
  border: 1.5px solid color-mix(in srgb, var(--accent-primary) 45%, transparent) !important; color: var(--text-primary) !important;
}
:root body #view-admin .domain-routing-table tbody td:last-child > .atlas-filter-dd .atlas-filter-dd-chevron { color: var(--accent-primary) !important; }
:root body #view-admin .domain-routing-table tbody td:last-child > .atlas-filter-dd.is-locked { opacity: 0.6 !important; }
:root body .atlas-filter-dd-panel.atlas-filter-dd-panel {
  border-radius: 18px !important; padding: 6px !important;
  background: color-mix(in srgb, var(--ledare-varm) 88%, var(--bg-dark-primary)) !important;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, transparent) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.20) !important;
}
:root body .atlas-filter-dd-panel .atlas-filter-dd-item { border-radius: 12px !important; padding: 10px 12px !important; color: var(--text-primary) !important; }
:root body .atlas-filter-dd-panel .atlas-filter-dd-item.selected { background: color-mix(in srgb, var(--accent-primary) 16%, transparent) !important; font-weight: 700 !important; }

/* ---- ur test-admindetalj.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan (Patrik 10-09): gemensamt språk för ALLA admin-detaljvyer (Kundinformation, AI-motor, Kunskapsbank …). */
:root body #view-admin #admin-detail-content .detail-body { padding: 12px !important; }
/* Huvud-ön (första blocket med inline-gradient): rundad, ingen vänsterkant. */
:root body #view-admin #admin-detail-content .detail-body > div:first-child[style*="gradient"] {
  margin: 0 0 14px !important; padding: 12px 14px !important; border-radius: 20px !important;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, transparent) !important; border-left-width: 1px !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-primary) 16%, var(--bg-dark-primary)), color-mix(in srgb, var(--accent-primary) 6%, var(--bg-dark-primary))) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.10) !important;
}
/* Guide-hjälten: mjukt block, ingen ram, mindre rubrik, mindre luft. */
:root body #view-admin #admin-detail-content .kb-guide-hero.kb-guide-hero {
  margin: 0 0 14px !important; border: none !important; border-radius: 20px !important; box-shadow: none !important;
  background: color-mix(in srgb, var(--accent-primary) 7%, var(--bg-dark-primary)) !important; padding: 14px 16px !important;
}
:root body #view-admin #admin-detail-content .kb-guide-hero > div { border: none !important; background: none !important; padding: 0 !important; box-shadow: none !important; }
:root body #view-admin #admin-detail-content .kb-guide-hero .kb-guide-eyebrow { color: var(--accent-primary) !important; font-size: 11px !important; margin: 0 0 6px !important; }
:root body #view-admin #admin-detail-content .kb-guide-hero h3 { font-size: 16px !important; line-height: 1.3 !important; margin: 0 0 8px !important; }
:root body #view-admin #admin-detail-content .kb-guide-hero p { font-size: 13.5px !important; line-height: 1.5 !important; margin: 0 0 8px !important; }
/* Kundinformation: listrubriken som rad, + rund grön; posterna som mjuka kort; ta bort = röd ikon. */
:root body #view-admin .ctpl-surface > div:nth-child(3) { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; align-items: center !important; gap: 4px 10px !important; margin: 4px 2px 10px !important; }
:root body #view-admin .ctpl-surface > div:nth-child(3) h4 { font-size: 12px !important; letter-spacing: 0.5px !important; margin: 0 !important; display: flex !important; align-items: center !important; gap: 6px !important; }
:root body #view-admin .ctpl-surface > div:nth-child(3) button {
  width: 44px !important; height: 44px !important; min-height: 44px !important; border-radius: 50% !important; border: none !important;
  background: var(--accent-primary) !important; color: #fff !important; box-shadow: 0 3px 10px color-mix(in srgb, var(--accent-primary) 35%, transparent) !important; grid-row: span 2;
}
:root body #view-admin .ctpl-surface > div:nth-child(3) button svg { stroke: #fff !important; }
:root body #view-admin #ctpl-list .ctpl-item.ctpl-item {
  border: 1px solid color-mix(in srgb, var(--accent-primary) 16%, transparent) !important; border-radius: 16px !important;
  background: color-mix(in srgb, var(--ledare-varm) 40%, var(--bg-dark-primary)) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 4px 10px -4px rgba(0,0,0,0.14) !important;
  margin: 0 0 8px !important; padding: 12px 10px 12px 14px !important;
}
:root body #view-admin #ctpl-list .ctpl-card-meta > * { border-radius: 999px !important; border: none !important; background: color-mix(in srgb, var(--accent-primary) 14%, transparent) !important; }
:root body #view-admin #ctpl-list .ctpl-item button { border: none !important; background: transparent !important; box-shadow: none !important; color: #c62a2f !important; }
:root body #view-admin #ctpl-list .ctpl-item button svg { stroke: #c62a2f !important; }
/* Kundinformationens editor: eget lyft kort, fälten i en kolumn, spara som rund grön knapp
   uppe till höger bredvid stäng, svarstexten som riktigt fält med verktygsraden överst. */
:root body #view-admin #ctpl-editor.ctpl-editor, :root body #view-admin #ctpl-editor {
  position: relative !important; margin: 10px 0 0 !important; padding: 16px !important; border-radius: 20px !important;
  border: 1.5px solid color-mix(in srgb, var(--accent-primary) 35%, transparent) !important;
  background: color-mix(in srgb, var(--ledare-varm) 50%, var(--bg-dark-primary)) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12) !important;
}
:root body #view-admin #ctpl-editor .ctpl-editor-heading { padding-right: 100px !important; margin-bottom: 12px !important; }
:root body #view-admin #ctpl-editor .ctpl-editor-heading button { position: absolute !important; top: 12px !important; right: 12px !important; border: none !important; background: none !important; box-shadow: none !important; }
:root body #view-admin #ctpl-editor > div:nth-child(2) { display: flex !important; flex-direction: column !important; gap: 10px !important; }
:root body #view-admin #ctpl-editor > div:nth-child(2) > div { width: 100% !important; max-width: none !important; }
:root body #view-admin #ctpl-editor > div:nth-child(2) label { display: block !important; margin-bottom: 4px !important; font-size: 11.5px !important; letter-spacing: 0.5px !important; color: var(--text-secondary) !important; }
:root body #view-admin #ctpl-editor input.filter-input { width: 100% !important; border-radius: 14px !important; min-height: 44px !important;
  background: color-mix(in srgb, var(--ledare-varm) 65%, var(--bg-dark-primary)) !important; border: 1px solid color-mix(in srgb, var(--accent-primary) 30%, transparent) !important; }
:root body #view-admin #ctpl-editor > div:nth-child(2) > button.kb-save-icon-btn, :root body #view-admin #ctpl-editor > div:nth-child(2) > button {
  position: absolute !important; top: 8px !important; right: 56px !important; width: 44px !important; height: 44px !important; min-height: 44px !important;
  border-radius: 50% !important; border: none !important; background: var(--accent-primary) !important; color: #fff !important;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--accent-primary) 35%, transparent) !important; margin: 0 !important;
}
:root body #view-admin #ctpl-editor > div:nth-child(2) > button svg { stroke: #fff !important; }
:root body #view-admin #ctpl-editor > div:nth-child(3) { display: flex !important; flex-direction: column !important; margin-top: 14px !important; }
:root body #view-admin #ctpl-editor > div:nth-child(3) > label { order: 0; font-size: 11.5px !important; letter-spacing: 0.5px !important; color: var(--text-secondary) !important; margin-bottom: 4px !important; }
:root body #view-admin #ctpl-editor > div:nth-child(3) > .ql-toolbar { order: 1; border-radius: 14px 14px 0 0 !important; border: 1px solid color-mix(in srgb, var(--accent-primary) 30%, transparent) !important; border-bottom: none !important;
  background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-dark-primary)) !important; }
:root body #view-admin #ctpl-editor > div:nth-child(3) > .ql-container { order: 2; border-radius: 0 0 14px 14px !important; border: 1px solid color-mix(in srgb, var(--accent-primary) 30%, transparent) !important;
  background: color-mix(in srgb, var(--ledare-varm) 65%, var(--bg-dark-primary)) !important; }
/* Kategoripills på korten: lika breda upp till en gräns (min 104, max 124), centrerad text, längre kapas med "…". */
:root body #view-admin #ctpl-list .ctpl-card-meta > * {
  display: inline-flex !important; justify-content: center !important; align-items: center !important;
  min-width: 104px !important; max-width: 124px !important; box-sizing: border-box !important;
  padding: 3px 10px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
}
:root body #view-admin #ctpl-list .ctpl-card-meta > * { width: 112px !important; min-width: 112px !important; max-width: 112px !important; }
/* Papperskorgen tydligare: större ikon, tjockare linje, i en mjuk röd cirkel. */
:root body #view-admin #ctpl-list .ctpl-item button.ctpl-delete-btn,
:root body #view-admin #ctpl-list .ctpl-item button {
  width: 38px !important; height: 38px !important; min-width: 38px !important; border-radius: 50% !important;
  background: color-mix(in srgb, #e5484d 12%, transparent) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
:root body #view-admin #ctpl-list .ctpl-item button svg { width: 20px !important; height: 20px !important; stroke-width: 2.2 !important; stroke: #c62a2f !important; }
/* Inställningsrader (.admin-config-row) — AI-motor, Systemkonfiguration m.fl.: mjuka kort, hjälptexten
   direkt under i samma kort-känsla, statuspill rund, lås/redigera som rund grön knapp. */
:root body #view-admin #admin-detail-content .detail-body > h4 {
  font-size: 12px !important; letter-spacing: 0.5px !important; margin: 18px 2px 8px !important; color: var(--accent-primary) !important;
  display: flex !important; align-items: center !important; gap: 6px !important;
}
:root body #view-admin #admin-detail-content .admin-config-row.admin-config-row {
  border: 1px solid color-mix(in srgb, var(--accent-primary) 18%, transparent) !important; border-radius: 16px 16px 4px 4px !important;
  background: color-mix(in srgb, var(--ledare-varm) 45%, var(--bg-dark-primary)) !important;
  box-shadow: 0 2px 8px -4px rgba(0,0,0,0.14) !important; padding: 12px 12px 12px 16px !important; margin: 0 !important;
  min-height: 0 !important; align-items: center !important; gap: 10px !important;
}
:root body #view-admin #admin-detail-content .admin-config-row + p {
  margin: 0 0 12px !important; padding: 8px 16px 12px !important; font-size: 12.5px !important; line-height: 1.45 !important;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 18%, transparent) !important; border-top: none !important; border-radius: 4px 4px 16px 16px !important;
  background: color-mix(in srgb, var(--ledare-varm) 30%, var(--bg-dark-primary)) !important; color: var(--text-secondary) !important;
}
:root body #view-admin #admin-detail-content .admin-config-row :is(label, .admin-config-label, span:first-child) { font-size: 13.5px !important; font-weight: 600 !important; letter-spacing: 0.2px !important; }
:root body #view-admin #admin-detail-content .admin-config-row .status-pill { border-radius: 999px !important; min-width: 52px !important; justify-content: center !important; }
:root body #view-admin #admin-detail-content .admin-config-row :is(.admin-lock-btn, .admin-edit-icon-btn, .admin-config-lock-icon-btn) {
  width: 40px !important; height: 40px !important; min-height: 40px !important; border-radius: 50% !important; border: none !important;
  background: var(--accent-primary) !important; color: #fff !important; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-primary) 30%, transparent) !important;
}
:root body #view-admin #admin-detail-content .admin-config-row :is(.admin-lock-btn, .admin-edit-icon-btn, .admin-config-lock-icon-btn) svg { stroke: #fff !important; }
:root body #view-admin #admin-detail-content .admin-config-test-btn { border-radius: 999px !important; }
:root body #view-admin #admin-detail-content .admin-config-row input.filter-input { border-radius: 12px !important; }
:root body #view-admin #admin-detail-content hr.admin-section-divider { border: none !important; height: 1px !important; margin: 18px 0 !important; background: color-mix(in srgb, var(--accent-primary) 18%, transparent) !important; }
:root body #view-admin #admin-detail-content .admin-config-section-heading { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; }
:root body #view-admin #admin-detail-content .admin-config-section-heading :is(.admin-lock-btn, .admin-config-lock-icon-btn, .admin-edit-icon-btn) {
  width: 40px !important; height: 40px !important; min-height: 40px !important; border-radius: 50% !important; border: none !important;
  background: var(--accent-primary) !important; color: #fff !important; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-primary) 30%, transparent) !important;
}
:root body #view-admin #admin-detail-content .admin-config-section-heading :is(.admin-lock-btn, .admin-config-lock-icon-btn, .admin-edit-icon-btn) svg { stroke: #fff !important; }
:root body #view-admin #admin-detail-content .chat-affects-badge.chat-affects-badge { border: none !important; border-radius: 50% !important; box-shadow: none !important;
  width: 26px !important; height: 26px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent) !important; }
:root body #view-admin #admin-detail-content .admin-config-section-heading + p { font-size: 13px !important; line-height: 1.45 !important; }
/* Kundchattens statusring vid "Chattens öppettider". */
:root body #view-admin #ledare-chatstatus { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; padding: 10px 14px; border-radius: 14px; font-size: 13.5px; font-weight: 600;
  background: color-mix(in srgb, var(--ledare-varm) 45%, var(--bg-dark-primary)); border: 1px solid color-mix(in srgb, var(--accent-primary) 18%, transparent); }
:root body #view-admin #ledare-chatstatus .lcs-ring { flex: 0 0 14px; width: 14px; height: 14px; border-radius: 50%; }
:root body #view-admin #ledare-chatstatus.is-online .lcs-ring { background: #2e8b57; box-shadow: 0 0 0 4px color-mix(in srgb, #2e8b57 22%, transparent); animation: lcsPuls 2s ease-in-out infinite; }
:root body #view-admin #ledare-chatstatus.is-offline .lcs-ring { background: transparent; border: 2.5px solid #c62a2f; box-sizing: border-box; }
:root body #view-admin #ledare-chatstatus.is-online { color: #1f6b43; }
:root body #view-admin #ledare-chatstatus.is-offline { color: #a32025; }
@keyframes lcsPuls { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, #2e8b57 25%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, #2e8b57 8%, transparent); } }
:root body #view-admin #admin-detail-content input[id^="chat-hours-open-"], :root body #view-admin #admin-detail-content input[id^="chat-hours-close-"] { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; text-align: center !important; padding: 0 4px !important; }
:root body #view-admin #admin-detail-content input[id^="chat-hours-open-"], :root body #view-admin #admin-detail-content input[id^="chat-hours-close-"] { height: 40px !important; min-height: 40px !important; border-radius: 12px !important; font-size: 15px !important; }
/* Statusrutan: obemannad = subtil röd ton, dämpad text; bemannad = subtil grön ton. */
:root body #view-admin #ledare-chatstatus.is-offline {
  background: linear-gradient(90deg, color-mix(in srgb, #e5484d 12%, var(--bg-dark-primary)), color-mix(in srgb, #e5484d 4%, var(--bg-dark-primary))) !important;
  border-color: color-mix(in srgb, #e5484d 22%, transparent) !important;
  color: color-mix(in srgb, #a32025 60%, var(--text-primary)) !important; font-weight: 600 !important;
}
:root body #view-admin #ledare-chatstatus.is-offline .lcs-ring { border-color: color-mix(in srgb, #c62a2f 75%, transparent) !important; }
:root body #view-admin #ledare-chatstatus.is-online {
  background: linear-gradient(90deg, color-mix(in srgb, #2e8b57 12%, var(--bg-dark-primary)), color-mix(in srgb, #2e8b57 4%, var(--bg-dark-primary))) !important;
  border-color: color-mix(in srgb, #2e8b57 22%, transparent) !important;
  color: color-mix(in srgb, #1f6b43 70%, var(--text-primary)) !important;
}
/* Inställningsrader med PÅ/AV: tonen följer läget — PÅ = svag grön, AV = svag röd (gäller alla växlar). */
:root body #view-admin #admin-detail-content .admin-config-row.admin-config-row:has(.status-pill.is-active) {
  background: linear-gradient(90deg, color-mix(in srgb, #2e8b57 10%, var(--bg-dark-primary)), color-mix(in srgb, #2e8b57 3%, var(--bg-dark-primary))) !important;
  border-color: color-mix(in srgb, #2e8b57 22%, transparent) !important;
}
:root body #view-admin #admin-detail-content .admin-config-row.admin-config-row:has(.status-pill:is(.is-inactive, .is-off)),
:root body #view-admin #admin-detail-content .admin-config-row.admin-config-row:has(.status-pill):not(:has(.status-pill.is-active)) {
  background: linear-gradient(90deg, color-mix(in srgb, #e5484d 10%, var(--bg-dark-primary)), color-mix(in srgb, #e5484d 3%, var(--bg-dark-primary))) !important;
  border-color: color-mix(in srgb, #e5484d 22%, transparent) !important;
}
:root body #view-admin #admin-detail-content .admin-config-row:has(.status-pill.is-active) .status-pill { background: color-mix(in srgb, #2e8b57 16%, transparent) !important; color: #1f6b43 !important; border-color: color-mix(in srgb, #2e8b57 30%, transparent) !important; }
:root body #view-admin #admin-detail-content .admin-config-row:has(.status-pill):not(:has(.status-pill.is-active)) .status-pill { background: color-mix(in srgb, #e5484d 14%, transparent) !important; color: #8e2a2e !important; border-color: color-mix(in srgb, #e5484d 30%, transparent) !important; }
:root body #view-admin #admin-detail-content .admin-config-row.admin-config-row.admin-config-row:has(.status-pill.is-active) {
  background: linear-gradient(90deg, color-mix(in srgb, #2e8b57 16%, var(--bg-dark-primary)), color-mix(in srgb, #2e8b57 5%, var(--bg-dark-primary))) !important;
}
:root body #view-admin #admin-detail-content .admin-config-row.admin-config-row.admin-config-row:has(.status-pill):not(:has(.status-pill.is-active)) {
  background: linear-gradient(90deg, color-mix(in srgb, #e5484d 15%, var(--bg-dark-primary)), color-mix(in srgb, #e5484d 5%, var(--bg-dark-primary))) !important;
}
/* "Visa meddelande när chatten är stängd" följer chattens läge JUST NU (som statusrutan):
   stängd = röd ton, öppen = grön ton. Sätts av test-chatstatus.js via html-klass. */
:root.ledare-chat-stangd body #view-admin #admin-detail-content .admin-config-row.admin-config-row.admin-config-row.admin-config-row:has(#chat-hours-enabled) {
  background: linear-gradient(90deg, color-mix(in srgb, #e5484d 15%, var(--bg-dark-primary)), color-mix(in srgb, #e5484d 5%, var(--bg-dark-primary))) !important;
  border-color: color-mix(in srgb, #e5484d 22%, transparent) !important;
}
:root.ledare-chat-oppen body #view-admin #admin-detail-content .admin-config-row.admin-config-row.admin-config-row.admin-config-row:has(#chat-hours-enabled) {
  background: linear-gradient(90deg, color-mix(in srgb, #2e8b57 16%, var(--bg-dark-primary)), color-mix(in srgb, #2e8b57 5%, var(--bg-dark-primary))) !important;
  border-color: color-mix(in srgb, #2e8b57 22%, transparent) !important;
}
/* PÅ/AV-pillen tydlig även i låst läge (var tonad 0.6): PÅ = fylld grön, AV = röd ton. Låst syns på låset. */
:root body #view-admin #admin-detail-content .admin-config-row .status-pill.status-pill { opacity: 1 !important; font-weight: 700 !important; }
:root body #view-admin #admin-detail-content .admin-config-row .status-pill.status-pill.is-active {
  background: #2e8b57 !important; color: #fff !important; border-color: #2e8b57 !important;
  box-shadow: 0 2px 6px color-mix(in srgb, #2e8b57 30%, transparent) !important;
}
:root body #view-admin #admin-detail-content .admin-config-row .status-pill.status-pill:not(.is-active) {
  background: color-mix(in srgb, #e5484d 16%, var(--bg-dark-primary)) !important; color: #8e2a2e !important; border-color: color-mix(in srgb, #e5484d 35%, transparent) !important;
}
:root body #view-admin #admin-detail-content .admin-config-row :is(.status-pill.status-pill, .admin-toggle-hover-wrap) { filter: none !important; }
:root body #view-admin #admin-detail-content .admin-config-row .status-pill.status-pill.is-active.is-active {
  background: color-mix(in srgb, #2e8b57 78%, var(--bg-dark-primary)) !important; border-color: color-mix(in srgb, #2e8b57 78%, var(--bg-dark-primary)) !important;
  box-shadow: 0 1px 4px color-mix(in srgb, #2e8b57 20%, transparent) !important;
}
/* AI-prislistan: panelen som ö, tabellen som kort — funktion + modell överst, kostnaderna som två små pills. */
:root body #view-admin #ai-price-info-panel { border-radius: 20px !important; border: 1px solid color-mix(in srgb, var(--accent-primary) 20%, transparent) !important;
  background: color-mix(in srgb, var(--ledare-varm) 45%, var(--bg-dark-primary)) !important; box-shadow: 0 4px 14px rgba(0,0,0,0.08) !important; padding: 14px !important; overflow: hidden !important; }
:root body #view-admin #ai-price-info-panel table { display: block !important; width: 100% !important; border: none !important; }
:root body #view-admin #ai-price-info-panel thead, :root body #view-admin #ai-price-info-panel tr:has(> th) { display: none !important; }
:root body #view-admin #ai-price-info-panel tbody { display: flex !important; flex-direction: column !important; gap: 8px !important; }
:root body #view-admin #ai-price-info-panel tbody tr {
  display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; grid-template-areas: "fn kost" "mod kost" !important;
  gap: 4px 10px !important; align-items: center !important; padding: 10px 12px !important; border-radius: 14px !important;
  background: color-mix(in srgb, var(--accent-primary) 7%, var(--bg-dark-primary)) !important; border: none !important;
}
:root body #view-admin #ai-price-info-panel tbody td { display: block !important; padding: 0 !important; border: none !important; background: none !important; width: auto !important; }
:root body #view-admin #ai-price-info-panel tbody td:nth-child(1) { grid-area: fn; font-weight: 600 !important; font-size: 14px !important; }
:root body #view-admin #ai-price-info-panel tbody td:nth-child(2) { grid-area: mod; }
:root body #view-admin #ai-price-info-panel tbody td:nth-child(3), :root body #view-admin #ai-price-info-panel tbody td:nth-child(4) {
  grid-area: kost; justify-self: end; font-size: 12.5px !important; font-family: inherit !important; white-space: nowrap !important;
}
:root body #view-admin #ai-price-info-panel tbody td:nth-child(3) { align-self: start; font-weight: 700 !important; }
:root body #view-admin #ai-price-info-panel tbody td:nth-child(4) { align-self: end; color: var(--text-secondary) !important; }
:root body #view-admin #ai-price-info-panel tbody td:nth-child(3)::after { content: " / anrop"; font-weight: 400; color: var(--text-secondary); }
:root body #view-admin #ai-price-info-panel tbody td:nth-child(4)::after { content: " / 10"; }
:root body #view-admin #ai-price-info-panel tbody td[data-label]::before { display: none !important; }
/* Kunskapsbank: CTA-rutan mjuk utan hård kant; återställ-knappen rund. */
:root body #view-admin #admin-detail-content .kb-guide-cta { border: none !important; border-radius: 16px !important; background: color-mix(in srgb, var(--ledare-varm) 50%, var(--bg-dark-primary)) !important; box-shadow: 0 2px 8px -3px rgba(0,0,0,0.12) !important; }
:root body #view-admin #admin-detail-content :is(.kb-guide-empty-state, .kb-guide-flow, .kb-guide-grid > *) { border-radius: 20px !important; }
:root body #view-admin #admin-detail-content .kb-guide-empty-state button { width: 44px !important; height: 44px !important; border-radius: 50% !important; border: none !important;
  background: color-mix(in srgb, var(--accent-primary) 16%, transparent) !important; color: var(--accent-primary) !important; }
:root body #view-admin #admin-detail-content .kb-guide-empty-state :is(.chip, span[class*="chip"], div[class*="pill"], li) { border-radius: 999px !important; }
/* Kunskapsbankens guidekort: mjuka varmvita kort utan hård kant, rubriken med accent, punkterna som bockrader. */
:root body #view-admin #admin-detail-content .kb-guide-grid { display: flex !important; flex-direction: column !important; gap: 12px !important; }
:root body #view-admin #admin-detail-content .kb-guide-card.kb-guide-card, :root body #view-admin #admin-detail-content .kb-guide-flow.kb-guide-flow {
  border: none !important; border-radius: 20px !important; padding: 16px !important; margin: 0 !important;
  background: color-mix(in srgb, var(--ledare-varm) 45%, var(--bg-dark-primary)) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 6px 16px -6px rgba(0,0,0,0.14) !important;
}
:root body #view-admin #admin-detail-content .kb-guide-card :is(h3, h4) { font-size: 16px !important; margin: 4px 0 8px !important; }
:root body #view-admin #admin-detail-content .kb-guide-card p { font-size: 13.5px !important; line-height: 1.5 !important; }
:root body #view-admin #admin-detail-content .kb-guide-card ul { list-style: none !important; padding: 0 !important; margin: 10px 0 0 !important; display: flex !important; flex-direction: column !important; gap: 6px !important; }
:root body #view-admin #admin-detail-content .kb-guide-card li {
  position: relative !important; padding: 8px 12px 8px 34px !important; border-radius: 12px !important; font-size: 13.5px !important; line-height: 1.45 !important;
  background: color-mix(in srgb, var(--accent-primary) 7%, transparent) !important;
}
:root body #view-admin #admin-detail-content .kb-guide-card li::before {
  content: "" !important; position: absolute !important; left: 12px !important; top: 12px !important; width: 12px !important; height: 7px !important;
  border-left: 2.2px solid var(--accent-primary) !important; border-bottom: 2.2px solid var(--accent-primary) !important; transform: rotate(-45deg) !important; background: none !important;
}
/* Knappen "Öppna Kunskapsimport" → tydlig primärknapp i full bredd med pil. */
:root body #view-admin #admin-detail-content .kb-guide-action.kb-guide-action {
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
  width: 100% !important; min-height: 46px !important; margin-top: 12px !important; border-radius: 999px !important; border: none !important;
  background: var(--accent-primary) !important; color: #fff !important; font-weight: 700 !important; font-size: 14.5px !important;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--accent-primary) 35%, transparent) !important;
}
:root body #view-admin #admin-detail-content .kb-guide-action.kb-guide-action::after { content: "›"; font-size: 20px; line-height: 1; margin-top: -2px; }
:root body #view-admin #admin-detail-content .kb-guide-flow :is(h3, h4, strong) { color: var(--accent-primary) !important; }
/* Guide-hjälten överst (stora beskrivningen) = eget varmvitt lyft kort, som guidekorten. */
:root body #view-admin #admin-detail-content .kb-guide-hero.kb-guide-hero.kb-guide-hero {
  background: color-mix(in srgb, var(--ledare-varm) 45%, var(--bg-dark-primary)) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 6px 16px -6px rgba(0,0,0,0.14) !important;
  padding: 16px !important;
}
/* Kunskapsbankens sektioner (ämnesfil öppen): varje sektion ett varmvitt lyft kort; rubriken som stor rubrikrad;
   snabbfrågeblocket som tonad ruta; svaret som riktigt textfält; sökorden som mjuka pills. */
:root body #view-admin .admin-kb-section-card.admin-kb-section-card {
  border: none !important; border-radius: 20px !important; padding: 14px !important; margin: 0 0 14px !important;
  background: color-mix(in srgb, var(--ledare-varm) 45%, var(--bg-dark-primary)) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 6px 16px -6px rgba(0,0,0,0.14) !important;
}
:root body #view-admin .admin-kb-section-card .admin-kb-title-field {
  border: none !important; background: transparent !important; box-shadow: none !important; padding: 2px 4px !important;
  font-size: 16.5px !important; font-weight: 700 !important; color: var(--text-primary) !important; min-height: 0 !important;
  border-bottom: 1.5px dashed color-mix(in srgb, var(--accent-primary) 30%, transparent) !important; border-radius: 0 !important;
}
:root body #view-admin .admin-kb-section-card .kb-quick-question-tools {
  margin: 10px 0 !important; padding: 10px 12px !important; border-radius: 14px !important;
  background: color-mix(in srgb, var(--accent-primary) 8%, transparent) !important; border: none !important;
}
:root body #view-admin .admin-kb-section-card .kb-quick-question-tools :is(input, .filter-input) { border-radius: 12px !important; background: color-mix(in srgb, var(--ledare-varm) 65%, var(--bg-dark-primary)) !important; }
:root body #view-admin .admin-kb-section-card .kb-quick-question-help { font-size: 12px !important; color: var(--text-secondary) !important; line-height: 1.4 !important; }
:root body #view-admin .admin-kb-section-card .admin-kb-answer-field {
  border-radius: 14px !important; border: 1px solid color-mix(in srgb, var(--accent-primary) 28%, transparent) !important;
  background: color-mix(in srgb, var(--ledare-varm) 65%, var(--bg-dark-primary)) !important; color: var(--text-primary) !important; font-size: 14.5px !important;
}
:root body #view-admin .admin-kb-section-card .admin-kb-keywords { gap: 6px !important; }
:root body #view-admin .admin-kb-section-card .kw-pill.kw-pill {
  border: none !important; border-radius: 999px !important; padding: 4px 11px !important; font-size: 12px !important;
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent) !important; color: color-mix(in srgb, var(--accent-primary) 70%, var(--text-primary)) !important;
}
:root body #view-admin .admin-kb-section-card :is(.kb-quick-question-primary, .admin-kb-section-head-actions) .status-pill,
:root body #view-admin .admin-kb-section-card :is(.kb-quick-question-primary, .admin-kb-section-head-actions) [class*="pill"] { border-radius: 999px !important; }
/* Sektionens pills (standardmall, snabbfråga) runda; sökorden mindre så de tar mindre plats. */
:root body #view-admin .admin-kb-section-card .admin-kb-section-head-actions > *, :root body #view-admin .admin-kb-section-card .kb-quick-question-primary > span { border-radius: 999px !important; }
:root body #view-admin .admin-kb-section-card .kw-pill.kw-pill { padding: 3px 10px !important; font-size: 11.5px !important; }
/* Sektionshuvudets knappar: + och lås tydliga runda knappar (+ i accentton, lås fylld grön). */
:root body #view-admin .admin-kb-section-card .admin-kb-section-head-actions { display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; }
:root body #view-admin .admin-kb-section-card .admin-kb-section-head-actions > button.admin-config-icon-btn:not(.admin-lock-btn) {
  width: 38px !important; height: 38px !important; min-height: 38px !important; border-radius: 50% !important; border: none !important;
  background: color-mix(in srgb, var(--accent-primary) 18%, transparent) !important; color: var(--accent-primary) !important;
}
:root body #view-admin .admin-kb-section-card .admin-kb-section-head-actions > button.admin-config-icon-btn:not(.admin-lock-btn) svg { stroke: var(--accent-primary) !important; width: 20px !important; height: 20px !important; stroke-width: 2.4 !important; }
:root body #view-admin .admin-kb-section-card .admin-kb-section-head-actions > .admin-lock-btn {
  width: 38px !important; height: 38px !important; min-height: 38px !important; border-radius: 50% !important; border: none !important;
  background: var(--accent-primary) !important; color: #fff !important; margin-left: auto !important;
}
:root body #view-admin .admin-kb-section-card .admin-kb-section-head-actions > .admin-lock-btn svg { stroke: #fff !important; }
/* Snabbfrågeblocket: rubrik ......... spara (uppe till höger); fältet i full bredd med radera till höger. */
:root body #view-admin .admin-kb-section-card .kb-quick-question-primary { position: relative !important; display: block !important; }
:root body #view-admin .admin-kb-section-card .kb-quick-question-label-editor {
  display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; grid-template-areas: "rub spara" "falt radera" !important;
  gap: 8px 8px !important; align-items: center !important; width: 100% !important; margin: 0 !important;
}
:root body #view-admin .admin-kb-section-card .kb-quick-question-label-editor > span { grid-area: rub; font-weight: 700 !important; }
:root body #view-admin .admin-kb-section-card .kb-quick-question-label-editor > input { grid-area: falt; width: 100% !important; min-width: 0 !important; }
:root body #view-admin .admin-kb-section-card .kb-quick-question-label-editor > button {
  grid-area: spara; width: 38px !important; height: 38px !important; min-height: 38px !important; border-radius: 50% !important; border: none !important;
  background: var(--accent-primary) !important; color: #fff !important; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-primary) 30%, transparent) !important;
}
:root body #view-admin .admin-kb-section-card .kb-quick-question-label-editor > button svg { stroke: #fff !important; }
:root body #view-admin .admin-kb-section-card .kb-quick-question-primary > button.danger {
  position: absolute !important; right: 0 !important; bottom: 2px !important; width: 38px !important; height: 38px !important; min-height: 38px !important;
  border-radius: 50% !important; border: none !important; background: color-mix(in srgb, #e5484d 12%, transparent) !important; margin: 0 !important;
}
:root body #view-admin .admin-kb-section-card .kb-quick-question-primary > button.danger svg { stroke: #c62a2f !important; }
:root body #view-admin .admin-kb-section-card .kb-quick-question-label-editor > input { height: 40px !important; min-height: 40px !important; }
:root body #view-admin .admin-kb-section-card .kb-quick-question-label-editor { grid-template-rows: 38px 40px !important; }
:root body #view-admin .admin-kb-section-card .kb-quick-question-primary > button.danger.danger { top: 46px !important; bottom: auto !important; width: 40px !important; height: 40px !important; min-height: 40px !important; }
/* Snabbfrågans spara-knapp: tydligt avstängd tills formuleringen ändrats (annars ser den aktiv ut men gör inget). */
:root body #view-admin .admin-kb-section-card .kb-quick-question-label-editor > button:disabled {
  background: color-mix(in srgb, var(--accent-primary) 14%, transparent) !important; box-shadow: none !important; opacity: 0.55 !important; cursor: default !important;
}
:root body #view-admin .admin-kb-section-card .kb-quick-question-label-editor > button:disabled svg { stroke: var(--accent-primary) !important; }
/* Filens diskett i huvudet: syns bara när något är ändrat (.dirty) — då samma gröna rund som övriga. */
:root body #view-admin #kb-global-save-btn:not(.dirty) { display: none !important; }
:root body #view-admin #kb-global-save-btn.dirty {
  width: 40px !important; height: 40px !important; border-radius: 50% !important; border: none !important;
  background: var(--accent-primary) !important; color: #fff !important; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-primary) 30%, transparent) !important;
}
:root body #view-admin #kb-global-save-btn.dirty svg { stroke: #fff !important; }
/* Patrik: markering på VARJE SEKTIONS rubrik — rubrikraden som tonad accentlist överst i kortet. */
:root body #view-admin .admin-kb-section-card.admin-kb-section-card { padding-top: 0 !important; overflow: hidden !important; }
:root body #view-admin .admin-kb-section-card .admin-kb-section-head {
  margin: 0 -14px 12px !important; padding: 12px 14px 10px !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-primary) 22%, var(--bg-dark-primary)), color-mix(in srgb, var(--accent-primary) 8%, var(--bg-dark-primary))) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-primary) 25%, transparent) !important;
  box-shadow: inset 4px 0 0 var(--accent-primary) !important;
}
:root body #view-admin .admin-kb-section-card .admin-kb-title-field.admin-kb-title-field {
  color: color-mix(in srgb, var(--accent-primary) 70%, #000) !important;
  border-bottom-color: color-mix(in srgb, var(--accent-primary) 40%, transparent) !important;
}
/* Sektionsrubriken v2: blandning av agentfärg + grön, mjuk övergång (ingen hård kant). */
:root body #view-admin .admin-kb-section-card .admin-kb-section-head.admin-kb-section-head {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--min-agentfarg, var(--accent-primary)) 14%, color-mix(in srgb, var(--accent-primary) 12%, var(--bg-dark-primary))) 0%,
    color-mix(in srgb, var(--accent-primary) 6%, var(--bg-dark-primary)) 100%) !important;
  border-bottom: none !important;
  box-shadow: inset 4px 0 0 color-mix(in srgb, var(--min-agentfarg, var(--accent-primary)) 55%, var(--accent-primary)) !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 10px), rgba(0,0,0,0.0)); mask-image: linear-gradient(to bottom, #000 calc(100% - 10px), rgba(0,0,0,0.0));
  padding-bottom: 16px !important; margin-bottom: 4px !important;
}
:root body #view-admin .admin-kb-section-card .admin-kb-section-head.admin-kb-section-head.admin-kb-section-head { box-shadow: none !important; }
/* Kunskapsluckor: korten (.gap-card) som mjuka varmvita kort utan hård kant/vänsterlist; pills runda;
   AI-knappen rund i accentton; datum dämpat; tät rad. Huvud-ön i den här vyn: utan vänsterlist som övriga. */
:root body #view-admin #gaps-card-list .gap-card.gap-card {
  border: none !important; border-image: none !important; border-radius: 16px !important;
  background: color-mix(in srgb, var(--ledare-varm) 40%, var(--bg-dark-primary)) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 4px 10px -4px rgba(0,0,0,0.14) !important;
  margin: 0 0 8px !important; padding: 12px 12px 12px 14px !important; transform: none !important;
}
:root body #view-admin #gaps-card-list .gap-card .gap-card-query { font-size: 14.5px !important; font-weight: 600 !important; }
:root body #view-admin #gaps-card-list .gap-card .gap-card-meta { display: flex !important; align-items: center !important; gap: 8px !important; margin-top: 8px !important; }
:root body #view-admin #gaps-card-list .gap-card .gap-status-pill { border-radius: 999px !important; border: none !important; padding: 2px 9px !important;
  background: color-mix(in srgb, var(--accent-primary) 14%, transparent) !important; }
:root body #view-admin #gaps-card-list .gap-card .gap-status-pill.is-repeat { background: color-mix(in srgb, #b8862b 18%, transparent) !important; color: color-mix(in srgb, #b8862b 80%, #000) !important; }
:root body #view-admin #gaps-card-list .gap-card .gap-card-date { font-size: 12px !important; color: var(--text-secondary) !important; }
:root body #view-admin #gaps-card-list .gap-card .gap-ai-btn { margin-left: auto !important; width: 38px !important; height: 38px !important; border-radius: 50% !important; border: none !important;
  background: color-mix(in srgb, var(--accent-primary) 16%, transparent) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
:root body #view-admin #gaps-card-list .gap-card > :last-child:empty, :root body #view-admin #gaps-card-list .gap-card hr { display: none !important; }
:root body #view-admin #admin-detail-content .detail-body > div:first-child[style*="gradient"] { border-left-width: 1px !important; }
/* Kunskapsluckor-huvudet (ligger utanför .detail-body, egen inline-gradient + 3px vänsterkant): samma ö som övriga. */
:root body #view-admin #admin-detail-content .detail-container > div:not(.detail-body) > div[style*="gradient"],
:root body #view-admin #admin-detail-content .detail-container > div > div[style*="border-left"] {
  border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, transparent) !important; border-radius: 20px !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-primary) 16%, var(--bg-dark-primary)), color-mix(in srgb, var(--accent-primary) 6%, var(--bg-dark-primary))) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.10) !important; margin: 0 0 12px !important;
}
/* Infolådan (förklaring + teckenförklaring): mjuk varmvit ö, ingen hård kant; statistikraden får mellanrum. */
:root body #view-admin #admin-detail-content .detail-body > div[style*="margin:0 20px"] {
  margin: 0 0 12px !important; border: none !important; border-radius: 16px !important; padding: 12px 14px !important;
  background: color-mix(in srgb, var(--ledare-varm) 35%, var(--bg-dark-primary)) !important;
}
:root body #view-admin #admin-detail-content .detail-body > div[style*="margin:0 20px"] div[style*="display:flex"],
:root body #view-admin #admin-detail-content .detail-body > div[style*="margin:0 20px"] div[style*="display: flex"] { gap: 8px !important; flex-wrap: wrap !important; }
:root body #view-admin #admin-detail-content .detail-body > div[style*="margin:0 20px"] span[style*="border"] { border-radius: 999px !important; }
:root body #view-admin #gaps-card-list .gap-card.gap-card { border-bottom: none !important; }
:root body #view-admin #gaps-card-list .gap-card .gap-suggestion-panel:empty { display: none !important; border: none !important; }
:root body #view-admin #gaps-card-list .gap-card .gap-card-topline { border: none !important; padding-bottom: 0 !important; }
/* Rapporter: en kolumn, mjuka varmvita kort, ikonen i rund ton, kostnadsmärke ("AI · ~21 öre") så man ser att det kostar. */
:root body #view-admin #admin-detail-content div:has(> .report-preset-btn) { grid-template-columns: 1fr !important; gap: 8px !important; }
:root body #view-admin #admin-detail-content .report-preset-btn.report-preset-btn {
  display: grid !important; grid-template-columns: 44px minmax(0,1fr) !important; align-items: center !important; gap: 12px !important;
  text-align: left !important; min-height: 64px !important; padding: 12px 40px 12px 12px !important; position: relative !important;
  border: none !important; border-radius: 16px !important;
  background: color-mix(in srgb, var(--ledare-varm) 40%, var(--bg-dark-primary)) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 4px 10px -4px rgba(0,0,0,0.14) !important;
}
:root body #view-admin #admin-detail-content .report-preset-btn > span:first-child {
  width: 44px !important; height: 44px !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
  background: color-mix(in srgb, var(--accent-primary) 14%, transparent) !important; font-size: 20px !important;
}
:root body #view-admin #admin-detail-content .report-preset-btn::after {
  content: "AI"; position: absolute; top: 10px; right: 10px; font-size: 10px; font-weight: 800; letter-spacing: 0.5px;
  padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, #b8862b 18%, transparent); color: color-mix(in srgb, #b8862b 80%, #000);
}
:root body #view-admin #admin-detail-content .report-action-btn.report-action-btn {
  width: 100% !important; min-height: 46px !important; border-radius: 999px !important; border: none !important;
  background: var(--accent-primary) !important; color: #fff !important; font-weight: 700 !important;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--accent-primary) 35%, transparent) !important;
}
:root body #view-admin #admin-detail-content div:has(> .report-preset-btn) ~ div[style*="border"],
:root body #view-admin #admin-detail-content div[style*="Exempelfrågor"] { border-radius: 16px !important; }
/* Inställningsfält (låsta/öppna) i admin-config-row: läsbara riktiga fält i varmvit, ingen gråton när låsta. */
:root body #view-admin #admin-detail-content .admin-config-row :is(input.admin-config-field, input.filter-input, select.admin-config-field, textarea.admin-config-field) {
  background: color-mix(in srgb, var(--ledare-varm) 70%, var(--bg-dark-primary)) !important; opacity: 1 !important;
  color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 28%, transparent) !important; border-radius: 12px !important; min-height: 42px !important;
}
:root body #view-admin #admin-detail-content .admin-config-row :is(input, select, textarea):disabled { cursor: default !important; }
/* Logotyp: stor förhandsvisning överst i kortet, URL-fältet i full bredd, knapparna (ladda upp, rensa, lås) som runda i en rad. */
:root body #view-admin .drift-logo-url-row .drift-logo-url-line {
  display: grid !important; grid-template-columns: minmax(0,1fr) auto auto auto !important;
  grid-template-areas: "bild bild bild bild" "url url url url" "tom upp rensa las" !important; gap: 10px 8px !important; align-items: center !important;
}
:root body #view-admin .drift-logo-url-row .drift-logo-url-line > input { grid-area: url; width: 100% !important; min-width: 0 !important; font-size: 13px !important; }
:root body #view-admin .drift-logo-url-row .drift-logo-actions { display: contents !important; }
:root body #view-admin .drift-logo-url-row #tenant-logo-preview {
  grid-area: bild; width: 100% !important; height: 96px !important; border-radius: 16px !important; border: 1px dashed color-mix(in srgb, var(--accent-primary) 35%, transparent) !important;
  background-color: color-mix(in srgb, var(--ledare-varm) 80%, var(--bg-dark-primary)) !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important;
  display: flex !important; align-items: center !important; justify-content: center !important; padding: 10px !important; box-sizing: border-box !important;
}
:root body #view-admin .drift-logo-url-row #tenant-logo-preview img { max-height: 76px !important; max-width: 100% !important; object-fit: contain !important; }
:root body #view-admin .drift-logo-url-row .drift-logo-compact-btn:nth-of-type(1), :root body #view-admin .drift-logo-url-row button[title="Ladda upp logotyp"] { grid-area: upp; }
:root body #view-admin .drift-logo-url-row button[title="Rensa logotyp"] { grid-area: rensa; }
:root body #view-admin .drift-logo-url-row :is(#drift-lock-company-logo-url, #drift-save-company-logo-url) { grid-area: las; }
:root body #view-admin .drift-logo-url-row #drift-cancel-company-logo-url { grid-area: tom; justify-self: end; }
:root body #view-admin .drift-logo-url-row :is(button[title="Ladda upp logotyp"], button[title="Rensa logotyp"]) {
  width: 40px !important; height: 40px !important; min-height: 40px !important; border-radius: 50% !important; border: none !important; padding: 0 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  background: color-mix(in srgb, var(--accent-primary) 14%, transparent) !important; color: var(--accent-primary) !important;
}
:root body #view-admin .drift-logo-url-row button[title="Rensa logotyp"] { background: color-mix(in srgb, #e5484d 12%, transparent) !important; color: #c62a2f !important; }
:root body #view-admin .drift-logo-url-row button[title="Rensa logotyp"] svg { stroke: #c62a2f !important; }
/* Varningsrutan: mjuk röd ton, dämpad text, rundad, ingen hård kant. */
:root body #view-admin #admin-detail-content div[style*="color:#ff6b6b"] {
  border: none !important; border-radius: 16px !important; padding: 12px 14px !important; margin: 0 0 14px !important;
  background: linear-gradient(90deg, color-mix(in srgb, #e5484d 12%, var(--bg-dark-primary)), color-mix(in srgb, #e5484d 4%, var(--bg-dark-primary))) !important;
  color: color-mix(in srgb, #a32025 60%, var(--text-primary)) !important; font-size: 12.5px !important; line-height: 1.45 !important;
}
:root body #view-admin .drift-logo-url-row #tenant-logo-preview#tenant-logo-preview { background-color: color-mix(in srgb, var(--accent-primary) 55%, #10261b) !important; border: none !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08) !important; }
/* Logotyp v2: lås/spara/avbryt i kortets övre högra hörn; förklaringen direkt under URL-fältet; ladda upp + rensa
   i en rad under förklaringen (vänsterställda). */
:root body #view-admin .drift-logo-url-row.drift-logo-url-row { position: relative !important; display: flex !important; flex-direction: column !important; }
:root body #view-admin .drift-logo-url-row > label { order: 0; padding-right: 100px !important; }
:root body #view-admin .drift-logo-url-row > .drift-logo-url-line { order: 1; }
:root body #view-admin .drift-logo-url-row > p { order: 2; margin: 6px 2px 0 !important; }
:root body #view-admin .drift-logo-url-row .drift-logo-url-line.drift-logo-url-line {
  grid-template-columns: auto auto minmax(0,1fr) !important; grid-template-areas: "bild bild bild" "url url url" "upp rensa ." !important;
}
:root body #view-admin .drift-logo-url-row .drift-logo-url-line > input { order: 0; }
:root body #view-admin .drift-logo-url-row :is(#drift-lock-company-logo-url, #drift-save-company-logo-url, #drift-cancel-company-logo-url) {
  position: absolute !important; top: 10px !important; right: 12px !important;
}
:root body #view-admin .drift-logo-url-row #drift-cancel-company-logo-url { right: 58px !important; }
/* Upp/rensa hamnar under förklaringen: flytta förklaringen före knappraden i griden. */
:root body #view-admin .drift-logo-url-row .drift-logo-url-line { grid-template-areas: "bild bild bild" "url url url" "hjalp hjalp hjalp" "upp rensa ." !important; }
:root body #view-admin .drift-logo-url-row .drift-logo-url-line.drift-logo-url-line.drift-logo-url-line {
  grid-template-columns: 40px 40px minmax(0,1fr) !important;
  grid-template-areas: "bild bild bild" "url url url" "hjalp hjalp hjalp" "upp rensa ." !important;
}
:root body #view-admin .drift-logo-url-row > label { text-align: left !important; align-self: flex-start !important; }
:root body #view-admin .drift-logo-url-row .drift-logo-url-line > p { margin: 0 2px !important; font-size: 12.5px !important; color: var(--text-secondary) !important; line-height: 1.4 !important; }
:root body #view-admin .drift-logo-url-row > label { min-height: 40px !important; display: flex !important; align-items: center !important; margin-bottom: 6px !important; }
:root body #view-admin .drift-logo-url-row .drift-logo-url-line.drift-logo-url-line.drift-logo-url-line.drift-logo-url-line {
  grid-template-columns: minmax(0,1fr) 40px 40px !important;
  grid-template-areas: "bild bild bild" "url url url" "hjalp hjalp hjalp" ". upp rensa" !important;
}
/* Låsta fält (temat tonar dem gröngrå med hög specificitet): varmvita läsbara fält överallt i admin. */
:root body #view-admin #admin-detail-content :is(input, select, textarea).admin-config-field:is(:disabled, [readonly]) {
  background: color-mix(in srgb, var(--ledare-varm) 70%, var(--bg-dark-primary)) !important;
  color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important; opacity: 1 !important;
}
/* Leverantörsraden: väljaren i full bredd, förklaringen under. */
:root body #view-admin #admin-detail-content .admin-config-row:has(> select.admin-config-field) { flex-wrap: wrap !important; }
:root body #view-admin #admin-detail-content .admin-config-row > select.admin-config-field { flex: 1 1 100% !important; width: 100% !important; }
:root body #view-admin #admin-detail-content .admin-config-row:has(> select.admin-config-field) > span { flex: 1 1 100% !important; font-size: 12.5px !important; color: var(--text-secondary) !important; }
/* Varningsnoter (.admin-note-warning): mjuk gul ton, ingen kant, rundad. */
:root body #view-admin #admin-detail-content .admin-note.admin-note-warning {
  border: none !important; border-radius: 16px !important; padding: 12px 14px !important; margin: 0 0 14px !important;
  background: linear-gradient(90deg, color-mix(in srgb, #d4a017 16%, var(--bg-dark-primary)), color-mix(in srgb, #d4a017 5%, var(--bg-dark-primary))) !important;
  color: color-mix(in srgb, #8a5a00 70%, var(--text-primary)) !important; font-size: 12.5px !important;
}
:root body #view-admin #admin-detail-content .admin-config-row.admin-config-row:has(> select.admin-config-field) {
  display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important;
}
:root body #view-admin #admin-detail-content .admin-config-row:has(> select.admin-config-field) > select.admin-config-field { max-width: none !important; width: 100% !important; }
/* Select som blivit appens lista: ser ut som ett fält (full bredd i adminrader). */
:root body .atlas-filter-dd.ledare-select-dd {
  width: 100% !important; min-height: 44px !important; border-radius: 12px !important; justify-content: space-between !important;
  padding: 0 14px !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 14.5px !important; font-weight: 500 !important;
  background: color-mix(in srgb, var(--ledare-varm) 70%, var(--bg-dark-primary)) !important; color: var(--text-primary) !important;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 30%, transparent) !important;
}
:root body .atlas-filter-dd.ledare-select-dd.is-locked { opacity: 0.75 !important; }
/* Spärrlistan (#spam-blocklist-wrap): mjuka rader, vanlig text i st.f. maskinskrift, rött kryss i rund ljusröd knapp;
   "+ Lägg till" som rund grön knapp. */
:root body #view-admin #spam-blocklist-wrap > div {
  border: none !important; border-radius: 14px !important; padding: 10px 8px 10px 14px !important; margin: 0 0 6px !important;
  background: color-mix(in srgb, var(--ledare-varm) 40%, var(--bg-dark-primary)) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
:root body #view-admin #spam-blocklist-wrap > div > span { font-family: inherit !important; font-size: 13.5px !important; overflow-wrap: anywhere !important; }
:root body #view-admin #spam-blocklist-wrap > div > span:nth-child(3) { font-size: 11.5px !important; color: var(--text-secondary) !important; padding: 2px 8px !important; border-radius: 999px !important; background: color-mix(in srgb, var(--accent-primary) 10%, transparent) !important; }
:root body #view-admin #spam-blocklist-wrap > div > button {
  width: 36px !important; height: 36px !important; min-width: 36px !important; border-radius: 50% !important; border: none !important; padding: 0 !important;
  background: color-mix(in srgb, #e5484d 12%, transparent) !important; color: #c62a2f !important;
}
:root body #view-admin #admin-detail-content button[onclick*="_openAddSpamModal"] {
  border: none !important; border-radius: 999px !important; min-height: 40px !important; padding: 0 16px !important; font-weight: 700 !important;
  background: var(--accent-primary) !important; color: #fff !important; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-primary) 30%, transparent) !important;
}
:root body #view-admin .ledare-spampil.scroll-hint-arrow { position: relative !important; display: flex !important; justify-content: center !important; margin: 4px 0 0 !important; height: 44px !important; background: none !important; }
:root body #view-admin .ledare-spampil.scroll-hint-arrow.hidden { display: none !important; }
:root body #view-admin #spam-blocklist-wrap { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent); }
:root body select.atlas-filter-native-hidden { display: none !important; }
:root body #view-admin #admin-detail-content .admin-config-row > select.admin-config-field.atlas-filter-native-hidden, :root body #view-admin #admin-detail-content select.atlas-filter-native-hidden.atlas-filter-native-hidden { display: none !important; }
/* Nätverk: adresskorten som varmvita kort, ikonen i rund ton, adressen i vanlig font (inte maskinskrift). */
:root body #view-admin .network-address-card.network-address-card {
  border: none !important; border-radius: 16px !important; padding: 12px 14px !important;
  background: color-mix(in srgb, var(--ledare-varm) 45%, var(--bg-dark-primary)) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 4px 10px -4px rgba(0,0,0,0.14) !important;
}
:root body #view-admin .network-address-card > :first-child:has(svg), :root body #view-admin .network-address-card > svg:first-child {
  width: 40px !important; height: 40px !important; min-width: 40px !important; border-radius: 50% !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  background: color-mix(in srgb, var(--accent-primary) 14%, transparent) !important; color: var(--accent-primary) !important;
}
:root body #view-admin .network-address-card :is(code, [style*="monospace"], .mono) { font-family: inherit !important; font-size: 14.5px !important; font-weight: 600 !important; letter-spacing: 0 !important; }
:root body #view-admin .network-address-card :is(small, span):first-child { letter-spacing: 0.5px !important; }
:root body #view-admin .network-address-card.network-address-card { display: flex !important; align-items: center !important; gap: 12px !important; }
:root body #view-admin .network-address-card > span:first-child {
  width: 40px !important; height: 40px !important; min-width: 40px !important; border-radius: 50% !important;
  align-items: center !important; justify-content: center !important;
  background: color-mix(in srgb, var(--accent-primary) 14%, transparent) !important; color: var(--accent-primary) !important;
}
:root body #view-admin .network-address-card > div > div:last-child { font-family: inherit !important; font-size: 14.5px !important; font-weight: 600 !important; letter-spacing: 0 !important; color: var(--text-primary) !important; }
/* Nätverk m.fl.: skrivskyddade fält ska inte se redigerbara ut — värdet som text med litet lås. */
:root body #view-admin #admin-detail-content .admin-config-row input.admin-config-field[readonly] {
  opacity: 1 !important; border: none !important; box-shadow: none !important; cursor: default !important;
  background: color-mix(in srgb, var(--accent-primary) 6%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2388968f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") no-repeat right 14px center !important;
  border-radius: 12px !important; padding-right: 40px !important; color: var(--text-primary) !important; font-weight: 600 !important;
  text-overflow: ellipsis !important;
}
/* Infonotis: mjuk ö utan hård kant, emoji ersatt av samma linjeikon som resten. */
:root body #view-admin #admin-detail-content .admin-note.admin-note-info {
  border: none !important; border-radius: 16px !important; padding: 12px 14px !important; gap: 10px !important;
  background: color-mix(in srgb, var(--accent-primary) 9%, transparent) !important; color: var(--text-primary) !important;
  display: flex !important; align-items: flex-start !important; margin-bottom: 12px !important;
}
:root body #view-admin #admin-detail-content .admin-note.admin-note-info > span:first-child {
  font-size: 0 !important; flex: 0 0 18px !important; width: 18px !important; height: 18px !important; margin-top: 2px !important;
  background: var(--accent-primary) !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") center/contain no-repeat !important;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") center/contain no-repeat !important;
}
/* Ord & begrepp: kolumnrubrikerna (220px-grid) stämmer inte när raden staplas på mobil — dolda; raden är eget kort. */
:root body #view-admin #admin-detail-content .detail-body > div[style*="grid-template-columns:220px"]:not(.admin-config-row) { display: none !important; }
:root body #view-admin #admin-detail-content .admin-config-row[style*="grid-template-columns:220px"] {
  border-radius: 16px !important; margin: 0 0 10px !important; display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important; padding: 12px 12px 12px 16px !important;
}
:root body #view-admin #admin-detail-content .admin-config-row[style*="grid-template-columns:220px"] > div:first-child { grid-column: 1 / -1 !important; }
/* "ental"/"flertal" som liten pill i stället för lös grön text. */
:root body #view-admin #admin-detail-content .admin-config-row[style*="grid-template-columns:220px"] > div:first-child > div:first-child > span {
  display: inline-block !important; margin-left: 8px !important; padding: 1px 8px !important; border-radius: 999px !important;
  font-size: 11px !important; font-weight: 600 !important; opacity: 1 !important; vertical-align: 2px !important;
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent) !important; color: var(--accent-primary) !important;
}
/* Tips-raden: inte helt fet, mjukare. */
:root body #view-admin #admin-detail-content .kb-guide-cta { font-weight: 500 !important; border-radius: 16px !important; }
/* Huvudets ikon: samma linjeikon som i menyn, utan ring. */
:root body #view-admin #admin-detail-content .detail-body > div:first-child[style*="gradient"] > div:first-child {
  border: none !important; width: 40px !important; height: 40px !important; color: var(--accent-primary) !important;
  background: color-mix(in srgb, var(--accent-primary) 14%, transparent) !important;
}
:root body #view-admin #admin-detail-content .kb-guide-cta > span { font-weight: 400 !important; }
/* Webbplats-widget: samma ö-språk — inga hårda ramar, runda former, grön rubrikton. */
:root body #view-admin #admin-detail-content .widget-preview-launch.widget-preview-launch,
:root body #view-admin #admin-detail-content .widget-install-panel.widget-install-panel,
:root body #view-admin #admin-detail-content .widget-platform-steps.widget-platform-steps > div {
  border: none !important; border-radius: 20px !important; box-shadow: 0 2px 10px -4px rgba(0,0,0,0.14) !important;
  background: color-mix(in srgb, var(--ledare-varm) 45%, var(--bg-dark-primary)) !important;
}
:root body #view-admin #admin-detail-content .widget-platform-steps.widget-platform-steps { gap: 10px !important; }
:root body #view-admin #admin-detail-content .widget-platform-steps.widget-platform-steps > div { padding: 12px 16px !important; border-radius: 16px !important; }
:root body #view-admin #admin-detail-content .widget-preview-launch .kb-guide-eyebrow { color: var(--accent-primary) !important; }
:root body #view-admin #admin-detail-content .widget-preview-launch-icon.widget-preview-launch-icon {
  border: none !important; border-radius: 50% !important; width: 44px !important; height: 44px !important; flex: 0 0 44px !important;
  background: color-mix(in srgb, var(--accent-primary) 14%, transparent) !important; color: var(--accent-primary) !important;
}
:root body #view-admin #admin-detail-content .widget-preview-frame.widget-preview-frame {
  border: 1.5px dashed color-mix(in srgb, var(--accent-primary) 28%, transparent) !important; border-radius: 16px !important;
}
/* Färgvalet som rund pill i stället för rak stapel. */
:root body #view-admin #admin-detail-content input.widget-install-color.widget-install-color {
  height: 44px !important; border-radius: 999px !important; border: 3px solid var(--ledare-varm) !important; padding: 0 !important; overflow: hidden !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary) 22%, transparent) !important;
}
:root body #view-admin #admin-detail-content input.widget-install-color::-webkit-color-swatch-wrapper { padding: 0 !important; }
:root body #view-admin #admin-detail-content input.widget-install-color::-webkit-color-swatch { border: none !important; border-radius: 999px !important; }
/* Etikettfältet = samma varmvita fält som övriga. */
:root body #view-admin #admin-detail-content input.widget-install-label.widget-install-label {
  background: var(--ledare-varm) !important; border: 1px solid color-mix(in srgb, var(--accent-primary) 22%, transparent) !important; border-radius: 14px !important;
}
:root body #view-admin #admin-detail-content .widget-install-controls .atlas-filter-dd-label { text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; }
:root body #view-admin #admin-detail-content pre.widget-snippet-code.widget-snippet-code {
  border: none !important; border-radius: 16px !important; background: color-mix(in srgb, var(--accent-primary) 7%, transparent) !important;
  font-size: 12.5px !important; line-height: 1.6 !important;
}
:root body #view-admin #admin-detail-content .widget-install-actions.widget-install-actions { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; }
:root body #view-admin #admin-detail-content .widget-install-actions .admin-lock-btn.admin-lock-btn {
  width: auto !important; height: 44px !important; border-radius: 999px !important; padding: 0 18px !important; border: none !important;
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent) !important; color: var(--accent-primary) !important; box-shadow: none !important;
}
:root body #view-admin #admin-detail-content .widget-install-actions .admin-lock-btn.widget-install-primary { background: var(--accent-primary) !important; color: #fff !important; }
/* Rader utan hjälptext under: helt rundade, egen luft (Systemsökvägar m.fl.). */
:root body #view-admin #admin-detail-content .admin-config-row.admin-config-row:not(:has(+ p)) { border-radius: 16px !important; margin-bottom: 10px !important; }
/* Skrivskyddat fält i en rad utan knappar: full bredd (grid hade tomma kolumner för knappar). */
:root body #view-admin #admin-detail-content .admin-config-row:not(:has(button)) { grid-template-columns: minmax(0,1fr) !important; }
/* Låsnotisen (inline grå ruta med hård kant) som mjuk ö. */
:root body #view-admin #admin-detail-content .detail-body > div[style*="var(--surface-line)"] {
  border: none !important; border-radius: 14px !important; padding: 10px 14px !important; margin: 14px 0 10px !important;
  background: color-mix(in srgb, var(--accent-primary) 7%, transparent) !important; font-size: 12px !important; align-items: center !important;
}
:root body #view-admin #admin-detail-content .detail-body > div[style*="var(--surface-line)"] svg { stroke: var(--accent-primary) !important; }
/* Patrik 10-14 (ledartråd 25): pillen klipptes på båda sidor ("TALNINGSINFORMATI") — inline-flex ger ingen "…" och
   centreringen klipper. Vanlig textruta ⇒ "BETALNINGSINF…". Mätt: crop_pill2.png i C:/AtlasWork/datorrunda-20261014. */
:root body #view-admin #ctpl-list .ctpl-card-meta > *.ctpl-card-pill { display: inline-block !important; text-align: center !important; line-height: 1.4 !important; }