/* =============================================================================
   MOBILSTIL ("mjuka öar") — Garaget, flyout, prioritet, mailkompositören, sökfält, kundkortet, Admin-listor och agentdetaljen, Utbud & Tjänster, kampanjrutan, kategoridetaljen.
   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-garaget.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan (Patrik 10-09): Garaget — kompaktare, rundade filter; Rensa filter = röd städikon. */
:root body #view-archive .atlas-filter-dd.atlas-filter-dd {
  font-size: 11.5px !important;
  letter-spacing: 0.2px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 10px 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 22%, transparent) !important;
  background: color-mix(in srgb, var(--accent-primary) 6%, var(--bg-dark-primary)) !important;
  box-shadow: none !important;
}
:root body #view-archive .atlas-filter-dd.atlas-filter-dd svg { width: 12px !important; height: 12px !important; }
:root body #view-archive :is(#filter-date-start, #filter-date-end).filter-input {
  font-size: 11.5px !important;
  height: 34px !important;
  border-radius: 999px !important;
  padding: 0 12px !important;
}
:root body #view-archive #reset-filters-btn.icon-clear-btn {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: color-mix(in srgb, #e5484d 14%, transparent) !important;
  color: #c62a2f !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  align-self: center !important;
}
:root body #view-archive #reset-filters-btn svg { width: 18px !important; height: 18px !important; }
/* Sökfältet rundat som övriga. */
:root body #view-archive #filter-search.filter-input { border-radius: 22px !important; height: 44px !important; }
/* Fordonsikonen i etiketten: ingen egen platta (den fick pill-stilen av misstag). */
:root body .team-ticket-card.team-ticket-card .ticket-footer-bar .ticket-tag span.ledare-vicon.ledare-vicon.ledare-vicon {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
:root body #view-archive .atlas-filter-dd.atlas-filter-dd { padding: 0 8px 0 10px !important; gap: 4px !important; }

/* ---- ur test-flyout.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan (Patrik 10-09): åtgärds- och prioritetsflyouten — ett vitare, lyft kort
   (tydligt skilt från den gröna ytan), rundad, lägre; Radera i rött. */
:root body :is(#card-action-flyout.card-action-flyout, .priority-flyout.priority-flyout) {
  background: color-mix(in srgb, var(--ledare-varm) 82%, var(--bg-dark-primary)) !important;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 22%, transparent) !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.20), 0 2px 6px rgba(0, 0, 0, 0.10) !important;
  padding: 4px 6px !important;
  min-height: 0 !important;
  height: auto !important;
  gap: 2px !important;
}
:root body #card-action-flyout .flyout-action-btn.flyout-action-btn {
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 50% !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-primary) !important;
}
:root body #card-action-flyout .flyout-action-btn.flyout-action-btn:active { background: color-mix(in srgb, var(--accent-primary) 16%, transparent) !important; }
:root body #card-action-flyout .flyout-action-btn.flyout-action-btn:is([title*="Radera" i], [title*="Ta bort" i], [aria-label*="Radera" i]) {
  color: #c62a2f !important;
  background: color-mix(in srgb, #e5484d 12%, transparent) !important;
}
/* Arkivets ärende: avataren i bubbelraden dold här också. */
:root body #archive-detail .detail-body .msg-row > .msg-avatar { display: none !important; }
:root body #archive-detail .detail-body .msg-row > div:not(.msg-avatar) { max-width: 100% !important; flex: 1 1 auto !important; align-items: stretch !important; }
:root body #archive-detail .detail-body .msg-row .bubble { width: 100% !important; box-sizing: border-box !important; }
/* ⋮-knappen bakom den runda menyn: ingen grön platta (stack ut i menyns runda hörn). */
:root body :is(.detail-header-actions, [data-reader-drag-handle] > div) :is(.action-icon-btn, #reader-actions-btn).action-icon-btn,
:root body #reader-actions-btn#reader-actions-btn {
  background: transparent !important;
  box-shadow: none !important;
}

/* ---- ur test-prio.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan (Patrik 10-09): prioritetsringen = IFYLLD prick när prioritet är satt
   (gult syntes dåligt som tunn ring) + mörkare kant för kontrast på ljus botten.
   Ingen prioritet = tunn tom ring som förut. */
:root body .card-prio-btn.card-prio-btn:is([data-priority="high"], [data-priority="medium"], [data-priority="low"])::before {
  width: 13px !important;
  height: 13px !important;
  background: currentColor !important;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, currentColor 65%, #000) !important;
}
html body .priority-trigger-btn.priority-trigger-btn:is([data-priority="high"], [data-priority="medium"], [data-priority="low"]) svg {
  fill: var(--prio-color) !important;
  stroke: color-mix(in srgb, var(--prio-color) 65%, #000) !important;
  stroke-width: 2 !important;
  width: 16px !important;
  height: 16px !important;
}
/* Notisrader/sökträffar ritar ringen som ::before i etikettraden: samma regel. */
:root body .gs-ticket-card[data-priority="high"] .ticket-footer-right::before,
:root body .gs-ticket-card[data-priority="medium"] .ticket-footer-right::before,
:root body .gs-ticket-card[data-priority="low"] .ticket-footer-right::before {
  background: currentColor !important;
}

/* ---- ur test-composer.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan (Patrik 10-09): mailkompositören i samma kortspråk. */
:root body #atlas-mail-composer.custom-modal-overlay { background: rgba(0, 0, 0, 0.28) !important; }
:root body #atlas-mail-composer .glass-modal-box.glass-modal-box {
  border: 1.5px solid color-mix(in srgb, var(--accent-primary) 40%, transparent) !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.30), 0 4px 12px rgba(0, 0, 0, 0.14) !important;
  overflow: hidden !important;
  background: var(--bg-dark-primary) !important;
  display: flex !important; flex-direction: column !important;
  height: calc(100% - 20px) !important; max-height: calc(100% - 20px) !important; margin-top: 10px !important;
}
:root body #atlas-mail-composer .glass-modal-header {
  background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-dark-primary)) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-primary) 18%, transparent) !important;
  padding: 14px 16px 12px !important;
}
/* Ikonen: mjuk rund ton i stället för en kantig rosa ruta. */
:root body #atlas-mail-composer .glass-modal-header > div:first-child > div:first-child {
  width: 36px !important; height: 36px !important; border-radius: 50% !important;
  background: color-mix(in srgb, var(--accent-primary) 16%, transparent) !important;
  color: var(--accent-primary) !important;
}
:root body #atlas-mail-composer .glass-modal-header > div:first-child > div:first-child svg { stroke: var(--accent-primary) !important; }
/* Läge: rund segmentväljare. */
:root body #atlas-mail-composer #composer-mode-toggle { border-radius: 999px !important; padding: 4px !important; border: none !important; background: color-mix(in srgb, var(--accent-primary) 10%, transparent) !important; }
:root body #atlas-mail-composer #composer-mode-toggle button { border-radius: 999px !important; min-height: 40px !important; border: none !important; }
/* Fälten: rundade. */
:root body #atlas-mail-composer :is(#composer-to-wrap, #composer-subject-row) :is(input, .filter-input, [contenteditable]) {
  border-radius: 14px !important; min-height: 44px !important;
}
:root body #atlas-mail-composer #composer-message-row .ql-toolbar,
:root body #atlas-mail-composer #composer-message-row .ql-container { border-radius: 0 !important; }
:root body #atlas-mail-composer #composer-message-row > :last-child,
:root body #atlas-mail-composer #composer-message-row [class*="editor-wrap"] { border-radius: 14px !important; overflow: hidden !important; }
/* Kroppen fyller kortet; meddelandet växer i stället för tom yta nedtill. */
:root body #atlas-mail-composer #composer-body-container.glass-modal-body { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; overflow-y: auto !important; }
:root body #atlas-mail-composer #composer-message-row { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; min-height: 180px !important; }
:root body #atlas-mail-composer #composer-message-row .ql-container { flex: 1 1 auto !important; min-height: 140px !important; }
:root body #atlas-mail-composer #composer-message-row .ql-editor { min-height: 140px !important; }
/* Skicka: tydlig rund primärknapp. */
:root body #atlas-mail-composer #composer-send#composer-send {
  width: 48px !important; height: 48px !important; border-radius: 50% !important;
  background: var(--accent-primary) !important; color: #fff !important; border: none !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-primary) 40%, transparent) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
:root body #atlas-mail-composer #composer-send svg { stroke: #fff !important; color: #fff !important; }
/* Mallväljare och info: rundade. */
:root body #atlas-mail-composer .glass-modal-box > div:not(.glass-modal-header):not(.glass-modal-body):not(.atlas-composer-send-progress) .atlas-filter-dd { border-radius: 999px !important; }
:root body #atlas-mail-composer #composer-info-box { border: none !important; border-radius: 14px !important; background: color-mix(in srgb, var(--accent-primary) 7%, transparent) !important; font-size: 12.5px !important; }
:root body #atlas-mail-composer #composer-quill-wrap#composer-quill-wrap { flex: 1 1 auto !important; flex-direction: column !important; border-radius: 14px !important; overflow: hidden !important; }
:root body #atlas-mail-composer #composer-quill-wrap .ql-container { flex: 1 1 auto !important; }

/* ---- ur test-sok.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan (Patrik 10-09): sökfälten i alla vyer — samma placeholder (rak, dämpad, med lupp),
   inga kursiva/olika stilar. Kunder: mittfältet är en synkad dubblett av toppfältet
   (customers-view.js:307-322) ⇒ dolt på mobil; tomläget kompakt. */
:root body :is(#inbox-search, #my-tickets-search, #filter-search, #customer-search-top, #customer-search-main, .list-panel-search .filter-input)::placeholder {
  font-style: normal !important;
  color: color-mix(in srgb, var(--text-secondary) 75%, transparent) !important;
  opacity: 1 !important;
}
:root body :is(.list-panel-search .filter-input, #filter-search.filter-input, #customer-search-top) {
  padding-left: 42px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%233d6b50' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 16px 50% !important;
  background-size: 18px 18px !important;
  border-radius: 22px !important;
  height: 44px !important;
}
:root body #view-customers .hero-placeholder #customer-search-main { display: none !important; }
:root body #view-customers .list-panel-search { margin-bottom: 0 !important; }
:root body #view-customers .template-list-container:not(:has(.team-ticket-card)) { min-height: 0 !important; height: auto !important; }
/* Tomt kundläge: dölj tom lista och den dolda pilens plats (gav ett tomt band under sökfältet). */
:root body #view-customers #customer-list:not(:has(*)) { display: none !important; }
:root body .scroll-hint-arrow.hidden { display: none !important; }
/* Tomläget: ingen kursiv. */
:root body #view-customers .hero-placeholder :is(p, .hero-subtitle, [class*="subtitle"]) { font-style: normal !important; }
/* Kundkort: initialavatar (ring i kundens färg, mindre än ärendehuvudets 36 px). */
:root body #customer-list .team-ticket-card .ledare-kavatar {
  flex: 0 0 auto;
  width: 28px; height: 28px; margin-right: 10px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
  color: var(--agent-color, var(--accent-primary));
  border: 1.5px solid var(--agent-color, var(--accent-primary));
  background: color-mix(in srgb, var(--agent-color, var(--accent-primary)) 10%, transparent);
}
/* Datumet längst ut till höger (kundkort har ingen ⋯-meny). */
:root body #customer-list .team-ticket-card.team-ticket-card .ticket-time { grid-column: 2 / -1 !important; justify-self: end !important; }
/* Garagets sökfält tappade luppen (ett starkare bakgrundsregel-lager vann) — samma lupp med högre specificitet. */
:root body #view-archive .list-panel-search input#filter-search.filter-input.filter-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%233d6b50' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: 16px 50% !important; background-size: 18px 18px !important;
}

/* ---- ur test-kundkort.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan (Patrik 10-09): kundkortet — samma språk som ärendehuvudet. */
/* Huvud v2: rad 1 = avatar · namn ..... ikoner ; rad 2 = pills (svepbara). */
:root body #customer-detail .detail-header-top.detail-header-top {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) auto !important;
  grid-template-areas: "kh-av kh-name kh-act" "kh-pills kh-pills kh-pills" !important;
  align-items: center !important; column-gap: 10px !important; row-gap: 10px !important;
  padding: 12px 14px !important; height: auto !important; min-height: 0 !important;
}
:root body #view-customers #customer-detail .detail-header-top.detail-header-top > div:first-child,
:root body #view-customers #customer-detail #customer-header-display#customer-header-display { display: contents !important; }
:root body #view-customers #customer-detail .detail-header-top .customer-avatar-edit.customer-avatar-edit.customer-avatar-edit {
  grid-area: kh-av; position: relative !important; margin: 0 !important;
  width: 36px !important; height: 36px !important; min-width: 36px !important; font-size: 15px !important; border-width: 1.5px !important;
}
:root body #customer-detail .detail-header-top .customer-avatar-edit .avatar-edit-pen { width: 16px !important; height: 16px !important; right: -4px !important; bottom: -4px !important; }
:root body #customer-detail #customer-header-display > .detail-subject.detail-subject {
  grid-area: kh-name; margin: 0 !important; font-size: 17px !important; line-height: 1.25 !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; min-width: 0 !important;
}
:root body #customer-detail #customer-header-display > .header-pills-row.header-pills-row {
  grid-area: kh-pills; display: flex !important; flex-wrap: nowrap !important; gap: 6px !important; margin: 0 !important;
  overflow-x: auto !important; scrollbar-width: none; min-width: 0 !important;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  padding-right: 20px !important;
}
:root body #customer-detail .header-pills-row .pill.pill {
  border-radius: 999px !important; white-space: nowrap !important; flex: 0 0 auto !important;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 28%, transparent) !important;
  background: color-mix(in srgb, var(--accent-primary) 10%, transparent) !important;
  font-size: 12px !important; padding: 5px 11px !important;
}
/* Ikonerna upp till höger på namnraden, tätt; radera röd. */
:root body #customer-detail .detail-header-top > div:nth-child(2) {
  grid-area: kh-act; display: flex !important; gap: 0 !important; margin: 0 -6px 0 0 !important; width: auto !important;
}
:root body #customer-detail .detail-header-top > div:nth-child(2) .btn-glass-icon {
  width: 34px !important; min-width: 34px !important; height: 40px !important; margin: 0 !important;
  border: none !important; background: transparent !important; box-shadow: none !important;
}
:root body #customer-detail #cust-detail-delete-btn { color: #c62a2f !important; }
:root body #customer-detail #cust-detail-delete-btn svg { stroke: #c62a2f !important; }

/* Statistikrutorna: fyra kompakta mjuka rutor i rad (2×2 → 4×1), siffra/ord + etikett. */
:root body #view-customers #customer-detail .cust-stat-grid.cust-stat-grid.cust-stat-grid {
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important; padding: 10px 12px !important;
}
:root body #view-customers #customer-detail .cust-stat-grid.cust-stat-grid .admin-stat-card.admin-stat-card {
  border: none !important; border-radius: 14px !important; box-shadow: none !important;
  background: color-mix(in srgb, var(--accent-primary) 9%, var(--bg-dark-primary)) !important;
  padding: 8px 6px !important; min-height: 0 !important; height: auto !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 2px !important;
  text-align: center !important;
}
:root body #view-customers #customer-detail .cust-stat-grid.cust-stat-grid .admin-stat-card > div { font-size: 10px !important; letter-spacing: 0.4px !important; text-transform: uppercase !important; line-height: 1.2 !important; margin: 0 !important; }
:root body #view-customers #customer-detail .cust-stat-grid.cust-stat-grid .admin-stat-card > div:last-child,
:root body #view-customers #customer-detail .cust-stat-grid.cust-stat-grid .admin-stat-card > .cust-offices-container {
  font-size: 18px !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important;
}
:root body #view-customers #customer-detail .cust-stat-grid.cust-stat-grid .admin-stat-card > .cust-offices-container,
:root body #view-customers #customer-detail .cust-stat-grid.cust-stat-grid .admin-stat-card > .cust-offices-container * { font-size: 11px !important; font-weight: 600 !important; text-transform: none !important; }
:root body #view-customers #customer-detail .cust-stat-grid.cust-stat-grid .admin-stat-card > div:first-child { color: var(--text-secondary) !important; font-weight: 600 !important; }
:root body #customer-detail .cust-offices-toggle, :root body #customer-detail .cust-offices-fade { display: none !important; }
:root body #customer-detail .cust-offices-container { max-height: 2.6em !important; overflow: hidden !important; }

/* Sök i kundens ärenden: rund med lupp, rak placeholder. */
:root body #customer-detail #customer-ticket-search.filter-input {
  border-radius: 22px !important; height: 40px !important; padding-left: 40px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%233d6b50' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: 14px 50% !important; background-size: 17px 17px !important;
}
:root body #customer-detail #customer-ticket-search::placeholder { font-style: normal !important; color: color-mix(in srgb, var(--text-secondary) 75%, transparent) !important; }
:root body #customer-detail #cust-tickets-hist-h { font-size: 12px !important; color: var(--text-secondary) !important; letter-spacing: 0.5px !important; }
/* Datumet på kundens ärendekort längst ut till höger (ingen ⋯-meny här). */
:root body #customer-ticket-list-body .team-ticket-card.team-ticket-card .ticket-time { grid-column: 2 / -1 !important; justify-self: end !important; }
/* Statistikrutor v2: varje ruta = liten etikett överst + värde under, oavsett källordning. */
:root body #view-customers #customer-detail .cust-stat-grid.cust-stat-grid .admin-stat-card.admin-stat-card > div {
  font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0.4px !important;
  text-transform: uppercase !important; color: var(--text-secondary) !important; line-height: 1.2 !important;
}
/* Aktiva/Arkiverade: siffran (första barnet) = värde, nedanför etiketten. */
:root body #view-customers #customer-detail .cust-stat-grid.cust-stat-grid .admin-stat-card.admin-stat-card:nth-child(-n+2) > div:first-child {
  order: 2; font-size: 20px !important; font-weight: 700 !important; letter-spacing: 0 !important; color: var(--text-primary) !important; text-transform: none !important;
}
/* Kontor/Fordon: andra barnet = värde. */
:root body #view-customers #customer-detail .cust-stat-grid.cust-stat-grid .admin-stat-card.admin-stat-card:nth-child(n+3) > div:last-child,
:root body #view-customers #customer-detail .cust-stat-grid.cust-stat-grid .admin-stat-card.admin-stat-card:nth-child(n+3) > div:last-child * {
  font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: 0 !important; color: var(--text-primary) !important; text-transform: none !important;
}
:root body #view-customers #customer-detail .cust-stat-grid.cust-stat-grid .admin-stat-card.admin-stat-card { gap: 4px !important; min-height: 58px !important; }
/* Statistikrutor v3 (Patrik 10-09: tydligare): egen ton + tunn ram + mjuk skugga,
   färgad toppkant per typ, värdet större. */
:root body #view-customers #customer-detail .cust-stat-grid.cust-stat-grid .admin-stat-card.admin-stat-card {
  background: color-mix(in srgb, var(--ledare-varm) 55%, var(--bg-dark-primary)) !important;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, transparent) !important;
  border-top: 3px solid var(--kst-c, var(--accent-primary)) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  border-radius: 14px !important;
  min-height: 64px !important;
  padding: 8px 4px !important;
}
:root body #view-customers #customer-detail .cust-stat-grid .admin-stat-card:nth-child(1) { --kst-c: var(--accent-primary); }
:root body #view-customers #customer-detail .cust-stat-grid .admin-stat-card:nth-child(2) { --kst-c: color-mix(in srgb, var(--text-secondary) 70%, transparent); }
:root body #view-customers #customer-detail .cust-stat-grid .admin-stat-card:nth-child(3) { --kst-c: #b8862b; }
:root body #view-customers #customer-detail .cust-stat-grid .admin-stat-card:nth-child(4) { --kst-c: #5b7fb8; }
:root body #view-customers #customer-detail .cust-stat-grid.cust-stat-grid .admin-stat-card.admin-stat-card:nth-child(-n+2) > div:first-child {
  font-size: 22px !important; color: var(--kst-c) !important;
}
:root body #view-customers #customer-detail .cust-stat-grid.cust-stat-grid .admin-stat-card.admin-stat-card:nth-child(2) > div:first-child { color: var(--text-primary) !important; }
:root body #view-customers #customer-detail .cust-stat-grid.cust-stat-grid { gap: 8px !important; }

/* ---- ur test-admin-lista.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan (Patrik 10-09): Admin-listorna (Personal m.fl.) — kompakt huvud, mjuka kort. */
/* Huvudet: titel + rund "+" på en rad (var ~105 px med stor sköld). */
:root body #view-admin .admin-sidebar-list > .pane-header.pane-header {
  min-height: 0 !important; height: auto !important;
  padding: 12px 14px 6px !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  background: transparent !important; border: none !important; box-shadow: none !important;
}
:root body #view-admin .admin-sidebar-list > .pane-header #admin-list-title {
  font-size: 12px !important; letter-spacing: 0.6px !important; margin: 0 !important;
  border: none !important; padding: 0 !important; color: var(--text-secondary) !important;
}
:root body #view-admin .admin-sidebar-list > .pane-header #admin-list-title::after { display: none !important; }
:root body #view-admin #admin-list-actions .btn-glass-icon.btn-glass-icon {
  width: 40px !important; height: 40px !important; min-width: 40px !important;
  border-radius: 50% !important; border: none !important; box-shadow: none !important;
  background: var(--accent-primary) !important; color: #fff !important; clip-path: none !important;
  mask: none !important; -webkit-mask: none !important;
}
:root body #view-admin #admin-list-actions .btn-glass-icon svg { stroke: #fff !important; color: #fff !important; width: 20px !important; height: 20px !important; }
:root body #view-admin #admin-list-actions .btn-glass-icon::before,
:root body #view-admin #admin-list-actions .btn-glass-icon::after { display: none !important; }
/* Korten: samma mjuka kort som ärenden; agentfärgen bara i avataren. */
:root body #view-admin #admin-main-list.scroll-list { padding: 4px 12px 12px !important; }
:root body.atlas-light-theme #view-admin .admin-mini-card.admin-mini-card:not([id^="gap-card-"]),
:root body #view-admin #admin-main-list .admin-mini-card.admin-mini-card.admin-mini-card:not([id^="gap-card-"]) {
  border: none !important;
  border-radius: 16px !important;
  background: var(--mtc-card-bg) !important;
  box-shadow: var(--mtc-card-shadow) !important;
  margin: 0 0 8px 0 !important;
  min-height: 60px !important;
  padding: 8px 12px !important;
}
:root body #view-admin .admin-mini-card .user-avatar { width: 38px !important; height: 38px !important; }
:root body #view-admin .admin-mini-card [data-user-card-copy] > div:first-child span:first-child { font-size: 15px !important; font-weight: 650 !important; }
:root body #view-admin .admin-mini-card [data-user-card-copy] > div:last-child { font-size: 12.5px !important; color: var(--text-secondary) !important; }
:root body #view-admin .admin-mini-card .admin-card-badge {
  border-radius: 999px !important; min-width: 24px !important; height: 24px !important;
  background: color-mix(in srgb, var(--accent-primary) 16%, transparent) !important; border: none !important;
  font-weight: 700 !important;
}
/* Sköldformen bakom "+" (ritad som ::after på huvudet). */
:root body #view-admin .admin-sidebar-list > .pane-header.pane-header::after,
:root body #view-admin .admin-sidebar-list > .pane-header.pane-header::before { display: none !important; content: none !important; }
:root body #view-admin .admin-sidebar-list > .pane-header.pane-header { padding-top: 16px !important; overflow: visible !important; } :root body #view-admin #admin-list-actions { margin: 0 !important; transform: none !important; position: static !important; }
/* Djup (Patrik 10-09: "platt"): listan ligger i en egen rundad panel med svag ton och mjuk
   skugga; korten blir ljusare än panelen så de lyfter. */
:root body #view-admin .admin-sidebar-list > .scroll-list#admin-main-list.scroll-list {
  margin: 4px 10px 10px !important;
  padding: 10px 10px 4px !important;
  border-radius: 22px !important;
  background: color-mix(in srgb, var(--accent-primary) 9%, var(--bg-dark-primary)) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05), 0 4px 14px rgba(0,0,0,0.08) !important;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 16%, transparent) !important;
}
:root body.atlas-light-theme #view-admin .admin-mini-card.admin-mini-card:not([id^="gap-card-"]),
:root body #view-admin #admin-main-list .admin-mini-card.admin-mini-card.admin-mini-card:not([id^="gap-card-"]) {
  background: color-mix(in srgb, var(--ledare-varm) 50%, 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.18) !important;
}
:root body #view-admin .admin-sidebar-list > .scroll-list#admin-main-list.scroll-list { width: auto !important; max-width: none !important; box-sizing: border-box !important; flex: 1 1 auto !important; align-self: stretch !important; }
:root body #view-admin #admin-main-list .admin-mini-card.admin-mini-card.admin-mini-card { width: auto !important; max-width: 100% !important; box-sizing: border-box !important; }
:root body.atlas-light-theme #view-admin .admin-mini-card.admin-mini-card:not([id^="gap-card-"]),
:root body #view-admin #admin-main-list .admin-mini-card.admin-mini-card.admin-mini-card:not([id^="gap-card-"]) {
  background: color-mix(in srgb, var(--ledare-varm) 30%, var(--bg-dark-primary)) !important;
}
/* Varje kort får en subtil ton + kant i sin egen agent-/kontorsfärg (--agent-color sätts inline). */
:root body.atlas-light-theme #view-admin .admin-mini-card.admin-mini-card:not([id^="gap-card-"]),
:root body #view-admin #admin-main-list .admin-mini-card.admin-mini-card.admin-mini-card:not([id^="gap-card-"]) {
  background: color-mix(in srgb, var(--agent-color, var(--accent-primary)) 9%, color-mix(in srgb, var(--ledare-varm) 30%, var(--bg-dark-primary))) !important;
  border: 1px solid color-mix(in srgb, var(--agent-color, var(--accent-primary)) 22%, transparent) !important;
}

/* ---- ur test-agent.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan (Patrik 10-09, fri hand): agentdetaljen i Admin.
   Huvud: avatar 40 · namn ........ redigera ; rad 2: roll · @user · 🔒 ; rad 3: två räknarkort. */
:root body #view-admin .admin-user-detail > .detail-header-top.detail-header-top { padding: 14px 14px 12px !important; height: auto !important; min-height: 0 !important; }
:root body #view-admin .admin-user-detail > .detail-header-top > div:not(.agent-desktop-counter-wrap) {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  column-gap: 12px !important; align-items: start !important;
}
:root body #view-admin .admin-user-detail > .detail-header-top .msg-avatar { width: 40px !important; height: 40px !important; margin: 0 !important; align-self: start !important; }
:root body #view-admin .admin-user-detail > .detail-header-top .msg-avatar .user-avatar { width: 40px !important; height: 40px !important; }
:root body #view-admin .admin-user-detail > .detail-header-top > div > div:last-child {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "ag-name ag-edit" "ag-pills ag-pills" "ag-count ag-count" !important;
  row-gap: 8px !important; min-width: 0 !important;
}
:root body #view-admin .admin-user-detail .detail-header-top > div > div:last-child > div:first-child { grid-area: ag-name; min-width: 0; }
:root body #view-admin .admin-user-detail .detail-header-top .detail-subject { font-size: 18px !important; margin: 0 !important; line-height: 1.2 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root body #view-admin .admin-user-detail .detail-header-top .header-pills-row.header-pills-row { display: contents !important; }
:root body #view-admin .admin-user-detail .detail-header-top .header-pills-row > .pill,
:root body #view-admin .admin-user-detail .detail-header-top .header-pills-row > span { grid-area: ag-pills; }
:root body #view-admin .admin-user-detail .detail-header-top .header-pills-row > #agent-detail-edit-btn { grid-area: ag-edit; align-self: center; margin: -6px -6px 0 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; }
/* Rad 2 som en flexrad: lägg pills i samma cell bredvid varandra. */
:root body #view-admin .admin-user-detail .detail-header-top > div > div:last-child { grid-template-rows: auto auto auto !important; }
:root body #view-admin .admin-user-detail .detail-header-top .header-pills-row > .pill:nth-of-type(1) { justify-self: start; }
:root body #view-admin .admin-user-detail .detail-header-top .header-pills-row > .pill:nth-of-type(2) { justify-self: start; margin-left: var(--ag-p1w, 118px) !important; }
:root body #view-admin .admin-user-detail .detail-header-top .header-pills-row > span { justify-self: start; margin-left: calc(var(--ag-p1w, 118px) + var(--ag-p2w, 78px)) !important; align-self: center; }
:root body #view-admin .admin-user-detail .detail-header-top .header-pills-row > .pill.pill {
  border-radius: 999px !important; font-size: 11.5px !important; padding: 4px 10px !important; white-space: nowrap !important;
  border: 1px solid color-mix(in srgb, var(--agent-color, var(--accent-primary)) 30%, transparent) !important;
  background: color-mix(in srgb, var(--agent-color, var(--accent-primary)) 10%, transparent) !important;
}
/* Räknarna: två mjuka kort sida vid sida (klickbara). */
:root body #view-admin .admin-user-detail .agent-mobile-counter-slot { grid-area: ag-count; width: auto !important; height: auto !important; margin: 0 !important; }
:root body #view-admin .admin-user-detail .agent-counter-pills { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
:root body #view-admin .admin-user-detail .agent-counter-card { margin: 0 !important; }
:root body #view-admin .admin-user-detail .agent-counter-pill.agent-counter-pill {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 100% !important; box-sizing: border-box !important; min-height: 38px !important;
  border-radius: 14px !important; font-size: 13px !important; font-weight: 650 !important;
  border: none !important; box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
  background: color-mix(in srgb, var(--ledare-varm) 55%, var(--bg-dark-primary)) !important;
}
:root body #view-admin .admin-user-detail .agent-counter-pill--active.agent-counter-pill { color: color-mix(in srgb, var(--accent-primary) 80%, var(--text-primary)) !important; }

/* Kroppen: rubriker små, behörighetsrutor som mjuka block, ärendepanelen utan låda-i-låda. */
:root body #view-admin #agent-detail-body h4 {
  font-size: 11.5px !important; letter-spacing: 0.6px !important; color: var(--text-secondary) !important;
  margin: 0 0 6px 2px !important; display: flex !important; align-items: center !important; gap: 6px !important;
}
:root body #view-admin #agent-detail-body .glass-panel.glass-panel {
  border: none !important; border-radius: 16px !important; box-shadow: none !important;
  background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-dark-primary)) !important;
  padding: 12px 14px !important;
}
:root body #view-admin #agent-detail-body .glass-panel :is(em, i, [style*="italic"]) { font-style: normal !important; }
:root body #view-admin #agent-detail-body .glass-panel { font-style: normal !important; }
:root body #view-admin #agent-detail-body #agent-permission-grid { gap: 14px !important; }
:root body #view-admin #agent-ticket-list-panel.admin-zoom-fill-panel {
  border: none !important; background: transparent !important; box-shadow: none !important; padding: 0 !important;
}
:root body #view-admin #agent-ticket-list-panel > .scroll-list { padding: 0 !important; }
:root body #view-admin #agent-detail-body .sh-tip { opacity: 0.6; transform: scale(0.85); }
:root body #view-admin .admin-user-detail .agent-desktop-counter-wrap { display: none !important; }
/* Pills (roll, @namn, lås) under namnet i samma kolumn; rad-luften kortas. */
:root body #view-admin .admin-user-detail .detail-header-top > div > div:last-child { row-gap: 6px !important; }
:root body #view-admin .admin-user-detail .detail-header-top .msg-avatar { grid-row: 1 / span 2 !important; }
:root body #view-admin .admin-user-detail .detail-header-top .header-pills-row > #agent-detail-edit-btn { height: 36px !important; min-height: 36px !important; margin: -8px -6px -8px 0 !important; }
:root body #view-admin .admin-user-detail .detail-header-top > div:not(.agent-desktop-counter-wrap) > div:last-child > div:first-child { height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; }
:root body #view-admin #agent-detail-body .glass-panel * { font-style: normal !important; }
:root body #view-admin #agent-detail-body .admin-zoom-fill-section #agent-ticket-list-panel .scroll-list { padding: 0 !important; margin: 0 !important; }
:root body #view-admin #agent-detail-body .admin-zoom-fill-section .admin-ticket-preview { margin-left: 0 !important; margin-right: 0 !important; }
:root body #view-admin .admin-user-detail .detail-header-top .header-pills-row > button:last-child {
  grid-area: ag-edit !important; height: 32px !important; min-height: 32px !important; width: 36px !important;
  margin: -6px -6px -6px 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; align-self: center !important;
}
/* Räknarkorten smälter in: svag ton i agentens färg i stället för vitt. */
:root body #view-admin .admin-user-detail .agent-counter-pill.agent-counter-pill {
  background: color-mix(in srgb, var(--agent-color, var(--accent-primary)) 10%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--agent-color, var(--accent-primary)) 22%, transparent) !important;
  box-shadow: none !important;
}
/* Behörighet: två tydligt separata sektioner, var sin ljus kortyta med rubriken inuti. */
:root body #view-admin #agent-detail-body #agent-permission-grid { display: flex !important; flex-direction: column !important; gap: 12px !important; }
:root body #view-admin #agent-detail-body .agent-permission-section.agent-permission-section {
  background: color-mix(in srgb, var(--ledare-varm) 45%, var(--bg-dark-primary)) !important;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 20%, transparent) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  padding: 12px !important;
}
:root body #view-admin #agent-detail-body .agent-permission-section > h4 { margin: 0 0 8px 2px !important; color: var(--accent-primary) !important; }
:root body #view-admin #agent-detail-body .agent-permission-section .glass-panel.glass-panel {
  background: color-mix(in srgb, var(--accent-primary) 7%, transparent) !important; padding: 10px 12px !important;
}
/* v2 huvud (gäller både systemadmin och vanlig agent):
   ikonknapparna i en rad uppe till höger, pills + färgprick i en flexrad. */
:root body #view-admin .admin-user-detail > .detail-header-top.detail-header-top { position: relative !important; }
:root body #view-admin .admin-user-detail .detail-header-top .header-pills-row.header-pills-row {
  display: flex !important; grid-area: ag-pills !important; align-items: center !important; gap: 6px !important;
  flex-wrap: nowrap !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; height: auto !important;
}
:root body #view-admin .admin-user-detail .detail-header-top .header-pills-row > .pill.pill,
:root body #view-admin .admin-user-detail .detail-header-top .header-pills-row > span { margin-left: 0 !important; grid-area: auto !important; }
:root body #view-admin .admin-user-detail #agent-color-picker {
  width: 20px !important; height: 20px !important; min-width: 20px !important; padding: 0 !important;
  border-radius: 50% !important; border: 2px solid color-mix(in srgb, #fff 70%, transparent) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--agent-color, var(--accent-primary)) 40%, transparent) !important;
  overflow: hidden !important; margin: 0 0 0 2px !important; -webkit-appearance: none; appearance: none; cursor: pointer;
}
:root body #view-admin .admin-user-detail #agent-color-picker::-webkit-color-swatch-wrapper { padding: 0; }
:root body #view-admin .admin-user-detail #agent-color-picker::-webkit-color-swatch { border: none; border-radius: 50%; }
:root body #view-admin .admin-user-detail .detail-header-top :is(#agent-detail-notes-btn, #agent-detail-edit-btn, #agent-detail-internal-message-btn, #agent-detail-broadcast-btn).footer-icon-btn {
  position: absolute !important; top: 10px !important; width: 34px !important; height: 34px !important; min-height: 34px !important;
  margin: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important; grid-area: auto !important;
}
:root body #view-admin .admin-user-detail .detail-header-top #agent-detail-notes-btn { right: 8px !important; }
:root body #view-admin .admin-user-detail .detail-header-top #agent-detail-edit-btn { right: 42px !important; }
:root body #view-admin .admin-user-detail .detail-header-top #agent-detail-internal-message-btn { right: 76px !important; }
:root body #view-admin .admin-user-detail .detail-header-top #agent-detail-broadcast-btn { right: 110px !important; }
:root body #view-admin .admin-user-detail .detail-header-top .detail-subject { padding-right: 140px !important; }
:root body #view-admin .admin-user-detail .detail-header-top > div:not(.agent-desktop-counter-wrap) > div:last-child > div:first-child { display: block !important; }
/* Kontorspanelen: inget klipp av chipsraden. */
:root body #view-admin #agent-detail-body .agent-permission-section .glass-panel { max-height: none !important; height: auto !important; overflow: visible !important; }
:root body #view-admin .admin-user-detail .header-pills-row input#agent-color-picker#agent-color-picker {
  width: 22px !important; height: 22px !important; min-width: 22px !important; max-width: 22px !important; padding: 0 !important; border-radius: 50% !important;
}
/* Kontorspanelens inre scrollruta (max 150 px) klippte chipsen: låt den växa. */
:root body #view-admin #agent-detail-body .agent-office-permission-pane > div[style*="max-height"],
:root body #view-admin #agent-detail-body .agent-office-permission-pane > div { max-height: none !important; height: auto !important; overflow: visible !important; }
:root body #view-admin #agent-detail-body .agent-office-pill > span { overflow: visible !important; }
:root body #view-admin #agent-detail-body .agent-office-permission-panel.agent-office-permission-panel > div { max-height: none !important; height: auto !important; overflow: visible !important; }
/* Städernas pills bryter rad i stället för att gå utanför. */
:root body #view-admin #agent-detail-body .agent-office-group-row.agent-office-group-row { flex-wrap: wrap !important; overflow: visible !important; max-width: 100% !important; }
/* Pågående ärenden: korten tydligt avskilda (egen ljus yta + skugga) mot bakgrunden. */
:root body #view-admin #agent-detail-body .admin-zoom-fill-section .admin-ticket-preview.admin-ticket-preview {
  background: color-mix(in srgb, var(--ledare-varm) 45%, var(--bg-dark-primary)) !important;
  border: 1px solid color-mix(in srgb, var(--atp-color, var(--accent-primary)) 25%, transparent) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10) !important;
}
:root body #view-admin #agent-detail-body .admin-zoom-fill-section .admin-ticket-preview .atp-subject { color: var(--text-secondary) !important; opacity: 1 !important; }
:root body #view-admin #agent-detail-body .admin-zoom-fill-section .admin-ticket-preview.admin-ticket-preview { border-image: linear-gradient(transparent, transparent) 1 !important; outline: 1px solid color-mix(in srgb, var(--atp-color, var(--accent-primary)) 22%, transparent) !important; outline-offset: -1px; }
/* Räknarna: små pills på en rad i stället för två stora kort. */
:root body #view-admin .admin-user-detail .agent-counter-pills.agent-counter-pills { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; }
:root body #view-admin .admin-user-detail .agent-counter-pill.agent-counter-pill {
  min-height: 28px !important; height: 28px !important; width: auto !important; padding: 0 12px !important;
  border-radius: 999px !important; font-size: 12px !important;
}
/* Pennsymbol över färgpricken (visar att den går att ändra). */
:root body #view-admin .admin-user-detail .detail-header-top .header-pills-row:has(#agent-color-picker)::after {
  content: ""; flex: 0 0 22px; width: 22px; height: 22px; margin-left: -28px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
}
/* Pågående ärenden: inte vitt — samma mjuka gröna kort som listorna, men tydlig skugga + kant. */
:root body #view-admin #agent-detail-body .admin-zoom-fill-section .admin-ticket-preview.admin-ticket-preview {
  background: color-mix(in srgb, var(--accent-primary) 13%, var(--bg-dark-primary)) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}
/* Pennan som en liten bricka snett ovanför pricken, uppe till höger. */
:root body #view-admin .admin-user-detail .detail-header-top .header-pills-row:has(#agent-color-picker)::after {
  flex: 0 0 16px !important; width: 16px !important; height: 16px !important;
  margin-left: -14px !important; align-self: flex-start !important; margin-top: -6px !important;
  border-radius: 50% !important;
  background-color: var(--accent-primary) !important;
  background-size: 9px 9px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25) !important;
  border: 1.5px solid var(--bg-dark-primary) !important;
}
:root body #view-admin .admin-user-detail .detail-header-top .header-pills-row.header-pills-row { overflow: visible !important; padding-top: 6px !important; margin-top: -6px !important; }
:root body #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail .detail-header-top .header-pills-row.header-pills-row { overflow: visible !important; }
/* v3 (Patrik 10-09): alla pills + räknare på EN rad i full bredd under avatar/namn. */
:root body #view-admin .admin-user-detail > .detail-header-top > div:not(.agent-desktop-counter-wrap) {
  display: block !important; position: relative !important;
}
:root body #view-admin .admin-user-detail > .detail-header-top .msg-avatar { position: absolute !important; left: 0 !important; top: 0 !important; }
:root body #view-admin .admin-user-detail .detail-header-top > div:not(.agent-desktop-counter-wrap) > div:last-child {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px !important; row-gap: 10px !important;
}
:root body #view-admin .admin-user-detail .detail-header-top > div:not(.agent-desktop-counter-wrap) > div:last-child > div:first-child {
  flex: 1 0 100% !important; min-height: 40px !important; display: flex !important; align-items: center !important; padding-left: 52px !important; box-sizing: border-box !important;
}
:root body #view-admin .admin-user-detail .detail-header-top .detail-subject.detail-subject { padding-right: 140px !important; }
:root body #view-admin .admin-user-detail .detail-header-top .header-pills-row.header-pills-row { order: 2; flex: 0 0 auto !important; }
:root body #view-admin .admin-user-detail .agent-mobile-counter-slot.agent-mobile-counter-slot { order: 3; flex: 0 1 auto !important; min-width: 0 !important; }
:root body #view-admin .admin-user-detail .agent-counter-pills.agent-counter-pills { flex-wrap: nowrap !important; }
:root body #view-admin .admin-user-detail .detail-header-top .header-pills-row > .pill.pill,
:root body #view-admin .admin-user-detail .agent-counter-pill.agent-counter-pill { font-size: 11px !important; padding: 0 9px !important; height: 26px !important; min-height: 26px !important; display: inline-flex !important; align-items: center !important; }
:root body #view-admin .admin-user-detail .detail-header-top > div:not(.agent-desktop-counter-wrap) > div:last-child { width: 100% !important; max-width: none !important; margin: 0 !important; box-sizing: border-box !important; }
:root body #view-admin .admin-user-detail .agent-mobile-counter-slot.agent-mobile-counter-slot { width: auto !important; max-width: none !important; }
:root body #view-admin #admin-detail-content .admin-user-detail > .detail-header-top.detail-header-top > div:not(.agent-desktop-counter-wrap) { display: block !important; }
:root body #view-admin #admin-detail-content .admin-user-detail .detail-header-top > div:not(.agent-desktop-counter-wrap) > div:last-child > * { margin-left: 0 !important; margin-right: 0 !important; } :root body #view-admin #admin-detail-content .admin-user-detail .detail-header-top > div:not(.agent-desktop-counter-wrap) > div:last-child > div:first-child { width: 100% !important; max-width: none !important; }
:root body #view-admin #admin-detail-content .admin-user-detail .detail-header-top > div:not(.agent-desktop-counter-wrap) > div:last-child { flex-direction: row !important; align-items: center !important; }
/* Räknarna högerjusterade så deras högerkant linjerar med anteckningsknappen ovanför. */
:root body #view-admin #admin-detail-content .admin-user-detail .detail-header-top .agent-mobile-counter-slot.agent-mobile-counter-slot { margin-left: auto !important; }
:root body #view-admin #admin-detail-content .admin-user-detail .detail-header-top .agent-mobile-counter-slot > div { justify-content: flex-end !important; }
:root body #view-admin #admin-detail-content .admin-user-detail .detail-header-top > div:not(.agent-desktop-counter-wrap) > div:last-child > .agent-mobile-counter-slot.agent-mobile-counter-slot { margin-left: auto !important; margin-right: 14px !important; }
/* Broadcast-knappen direkt till höger om namnet (inte i ikonraden). */
:root body #view-admin #admin-detail-content .admin-user-detail .detail-header-top #agent-detail-broadcast-btn.footer-icon-btn {
  position: static !important; margin-left: 4px !important; width: 30px !important; height: 30px !important; min-height: 30px !important; flex: 0 0 auto !important;
}
:root body #view-admin #admin-detail-content .admin-user-detail .detail-header-top .detail-subject.detail-subject { padding-right: 0 !important; flex: 0 1 auto !important; }
:root body #view-admin #admin-detail-content .admin-user-detail .detail-header-top > div:not(.agent-desktop-counter-wrap) > div:last-child > div:first-child { padding-right: 116px !important; }
/* Pennbrickan till höger om färgpricken (bredvid, centrerad) i stället för ovanför. */
:root body #view-admin .admin-user-detail .detail-header-top .header-pills-row:has(#agent-color-picker)::after {
  margin-left: -2px !important; margin-top: 0 !important; align-self: center !important;
}
/* Finputs (Ledaren, fri hand): penna liten och diskret bredvid pricken; agentfärgen dämpas i huvudets
   pills så att en stark färg inte tar över (namnet/avataren bär färgen). */
:root body #view-admin .admin-user-detail .detail-header-top .header-pills-row:has(#agent-color-picker)::after {
  flex: 0 0 14px !important; width: 14px !important; height: 14px !important; margin-left: -4px !important;
  background-color: transparent !important; box-shadow: none !important; border: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233d6b50' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3C/svg%3E") !important;
  background-size: 12px 12px !important; opacity: 0.8;
}
:root body #view-admin .admin-user-detail .detail-header-top .header-pills-row > .pill.pill {
  color: color-mix(in srgb, var(--agent-color, var(--accent-primary)) 55%, var(--text-primary)) !important;
  border-color: color-mix(in srgb, var(--agent-color, var(--accent-primary)) 25%, transparent) !important;
  background: color-mix(in srgb, var(--agent-color, var(--accent-primary)) 7%, transparent) !important;
}
:root body #view-admin .admin-user-detail .detail-header-top .detail-subject.detail-subject {
  color: color-mix(in srgb, var(--agent-color, var(--accent-primary)) 60%, var(--text-primary)) !important;
}
/* Egen färgpalett (prov-JS test-fargpalett.js). */
#ledare-farg-palett {
  position: fixed; z-index: 100000; padding: 12px; width: 236px; box-sizing: border-box;
  border-radius: 20px; background: color-mix(in srgb, var(--ledare-varm) 82%, var(--bg-dark-primary));
  border: 1px solid color-mix(in srgb, var(--accent-primary) 22%, transparent);
  box-shadow: 0 12px 30px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.10);
  font-family: inherit;
}
#ledare-farg-palett .lfp-titel { font-size: 11.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-secondary); margin: 0 0 10px 2px; }
#ledare-farg-palett .lfp-rutor { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
#ledare-farg-palett .lfp-ruta { width: 30px; height: 30px; border-radius: 50%; border: none; padding: 0; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35); }
#ledare-farg-palett .lfp-ruta.vald { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c); }
#ledare-farg-palett .lfp-egen { margin-top: 12px; width: 100%; min-height: 36px; border-radius: 999px; border: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-primary); background: color-mix(in srgb, var(--accent-primary) 12%, transparent); cursor: pointer; }
:root body #ledare-farg-palett .lfp-ruta.lfp-ruta {
  width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important;
  border-radius: 50% !important; border: none !important; padding: 0 !important; margin: 0 !important;
  background: var(--c) !important; background-image: none !important; opacity: 1 !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35) !important;
}
:root body #ledare-farg-palett .lfp-ruta.lfp-ruta.vald { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c) !important; }
:root body #ledare-farg-palett .lfp-rutor { display: grid !important; grid-template-columns: repeat(6, 30px) !important; gap: 8px !important; justify-content: space-between !important; }
:root body #ledare-farg-palett#ledare-farg-palett { width: 256px !important; padding: 14px !important; }
/* Patrik: färgprickens pennbricka som förut (grön bricka snett uppe till höger);
   agentens redigera-penna flyttar ner bredvid pricken. */
:root body #view-admin .admin-user-detail .detail-header-top .header-pills-row:has(#agent-color-picker)::after {
  order: 2 !important;
  flex: 0 0 16px !important; width: 16px !important; height: 16px !important;
  margin-left: -14px !important; margin-top: -6px !important; align-self: flex-start !important;
  border-radius: 50% !important; opacity: 1 !important;
  background-color: var(--accent-primary) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3C/svg%3E") !important;
  background-size: 9px 9px !important; background-repeat: no-repeat !important; background-position: center !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25) !important; border: 1.5px solid var(--bg-dark-primary) !important;
}
:root body #view-admin .admin-user-detail .detail-header-top .header-pills-row > #agent-color-picker { order: 1 !important; }
:root body #view-admin #admin-detail-content .admin-user-detail .detail-header-top .header-pills-row > #agent-detail-edit-btn.footer-icon-btn {
  order: 3 !important; position: static !important; margin: 0 0 0 4px !important;
  width: 30px !important; height: 30px !important; min-height: 30px !important;
}
:root body #view-admin #admin-detail-content .admin-user-detail .detail-header-top .header-pills-row > :not(#agent-color-picker):not(#agent-detail-edit-btn) { order: 0; }
/* Ikonraden uppe till höger: nu bara mail + anteckningar ⇒ flytta in mailknappen. */
:root body #view-admin .admin-user-detail .detail-header-top #agent-detail-internal-message-btn { right: 42px !important; }
:root body #view-admin #admin-detail-content .admin-user-detail .detail-header-top .header-pills-row > #agent-detail-edit-btn.footer-icon-btn { width: 26px !important; margin: 0 !important; }
:root body #view-admin #admin-detail-content .admin-user-detail .detail-header-top .header-pills-row > #agent-detail-edit-btn svg { width: 16px !important; height: 16px !important; }
:root body #view-admin #admin-detail-content .admin-user-detail .detail-header-top > div:not(.agent-desktop-counter-wrap) > div:last-child { column-gap: 4px !important; gap: 4px !important; }
:root body #view-admin #admin-detail-content .admin-user-detail .detail-header-top > div:not(.agent-desktop-counter-wrap) > div:last-child > .agent-mobile-counter-slot.agent-mobile-counter-slot { margin-right: 14px !important; }
:root body #view-admin .admin-user-detail .agent-mobile-counter-slot span { padding-left: 8px !important; padding-right: 8px !important; }
:root body #view-admin .admin-user-detail .agent-mobile-counter-slot > div { gap: 4px !important; }
/* v4 (Patrik): räknarna upp i översta raden (höger), mail + anteckningar ner i rad 2 bredvid redigera. */
:root body #view-admin #admin-detail-content .admin-user-detail .detail-header-top > div:not(.agent-desktop-counter-wrap) > div:last-child > .agent-mobile-counter-slot.agent-mobile-counter-slot {
  position: absolute !important; top: 6px !important; right: 0 !important; margin: 0 !important; z-index: 2;
}
:root body #view-admin .admin-user-detail .detail-header-top :is(#agent-detail-internal-message-btn, #agent-detail-notes-btn).footer-icon-btn {
  position: static !important; order: 4 !important; width: 30px !important; height: 30px !important; min-height: 30px !important; margin: 0 !important;
}
:root body #view-admin .admin-user-detail .detail-header-top #agent-detail-notes-btn { order: 5 !important; }
:root body #view-admin #admin-detail-content .admin-user-detail .detail-header-top > div:not(.agent-desktop-counter-wrap) > div:last-child > div:first-child { padding-right: 220px !important; }
/* Mail + anteckningar till höger i rad 2 (redigera stannar vid färgpricken). */
:root body #view-admin #admin-detail-content .admin-user-detail .detail-header-top .header-pills-row.header-pills-row { flex: 1 1 auto !important; }
:root body #view-admin #admin-detail-content .admin-user-detail .detail-header-top .header-pills-row > #agent-detail-internal-message-btn.footer-icon-btn { margin-left: auto !important; }
:root body #view-admin #admin-detail-content .admin-user-detail .detail-header-top .header-pills-row > #agent-detail-notes-btn.footer-icon-btn { margin-right: 8px !important; }
:root body #view-admin #admin-detail-content .admin-user-detail .detail-header-top > div:not(.agent-desktop-counter-wrap) > div:last-child > .agent-mobile-counter-slot.agent-mobile-counter-slot { right: 14px !important; }
/* Systemadmin saknar mailknappen ⇒ anteckningar ska ändå hamna längst till höger. */
:root body #view-admin #admin-detail-content .admin-user-detail .detail-header-top .header-pills-row > #agent-detail-notes-btn.footer-icon-btn { margin-left: auto !important; }
:root body #view-admin #admin-detail-content .admin-user-detail .detail-header-top .header-pills-row > #agent-detail-internal-message-btn ~ #agent-detail-notes-btn.footer-icon-btn { margin-left: 0 !important; }
/* Nyansreglaget i paletten: gradient från mörk till ljus nyans av vald färg, rund tumme i aktuell färg. */
#ledare-farg-palett .lfp-nyans { display: flex; flex-direction: column; gap: 10px; margin: 12px 2px 2px; }
#ledare-farg-palett .lfp-rad { display: flex; align-items: center; gap: 8px; }
#ledare-farg-palett .lfp-nyans-txt { min-width: 52px; }
#ledare-farg-palett .lfp-nyans[hidden] { display: none; }
#ledare-farg-palett .lfp-nyans-txt { font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
#ledare-farg-palett .lfp-reglage { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 14px; border-radius: 999px; margin: 0;
  background: var(--spar, linear-gradient(90deg, var(--fran), var(--till))) !important; border: none !important; outline: none; touch-action: none; }
#ledare-farg-palett .lfp-reglage::-webkit-slider-runnable-track { background: transparent !important; height: 14px; border: none; }
#ledare-farg-palett .lfp-reglage::-webkit-slider-thumb { margin-top: -7px; }
#ledare-farg-palett .lfp-reglage::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--nu); border: 3px solid var(--ledare-varm); box-shadow: 0 2px 8px rgba(0,0,0,0.28); }

/* ---- ur test-adminikon.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan (Patrik 10-09): admin-listans rubrik får en rund ikon till vänster, en per flik
   (samma mjuka runda ton som vy-ikonerna). Prov väljer flik via aktiv flikknapp (nth-child);
   i produktion: data-attribut per flik. */
:root body #view-admin .admin-sidebar-list > .pane-header .admin-list-title-group {
  display: flex !important; align-items: center !important; gap: 10px !important;
}
:root body #view-admin .admin-sidebar-list > .pane-header .admin-list-title-group::before {
  content: ""; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  background-color: color-mix(in srgb, var(--accent-primary) 16%, transparent);
  background-repeat: no-repeat; background-position: center; background-size: 17px 17px;
  background-image: var(--admin-ikon);
}
:root body #view-admin:has(#template-tabs > .header-tab.active:nth-child(1), .header-tabs > .header-tab.active:nth-child(1)) { --admin-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
:root body #view-admin:has(#template-tabs > .header-tab.active:nth-child(2), .header-tabs > .header-tab.active:nth-child(2)) { --admin-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2'/%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M10 6h4M10 10h4M10 14h4M10 18h4'/%3E%3C/svg%3E"); }
:root body #view-admin:has(#template-tabs > .header-tab.active:nth-child(3), .header-tabs > .header-tab.active:nth-child(3)) { --admin-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z'/%3E%3Cpath d='M12 22V12'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3C/svg%3E"); }
:root body #view-admin:has(#template-tabs > .header-tab.active:nth-child(4), .header-tabs > .header-tab.active:nth-child(4)) { --admin-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
:root body #view-admin:has(#template-tabs > .header-tab.active:nth-child(5), .header-tabs > .header-tab.active:nth-child(5)) { --admin-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
/* "Påverkar kundchatten"-märket bredvid rubriken: ingen fyrkantig ram, mjuk rund ton. */
:root body #view-admin .admin-sidebar-list > .pane-header .chat-affects-badge.chat-affects-badge {
  border: none !important; border-radius: 50% !important; box-shadow: none !important;
  width: 24px !important; height: 24px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
  background: color-mix(in srgb, var(--accent-primary) 10%, transparent) !important;
}
/* Kontorskortens bokstavsruta = rund avatar (samma som kund-/agentavatarer). */
:root body #view-admin .admin-mini-card .office-card-bubble.office-card-bubble {
  width: 38px !important; height: 38px !important; min-width: 38px !important;
  border-radius: 50% !important; border-width: 1.5px !important;
  font-size: 15px !important; font-weight: 700 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}

/* ---- ur test-utbud.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan (Patrik 10-09): Utbud & Tjänster — en kolumn med jämna kanter, inga lådor i lådor. */
/* Kampanjsektionen: ingen egen ram/bakgrund, rubriken som de andra sektionsrubrikerna; dubbel gnistikon bort. */
:root body #view-admin #admin-main-list .catalog-campaign-section.catalog-campaign-section {
  border: none !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 10px !important;
}
:root body #view-admin #admin-main-list .catalog-campaign-heading { padding: 2px 4px 8px !important; margin: 0 !important; min-height: 0 !important; }
:root body #view-admin #admin-main-list .catalog-campaign-heading > div:first-child > :first-child { font-size: 15px !important; }
:root body #view-admin #admin-main-list .catalog-campaign-heading > div:first-child svg { display: none !important; }
:root body #view-admin #admin-main-list .catalog-campaign-heading .campaign-new-btn,
:root body #view-admin #admin-main-list .catalog-campaign-heading > button { border: none !important; background: color-mix(in srgb, var(--accent-primary) 14%, transparent) !important; border-radius: 50% !important; width: 36px !important; height: 36px !important; min-height: 36px !important; }
/* Alla kort/grupper på samma vänster-/högerkant. */
:root body #view-admin #admin-main-list :is(.catalog-feature-group, .category-builder-list, .category-builder-group) { padding: 0 !important; margin-left: 0 !important; margin-right: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; }
:root body #view-admin #admin-main-list .admin-mini-card.admin-mini-card.admin-mini-card { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; }
/* Utbudsraderna: kompaktare. */
:root body #view-admin #admin-main-list .category-builder-group .admin-mini-card.admin-mini-card.admin-mini-card { min-height: 52px !important; padding: 6px 8px 6px 12px !important; }
:root body #view-admin #admin-main-list .category-builder-group { margin-bottom: 8px !important; }
:root body #view-admin #admin-main-list .category-builder-group .admin-mini-card button { border: none !important; background: transparent !important; box-shadow: none !important; }
/* Sektionsrubriker: samma stil (små versaler, dämpade), lite luft ovanför. */
:root body #view-admin #admin-main-list :is(.catalog-list-section-label, .category-builder-heading) { padding: 0 4px !important; margin: 14px 0 6px !important; }
:root body #view-admin #admin-main-list .category-builder-heading > span:first-child,
:root body #view-admin #admin-main-list .catalog-list-section-label > span:first-child { font-size: 11.5px !important; letter-spacing: 0.6px !important; color: var(--text-secondary) !important; font-weight: 700 !important; }
:root body #view-admin #admin-main-list .category-builder-list-guide { padding: 0 4px !important; margin: 0 0 8px !important; font-size: 12.5px !important; color: var(--text-secondary) !important; }
:root body #view-admin #admin-main-list .category-builder-heading-actions button { border: none !important; border-radius: 50% !important; background: color-mix(in srgb, var(--accent-primary) 12%, transparent) !important; }
/* Pill "Kundchatt"/antal: rund och lätt. */
:root body #view-admin #admin-main-list .svc-type-pill { border-radius: 999px !important; border: none !important; background: color-mix(in srgb, var(--accent-primary) 14%, transparent) !important; }
/* v2 (Patrik: "tydligare öar"): yttre panelen bort; varje segment = egen ö.
   Ö 1 Kampanjer, ö 2 Fordonstyper, ö 3 Tjänstekatalog (etikett+rubrik+guide+lista ihopsydda). */
:root body #view-admin:has(.catalog-campaign-section) .admin-sidebar-list > .scroll-list#admin-main-list.scroll-list {
  background: transparent !important; border: none !important; box-shadow: none !important; padding: 2px 2px 10px !important;
}
:root body #view-admin #admin-main-list :is(.catalog-campaign-section, .catalog-feature-group).catalog-campaign-section,
:root body #view-admin #admin-main-list .catalog-campaign-section.catalog-campaign-section,
:root body #view-admin #admin-main-list .catalog-feature-group.catalog-feature-group {
  background: color-mix(in srgb, var(--accent-primary) 9%, var(--bg-dark-primary)) !important;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 18%, transparent) !important;
  border-radius: 20px !important;
  box-shadow: 0 3px 12px rgba(0,0,0,0.08) !important;
  padding: 10px !important; margin: 0 0 14px !important;
}
:root body #view-admin #admin-main-list :is(.catalog-list-section-label, .category-builder-heading, .category-builder-list-guide, .category-builder-list).catalog-list-section-label,
:root body #view-admin #admin-main-list :is(.category-builder-heading, .category-builder-list-guide, .category-builder-list) {
  background: color-mix(in srgb, var(--accent-primary) 9%, var(--bg-dark-primary)) !important;
  border-left: 1px solid color-mix(in srgb, var(--accent-primary) 18%, transparent) !important;
  border-right: 1px solid color-mix(in srgb, var(--accent-primary) 18%, transparent) !important;
  margin: 0 !important; padding-left: 14px !important; padding-right: 10px !important;
}
:root body #view-admin #admin-main-list .catalog-list-section-label.catalog-list-section-label {
  background: color-mix(in srgb, var(--accent-primary) 9%, var(--bg-dark-primary)) !important;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 18%, transparent) !important; border-bottom: none !important;
  border-radius: 20px 20px 0 0 !important; padding: 12px 10px 4px 14px !important; margin: 0 !important;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.04) !important;
}
:root body #view-admin #admin-main-list .category-builder-heading { padding-top: 8px !important; }
:root body #view-admin #admin-main-list .category-builder-list.category-builder-list {
  border-bottom: 1px solid color-mix(in srgb, var(--accent-primary) 18%, transparent) !important;
  border-radius: 0 0 20px 20px !important; padding: 2px 10px 6px !important;
  box-shadow: 0 6px 12px -4px rgba(0,0,0,0.10) !important;
}
:root body #view-admin #admin-main-list .catalog-campaign-heading { padding: 2px 2px 8px 4px !important; }
:root body #view-admin #admin-main-list :is(.catalog-list-section-label, .category-builder-heading, .category-builder-list-guide, .category-builder-list) { background-image: none !important; }
:root body #view-admin #admin-main-list .catalog-campaign-heading > div:first-child > * { margin-left: 0 !important; padding-left: 0 !important; gap: 0 !important; }
:root body #view-admin #admin-main-list .catalog-campaign-heading > div:first-child > :first-child { display: block !important; }
/* Kampanjer = "exklusiv" ö: varm guldton, guldkant med svag glöd, guldgnista. */
:root body #view-admin #admin-main-list .catalog-campaign-section.catalog-campaign-section {
  --guld: #b8862b;
  background: linear-gradient(135deg, color-mix(in srgb, var(--guld) 16%, var(--bg-dark-primary)) 0%, color-mix(in srgb, var(--guld) 6%, var(--bg-dark-primary)) 55%, color-mix(in srgb, var(--accent-primary) 8%, var(--bg-dark-primary)) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--guld) 45%, transparent) !important;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--guld) 22%, transparent), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}
:root body #view-admin #admin-main-list .catalog-campaign-heading > div:first-child > :first-child {
  color: color-mix(in srgb, var(--guld) 85%, #000) !important; font-weight: 700 !important; letter-spacing: 0.2px !important;
}
:root body #view-admin #admin-main-list .catalog-campaign-heading > button {
  background: linear-gradient(135deg, #e3b65a, var(--guld)) !important; color: #fff !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--guld) 45%, transparent) !important;
}
:root body #view-admin #admin-main-list .catalog-campaign-heading > button svg { stroke: #fff !important; color: #fff !important; }
:root body #view-admin #admin-main-list .catalog-campaign-section .admin-mini-card.admin-mini-card.admin-mini-card {
  background: color-mix(in srgb, var(--ledare-varm) 45%, color-mix(in srgb, var(--guld) 10%, var(--bg-dark-primary))) !important;
  border: 1px solid color-mix(in srgb, var(--guld) 30%, transparent) !important;
}
:root body #view-admin #admin-main-list .catalog-campaign-section .svc-type-pill { background: color-mix(in srgb, var(--guld) 20%, transparent) !important; color: color-mix(in srgb, var(--guld) 80%, #000) !important; }
:root body #view-admin #admin-main-list .catalog-campaign-heading .campaign-heading-icon { display: none !important; } :root body #view-admin #admin-main-list .catalog-campaign-heading > div:first-child > small { display: block !important; margin-top: 2px !important; color: color-mix(in srgb, #b8862b 60%, var(--text-secondary)) !important; }
/* Kampanj-ön v2: kortet = "Ny kampanj" med guldknappen på kortet; kampanjerna listas under. */
:root body #view-admin #admin-main-list .catalog-campaign-section .campaign-summary-card.campaign-summary-card.campaign-summary-card {
  position: relative !important; padding-right: 64px !important; min-height: 64px !important; cursor: pointer;
  border: 1.5px dashed color-mix(in srgb, #b8862b 45%, transparent) !important;
}
:root body #view-admin #admin-main-list .campaign-summary-card .lk-titel { font-weight: 700; font-size: 15px; color: color-mix(in srgb, #b8862b 85%, #000); }
:root body #view-admin #admin-main-list .campaign-summary-card .lk-sub { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }
:root body #view-admin #admin-main-list .campaign-summary-card > .lk-guld.lk-guld {
  position: absolute !important; right: 12px !important; top: 50% !important; transform: translateY(-50%) !important;
  width: 40px !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; pointer-events: none;
}
:root body #view-admin #admin-main-list .catalog-campaign-heading > div:first-child > small { display: none !important; }
:root body #view-admin #admin-main-list .catalog-campaign-section .lk-lista { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
:root body #view-admin #admin-main-list .catalog-campaign-section .lk-rad {
  display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; text-align: left !important;
  min-height: 48px !important; padding: 8px 12px !important; border-radius: 14px !important; border: none !important; cursor: pointer;
  background: color-mix(in srgb, var(--ledare-varm) 40%, color-mix(in srgb, #b8862b 8%, var(--bg-dark-primary))) !important;
  color: var(--text-primary) !important; font: inherit !important; box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
:root body #view-admin #admin-main-list .lk-rad .lk-prick { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--text-secondary) 40%, transparent); }
:root body #view-admin #admin-main-list .lk-rad.aktiv .lk-prick { background: #2e8b57; box-shadow: 0 0 0 3px color-mix(in srgb, #2e8b57 20%, transparent); }
:root body #view-admin #admin-main-list .lk-rad .lk-namn { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root body #view-admin #admin-main-list .lk-rad .lk-datum { flex: 0 0 auto; font-size: 12px; color: var(--text-secondary); }
:root body #view-admin #admin-main-list .lk-rad svg { flex: 0 0 auto; color: #b8862b; }
:root body #view-admin #admin-main-list .lk-tom { font-size: 13px; color: var(--text-secondary); padding: 4px 6px; }
:root body #view-admin #admin-main-list .lk-rad.utgangen .lk-namn { color: var(--text-secondary) !important; font-weight: 500 !important; }
:root body #view-admin #admin-main-list .lk-rad.utgangen .lk-datum::after { content: " · utgången"; }
:root body #view-admin #admin-main-list .campaign-summary-card > .lk-guld.lk-guld.lk-guld {
  background: linear-gradient(135deg, #e3b65a, #b8862b) !important; color: #fff !important; border: none !important; border-radius: 50% !important;
  box-shadow: 0 2px 8px color-mix(in srgb, #b8862b 45%, transparent) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
:root body #view-admin #admin-main-list .campaign-summary-card > .lk-guld svg { stroke: #fff !important; color: #fff !important; }
:root body #view-admin #admin-main-list .lk-rad .lk-datum { font-size: 11.5px !important; }

/* ---- ur test-kampanjmodal.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan (Patrik 10-09): kampanjrutan (Ny/Redigera) i kortspråket, med kampanjens guldton. */
:root body #atlas-campaign-modal.custom-modal-overlay { background: rgba(0,0,0,0.28) !important; padding: 10px !important; box-sizing: border-box !important; }
:root body #atlas-campaign-modal .glass-modal-box.campaign-modal-box.campaign-modal-box {
  width: 100% !important; max-width: 100% !important; max-height: 100% !important; height: auto !important; margin: auto !important;
  border: 1.5px solid color-mix(in srgb, #b8862b 45%, transparent) !important; border-top-width: 1.5px !important;
  border-radius: 22px !important; overflow: hidden !important;
  box-shadow: 0 18px 44px rgba(0,0,0,0.30), 0 4px 12px color-mix(in srgb, #b8862b 22%, transparent) !important;
  background: var(--bg-dark-primary) !important;
}
:root body #atlas-campaign-modal .glass-modal-header {
  background: linear-gradient(135deg, color-mix(in srgb, #b8862b 16%, var(--bg-dark-primary)), color-mix(in srgb, #b8862b 5%, var(--bg-dark-primary))) !important;
  border-bottom: 1px solid color-mix(in srgb, #b8862b 25%, transparent) !important; padding: 14px 12px 14px 16px !important;
}
:root body #atlas-campaign-modal .campaign-modal-icon { width: 38px !important; height: 38px !important; border-radius: 50% !important; border: none !important; box-shadow: none !important;
  background: linear-gradient(135deg, #e3b65a, #b8862b) !important; color: #fff !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
:root body #atlas-campaign-modal .campaign-modal-icon svg { stroke: #fff !important; color: #fff !important; }
:root body #atlas-campaign-modal #campaign-modal-title { color: color-mix(in srgb, #b8862b 85%, #000) !important; font-size: 16px !important; }
:root body #atlas-campaign-modal .campaign-modal-close { background: none !important; border: none !important; box-shadow: none !important; }
:root body #atlas-campaign-modal .campaign-modal-body { padding: 14px 16px !important; }
:root body #atlas-campaign-modal .campaign-modal-body :is(input.filter-input, textarea.filter-input, select, .atlas-filter-dd) { border-radius: 14px !important; }
:root body #atlas-campaign-modal .campaign-form-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
:root body #atlas-campaign-modal .campaign-form-grid > label:nth-child(-n+2) { grid-column: 1 / -1; }
/* Foten: kompakt. Hjälptexten blir en liten rad; spara = guldknapp med text. */
:root body #atlas-campaign-modal .glass-modal-footer { padding: 10px 16px 14px !important; display: flex !important; flex-direction: column !important; gap: 10px !important; overflow: visible !important;
  border-top: 1px solid color-mix(in srgb, #b8862b 20%, transparent) !important; background: color-mix(in srgb, #b8862b 5%, var(--bg-dark-primary)) !important; }
:root body #atlas-campaign-modal .campaign-modal-footer-info { border: none !important; background: none !important; padding: 0 !important; font-size: 12px !important; line-height: 1.4 !important;
  color: var(--text-secondary) !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important; }
:root body #atlas-campaign-modal .campaign-footer-info-icon { display: none !important; }
:root body #atlas-campaign-modal .campaign-modal-actions { width: 100% !important; }
:root body #atlas-campaign-modal .campaign-footer-icon-btn.is-save {
  width: 100% !important; min-height: 46px !important; border-radius: 999px !important; border: none !important;
  background: linear-gradient(135deg, #e3b65a, #b8862b) !important; color: #fff !important;
  box-shadow: 0 4px 12px color-mix(in srgb, #b8862b 40%, transparent) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; font-weight: 700 !important; font-size: 15px !important;
}
:root body #atlas-campaign-modal .campaign-footer-icon-btn.is-save svg { stroke: #fff !important; color: #fff !important; width: 18px !important; height: 18px !important; }
:root body #atlas-campaign-modal .campaign-footer-icon-btn.is-save::after { content: attr(aria-label); }
:root body #atlas-campaign-modal .glass-modal-footer.glass-modal-footer { min-height: 0 !important; height: auto !important; flex: 0 0 auto !important; justify-content: flex-start !important; } :root body #atlas-campaign-modal .campaign-modal-actions.campaign-modal-actions { margin: 0 !important; min-height: 0 !important; height: auto !important; }
:root body #atlas-campaign-modal .campaign-modal-actions.campaign-modal-actions { flex: 0 0 auto !important; align-items: stretch !important; } :root body #atlas-campaign-modal .glass-modal-body.campaign-modal-body { flex: 1 1 auto !important; }

/* ---- ur test-kategori.css (mobilrundan 2026-10-09/10, godkänd live av Patrik) ---- */
/* Mobilrundan (Patrik 10-09: "platt"): kategori-/utbudsdetaljen — tre tydliga öar med djup. */
:root body #view-admin .category-builder-detail.detail-body { padding: 12px !important; gap: 14px !important; display: flex !important; flex-direction: column !important; }
/* Ö 1: huvudet — ikon i rund ton, namn, statuschips. */
:root body #view-admin .category-builder-detail .category-builder-header.glass-panel {
  margin: 0 !important; padding: 14px !important; border-radius: 20px !important;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, transparent) !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; display: flex !important; align-items: center !important; gap: 12px !important;
}
:root body #view-admin #category-builder-header-icon {
  width: 46px !important; height: 46px !important; min-width: 46px !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) 18%, var(--bg-dark-primary)) !important; border: none !important;
}
:root body #view-admin .category-builder-header-copy :is(span, small, div) { border-radius: 999px !important; }
/* Ö 2: förklaringen — mjuk, ingen hård ram, info-ikon-känsla. */
:root body #view-admin .category-builder-detail .kb-guide-hero {
  margin: 0 !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;
}
:root body #view-admin .category-builder-detail .kb-guide-hero > div { border: none !important; padding: 14px 16px !important; background: transparent !important; box-shadow: none !important; }
:root body #view-admin .category-builder-detail .kb-guide-hero :is(h3, h4, strong, b) { font-size: 14.5px !important; line-height: 1.35 !important; }
:root body #view-admin .category-builder-detail .kb-guide-hero p { font-size: 13.5px !important; line-height: 1.45 !important; margin-top: 6px !important; }
/* Ö 3: Uppgifter — eget lyft kort; låsknappen rund uppe till höger. */
:root body #view-admin .category-builder-detail .category-builder-main.glass-panel {
  margin: 0 !important; padding: 16px !important; border-radius: 20px !important;
  background: color-mix(in srgb, var(--ledare-varm) 45%, var(--bg-dark-primary)) !important;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 20%, transparent) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.10) !important;
}
:root body #view-admin .category-builder-edit-heading { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; align-items: start !important; gap: 10px !important; }
:root body #view-admin .category-builder-edit-heading h4 { margin: 0 !important; font-size: 17px !important; }
:root body #view-admin .category-builder-edit-heading p { margin: 4px 0 0 !important; font-size: 12.5px !important; color: var(--text-secondary) !important; }
:root body #view-admin #category-builder-unlock-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 #category-builder-unlock-btn svg { stroke: #fff !important; color: #fff !important; }
:root body #view-admin .category-builder-bound-note { border-radius: 14px !important; border: none !important; font-size: 12.5px !important; margin: 12px 0 !important;
  background: color-mix(in srgb, var(--accent-primary) 10%, transparent) !important; }
/* Fälten: varje fält som en egen rad med ljus botten, etiketten som liten rubrik. */
:root body #view-admin .category-builder-main .category-builder-field {
  margin: 0 0 8px !important; padding: 12px 14px !important; border-radius: 14px !important; border: none !important;
  background: color-mix(in srgb, var(--accent-primary) 6%, var(--bg-dark-primary)) !important;
}
:root body #view-admin .category-builder-main .category-builder-field + .category-builder-field { border-top: none !important; }
:root body #view-admin .category-builder-main .category-builder-field > :first-child { font-size: 11.5px !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; font-weight: 700 !important; color: var(--text-secondary) !important; }
/* Huvudets statusrad som pills (UTBUD · KOPPLAD · AKTIV) i samma stil. */
:root body #view-admin .category-builder-header-copy > :last-child { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; align-items: center !important; }
:root body #view-admin .category-builder-header-copy > :last-child > * {
  border-radius: 999px !important; padding: 3px 10px !important; font-size: 10.5px !important; letter-spacing: 0.4px !important;
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent) !important; border: none !important;
}
/* Förklaringen: mindre luft. */
:root body #view-admin .category-builder-detail .kb-guide-hero > div { padding: 12px 14px !important; }
/* Redigeraläget: ikonväljaren som mjuk egen yta; ikonerna i runda knappar, vald = fylld ring;
   förhandsvisningen som liten rad; spara/avbryt runda i rubriken. */
:root body #view-admin .category-builder-icon-picker.category-builder-icon-picker {
  border: none !important; border-radius: 16px !important; overflow: hidden !important; margin: 0 0 8px !important;
  background: color-mix(in srgb, var(--accent-primary) 6%, var(--bg-dark-primary)) !important;
}
:root body #view-admin .category-builder-icon-grid.category-builder-icon-grid {
  display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 6px !important;
  padding: 12px !important; max-height: 220px !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
}
:root body #view-admin .category-builder-icon-choice.category-builder-icon-choice {
  width: 44px !important; height: 44px !important; min-width: 0 !important; justify-self: center !important;
  border-radius: 50% !important; border: none !important; box-shadow: none !important; background: transparent !important;
}
:root body #view-admin .category-builder-icon-choice.category-builder-icon-choice svg { width: 22px !important; height: 22px !important; }
:root body #view-admin .category-builder-icon-choice.category-builder-icon-choice.is-selected {
  background: var(--accent-primary) !important; color: #fff !important;
  box-shadow: 0 3px 8px color-mix(in srgb, var(--accent-primary) 35%, transparent) !important;
}
:root body #view-admin .category-builder-icon-choice.is-selected svg { stroke: #fff !important; color: #fff !important; }
:root body #view-admin .category-builder-preview.category-builder-preview {
  display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important;
  padding: 10px 14px !important; border: none !important; border-top: 1px solid color-mix(in srgb, var(--accent-primary) 15%, transparent) !important;
  background: transparent !important; font-size: 12.5px !important; color: var(--text-secondary) !important;
}
:root body #view-admin .category-builder-main :is(input.filter-input, textarea.filter-input) { border-radius: 14px !important; min-height: 44px !important; }
:root body #view-admin #category-builder-form-actions { display: flex !important; gap: 8px !important; }
:root body #view-admin #category-builder-form-actions .btn-glass-icon {
  width: 44px !important; height: 44px !important; border-radius: 50% !important; border: none !important;
}
:root body #view-admin #category-builder-form-actions .admin-save-icon-btn { 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 #category-builder-form-actions .admin-save-icon-btn svg { stroke: #fff !important; }
:root body #view-admin #category-builder-form-actions .admin-cancel-icon-btn { background: color-mix(in srgb, #e5484d 12%, transparent) !important; color: #c62a2f !important; }
:root body #view-admin #category-builder-form-actions .admin-cancel-icon-btn svg { stroke: #c62a2f !important; }
:root body #view-admin #category-builder-form-actions[hidden] { display: none !important; } :root body #view-admin #category-builder-unlock-btn[hidden] { display: none !important; } :root body #view-admin .category-builder-edit-heading > #category-builder-form-actions { grid-column: 2 !important; grid-row: 1 !important; }
/* Variant 2: namn + ikon på EN rad — rund ikonbricka (48) till vänster, namnet bredvid. */
:root body #view-admin .category-builder-name-icon-value.category-builder-name-icon-value {
  display: flex !important; flex-direction: row-reverse !important; justify-content: flex-end !important; align-items: center !important; gap: 12px !important; padding: 4px 0 !important;
}
:root body #view-admin #category-builder-current-icon {
  width: 48px !important; height: 48px !important; min-width: 48px !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) 16%, var(--bg-dark-primary)) !important;
}
:root body #view-admin #category-builder-current-icon svg { width: 26px !important; height: 26px !important; }
:root body #view-admin .category-builder-name-icon-value > #category-builder-name-text { font-size: 17px !important; font-weight: 650 !important; }
/* Skrivfälten ser ut som fält även i låst läge (ljus botten, rundad kant). */
:root body #view-admin .category-builder-description-readonly,
:root body #view-admin #category-builder-description-value {
  display: block !important; min-height: 64px !important; padding: 10px 14px !important; 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) 55%, var(--bg-dark-primary)) !important; font-size: 14.5px !important; margin-top: 6px !important;
}
:root body #view-admin #category-builder-description-value:empty::before,
:root body #view-admin #category-builder-description-value { color: var(--text-primary); }
:root body #view-admin .category-builder-main :is(input.filter-input, textarea.filter-input) {
  background: color-mix(in srgb, var(--ledare-varm) 55%, var(--bg-dark-primary)) !important;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 28%, transparent) !important;
}
:root body #view-admin .category-builder-main :is(input.filter-input, textarea.filter-input):disabled,
:root body #view-admin .category-builder-main :is(input.filter-input, textarea.filter-input)[readonly] { opacity: 1 !important; color: var(--text-primary) !important; }
/* Hjälptexten direkt under fältets rubrik (Patrik), i alla fält för enhetlighet. */
:root body #view-admin .category-builder-main .category-builder-field { display: flex !important; flex-direction: column !important; }
:root body #view-admin .category-builder-main .category-builder-field > label { order: 0; }
:root body #view-admin .category-builder-main .category-builder-field > .category-builder-field-help { order: 1; margin: 2px 0 8px !important; font-size: 12px !important; line-height: 1.4 !important; }
:root body #view-admin .category-builder-main .category-builder-field > :not(label):not(.category-builder-field-help) { order: 2; }
:root body #view-admin .category-builder-main .category-builder-field.category-builder-field { align-items: stretch !important; text-align: left !important; } :root body #view-admin .category-builder-main .category-builder-field > :is(label, .category-builder-field-help) { text-align: left !important; align-self: flex-start !important; } :root body #view-admin .category-builder-main .category-builder-field > .category-builder-visibility-control { align-self: flex-start !important; }
/* Huvudets pills: en rad, gemener, tätare; AKTIV med grön prick. */
:root body #view-admin .category-builder-header .category-builder-meta.category-builder-meta { display: flex !important; flex-wrap: nowrap !important; gap: 5px !important; align-items: center !important; margin-top: 6px !important; }
:root body #view-admin .category-builder-header .category-builder-meta > * {
  text-transform: none !important; letter-spacing: 0 !important; font-size: 11.5px !important; font-weight: 600 !important;
  padding: 3px 9px !important; margin: 0 !important; white-space: nowrap !important; border-radius: 999px !important;
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent) !important; border: none !important; line-height: 1.4 !important;
}
:root body #view-admin .category-builder-header .category-builder-meta > *::first-letter { text-transform: uppercase; }
:root body #view-admin .category-builder-header .category-builder-meta > .category-builder-badge { font-size: 0 !important; }
:root body #view-admin .category-builder-header .category-builder-meta > .category-builder-badge:not(.category-builder-badge--bound)::after { content: "Utbud"; font-size: 11.5px; }
:root body #view-admin .category-builder-header .category-builder-meta > .category-builder-badge--bound::after { content: "Kunskapsbanken"; font-size: 11.5px; }
:root body #view-admin .category-builder-header .category-builder-meta > p { display: inline-flex !important; align-items: center !important; gap: 5px !important; font-size: 0 !important; }
:root body #view-admin .category-builder-header .category-builder-meta > p::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2e8b57; }
:root body #view-admin .category-builder-header .category-builder-meta > p::after { content: "Aktiv"; font-size: 11.5px; }
:root body #view-admin .category-builder-header #category-builder-header-name { font-size: 19px !important; margin: 0 !important; }
/* Huvud v3: ikon · namn (centrerat mot ikonen) ........ pills till höger. Långt namn ⇒ pills bryter ner under. */
:root body #view-admin .category-builder-header .category-builder-header-copy.category-builder-header-copy {
  flex: 1 1 auto !important; min-width: 0 !important;
  display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 6px 10px !important;
}
:root body #view-admin .category-builder-header #category-builder-header-name { flex: 0 1 auto !important; min-width: 0 !important; line-height: 1.2 !important; }
:root body #view-admin .category-builder-header .category-builder-meta.category-builder-meta { margin: 0 0 0 auto !important; }
:root body #view-admin .category-builder-detail .category-builder-header.glass-panel { align-items: center !important; }
/* Patrik 10-14: personalkortens ärendekort — tre rader som förut men tätare; namnet centrerat mot ikonraden. */
:root body #view-admin #agent-detail-body .admin-ticket-preview.admin-ticket-preview.admin-ticket-preview { grid-template-rows: auto auto auto !important; row-gap: 4px !important; align-items: center !important; }
:root body #view-admin #agent-detail-body .admin-ticket-preview .atp-sender { align-self: center !important; margin: 0 !important; }
:root body #view-admin #agent-detail-body .admin-ticket-preview .atp-subject { margin: 0 !important; transform: translateY(-3px); }
:root body #view-admin #agent-detail-body .admin-ticket-preview .atp-actions { align-self: center !important; }
:root body #view-admin #agent-detail-body .admin-ticket-preview .atp-actions > * { width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; }
/* Patrik 10-14: "Pågående ärenden för agent" på en egen ö, samma stil som Ärende-/Vybehörighet. */
:root body #view-admin #agent-detail-body .admin-zoom-fill-section:has(> #agent-ticket-list-panel) {
  background: color-mix(in srgb, var(--ledare-varm) 45%, var(--bg-dark-primary)) !important;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 20%, transparent) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  padding: 12px !important;
}
:root body #view-admin #agent-detail-body .admin-zoom-fill-section:has(> #agent-ticket-list-panel) > h4 { margin: 0 0 8px 2px !important; color: var(--accent-primary) !important; }
:root body #view-admin #agent-detail-body .admin-zoom-fill-section:has(> #agent-ticket-list-panel) { flex: none !important; height: auto !important; min-height: 0 !important; }
:root body #view-admin #agent-detail-body #agent-ticket-list-panel.admin-zoom-fill-panel.admin-zoom-fill-panel { padding: 0 !important; min-height: 0 !important; height: auto !important; max-height: none !important; flex: none !important; }
:root body #view-admin #agent-detail-body #agent-ticket-list-panel > .scroll-list.scroll-list { flex: none !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }
:root body #view-admin #agent-detail-body #agent-ticket-list-panel .admin-ticket-preview { flex: none !important; margin: 0 !important; }
:root body #view-admin #agent-detail-body #agent-ticket-list-panel > .scroll-list.scroll-list.scroll-list { overflow: visible !important; overscroll-behavior: auto !important; }
:root body #view-admin #agent-detail-body #agent-ticket-list-panel.admin-zoom-fill-panel.admin-zoom-fill-panel.admin-zoom-fill-panel { overflow: visible !important; }