/* mobile-soft-office-detail.css — mobilrundan (AT-74, KAN-421): Enhetskortets detaljvy på mobil, provet test-kontordetalj.css
   (v1–v4) som Patrik godkände live 10-09. Laddas bara ≤768 px. Klassnamnen ledare-pris-uppe/ledare-rak-nere sätts av
   mobile-soft-ui.js (arrangeOfficeHeader), som flyttar Prislista och räknarna bara på mobil; desktopens DOM är orörd. */
/* Kontorsdetaljen. (1) .admin-office-detail-grid hade en fast kolumn 451 px i en 401 px bred yta
   ⇒ Identitet/Tjänster sköt ut 50 px över högerkanten (låsknappen kapad) ⇒ en flexibel kolumn.
   (2) Sektionsrutorna (Aktiva ärenden, Kopplade agenter, Identitet …) och korten inuti hade nästan samma ton i mörkt
   ⇒ sektionerna = ledare-varm (synlig ö), korten/raderna inuti = något mörkare så nivåerna skiljs åt. */
:root body #view-admin #admin-detail-content .admin-office-detail-grid.admin-office-detail-grid { grid-template-columns: minmax(0, 1fr) !important; }
:root body #view-admin #admin-detail-content .admin-office-detail-grid > * { min-width: 0 !important; max-width: 100% !important; }
:root body #view-admin #admin-detail-content :is(.admin-zoom-fill-grid, .admin-office-detail-grid) > :is(.glass-panel, div) {
  background: var(--ledare-varm) !important; border: none !important; border-radius: 20px !important; box-shadow: 0 4px 14px -8px rgba(0,0,0,0.3) !important;
}
:root body #view-admin #admin-detail-content :is(.admin-zoom-fill-grid, .admin-office-detail-grid) :is(.admin-ticket-preview, .admin-agent-row, [class*="agent-chip"], input.admin-config-field, .admin-config-row) {
  background: color-mix(in srgb, var(--ledare-varm) 70%, var(--bg-dark-primary, #000)) !important;
}
/* Patrik 10-09: kontorshuvudet "plottrigt". Rad 1: rund avatar + namn + sänd-ikon. Rad 2: siffrorna som mjuka pills.
   Rad 3: ID (vanlig font) · färgprick · anteckningar · Prislista som mjuk pill. "KONTOR"-pillen döljs (står redan i fliken).
   Läsarkrysset (test-lasarkryss.js) hör inte hemma i adminhuvudet ⇒ dolt här. */
:root body #view-admin #admin-detail-content .detail-header-top #office-avatar-circle.profile-avatar { border-radius: 50% !important; width: 48px !important; height: 48px !important; align-self: flex-start !important; margin-top: 2px !important; }
:root body #view-admin #admin-detail-content .detail-header-top .detail-subject { font-size: 19px !important; font-weight: 750 !important; }
:root body #view-admin #admin-detail-content .detail-header-top .office-mobile-counter-slot { display: flex !important; gap: 6px !important; margin: 4px 0 2px !important; height: auto !important; }
:root body #view-admin #admin-detail-content .detail-header-top .office-mobile-counter-slot > div > * { border: none !important; border-radius: 999px !important; background: color-mix(in srgb, var(--accent-primary) 13%, transparent) !important; }
:root body #view-admin #admin-detail-content .detail-header-top .header-pills-row { display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: nowrap !important; margin-top: 4px !important; }
:root body #view-admin #admin-detail-content .detail-header-top .header-pills-row > .pill.office-pill-accent { display: none !important; }
:root body #view-admin #admin-detail-content .detail-header-top #office-id-pill.pill { font-family: inherit !important; letter-spacing: 0 !important; border: none !important; border-radius: 999px !important; padding: 3px 10px !important; background: color-mix(in srgb, var(--text-primary) 8%, transparent) !important; color: var(--text-secondary) !important; font-size: 12px !important; }
:root body #view-admin #admin-detail-content .detail-header-top input#inp-office-color-inline { width: 26px !important; height: 26px !important; min-width: 26px !important; border-radius: 50% !important; padding: 0 !important; border: 2px solid var(--ledare-varm) !important; overflow: hidden !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-primary) 20%, transparent) !important; }
:root body #view-admin #admin-detail-content .detail-header-top input#inp-office-color-inline::-webkit-color-swatch-wrapper { padding: 0 !important; }
:root body #view-admin #admin-detail-content .detail-header-top input#inp-office-color-inline::-webkit-color-swatch { border: none !important; border-radius: 50% !important; }
:root body #view-admin #admin-detail-content .detail-header-top [id^="prislista-trigger"] { margin-left: auto !important; border: none !important; border-radius: 999px !important; padding: 5px 12px !important; min-height: 0 !important; background: color-mix(in srgb, var(--accent-primary) 14%, transparent) !important; }
:root body #view-admin #admin-detail-content .detail-header-top input#inp-office-color-inline.x, :root body #view-admin #admin-detail-content .detail-header-top .header-pills-row input#inp-office-color-inline { height: 26px !important; min-height: 26px !important; max-height: 26px !important; flex: 0 0 26px !important; }
/* v2 (Patrik 10-09: "gör den likt personal"): samma upplägg som agenthuvudet.
   Rad 1: avatar 44 · namn · sänd-ikon ............ siffrorna (uppe till höger).
   Rad 2 (från vänsterkanten): ID · färgprick · anteckningar ............ Prislista. */
:root body #view-admin .detail-header-top:has(#office-avatar-circle) > div:first-child { position: relative !important; display: flex !important; align-items: flex-start !important; gap: 10px !important; }
:root body #view-admin .detail-header-top #office-avatar-circle.profile-avatar.profile-avatar { width: 44px !important; height: 44px !important; min-width: 44px !important; margin: 0 !important; font-size: 18px !important; }
:root body #view-admin .detail-header-top:has(#office-avatar-circle) > div:first-child > div:last-child { flex: 1 1 auto !important; min-width: 0 !important; }
:root body #view-admin .detail-header-top:has(#office-avatar-circle) > div:first-child > div:last-child > div:first-child { min-height: 44px !important; display: flex !important; align-items: center !important; gap: 4px !important; }
:root body #view-admin .detail-header-top .office-mobile-counter-slot.office-mobile-counter-slot { position: absolute !important; top: 8px !important; right: 0 !important; margin: 0 !important; display: flex !important; gap: 6px !important; }
:root body #view-admin .detail-header-top .office-mobile-counter-slot > div > * { border: 1px solid color-mix(in srgb, var(--accent-primary) 30%, transparent) !important; padding: 3px 10px !important; }
:root body #view-admin .detail-header-top:has(#office-avatar-circle) .header-pills-row.header-pills-row { margin: 10px 0 0 -54px !important; width: calc(100% + 54px) !important; }
/* v3: kontorsnamn kan vara långa ("Göteborg - Högsbo") ⇒ räknarna under namnet (inte uppe till höger). */
:root body #view-admin .detail-header-top .office-mobile-counter-slot.office-mobile-counter-slot.office-mobile-counter-slot { position: static !important; width: auto !important; margin: 2px 0 0 !important; }
:root body #view-admin .detail-header-top .office-mobile-counter-slot > div { width: auto !important; }
:root body #view-admin .detail-header-top:has(#office-avatar-circle) .detail-subject { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
/* v4: Prislista på namnraden (höger), räknarna sist på knappraden (höger). */
:root body #view-admin .detail-header-top [id^="prislista-trigger"].ledare-pris-uppe { margin-left: auto !important; flex-shrink: 0 !important; }
:root body #view-admin .detail-header-top .office-mobile-counter-slot.ledare-rak-nere.ledare-rak-nere { margin: 0 0 0 auto !important; flex-shrink: 0 !important; }
:root body #view-admin .detail-header-top:has(#office-avatar-circle) #office-id-pill { min-width: 0 !important; flex: 0 1 auto !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
/* v5 (Patrik 10-14): Aktiva ärenden + Kopplade agenter sist på mobil (Identitet och Produkter är det admin redigerar),
   och ärendelistan kompakt så att flera ärenden syns utan större ruta: kontorspillen döljs (samma kontor som kortet),
   ämnet på en rad, listan växer med innehållet upp till ca fyra ärenden och scrollar sedan. */
:root body #view-admin #office-detail-body.detail-body { display: flex !important; flex-direction: column !important; }
:root body #view-admin #office-detail-body > .admin-office-detail-grid { order: 1 !important; }
:root body #view-admin #office-detail-body > #office-top-grid { order: 2 !important; grid-template-columns: minmax(0, 1fr) !important; }
:root body #view-admin #office-detail-body > .admin-danger-footer { order: 3 !important; }
:root body #view-admin #office-top-grid > .admin-zoom-fill-panel { min-height: 0 !important; }
:root body #view-admin #box-tickets .scroll-list { flex: 0 1 auto !important; max-height: 296px !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }
:root body #view-admin #box-tickets .admin-ticket-preview { padding: 10px 12px !important; margin: 0 !important; min-height: 0 !important; }
:root body #view-admin #box-tickets .admin-ticket-preview .atp-pills { display: none !important; }
:root body #view-admin #box-tickets .admin-ticket-preview .atp-subject { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important; -webkit-line-clamp: unset !important; margin-top: 2px !important; }
:root body #view-admin #box-tickets .admin-ticket-preview .atp-footer-row { margin-top: 2px !important; min-height: 0 !important; }
:root body #view-admin #box-tickets .admin-ticket-preview .atp-actions > * { min-height: 34px !important; height: 34px !important; min-width: 34px !important; width: 34px !important; }
/* v5b: rutorna ska bara vara så höga som innehållet (annan mobilregel gav listan flex:1 och 40 px luft nederst). */
:root body #view-admin #office-detail-body > #office-top-grid#office-top-grid { grid-auto-rows: auto !important; align-items: start !important; min-height: 0 !important; flex: none !important; }
:root body #view-admin #office-top-grid > .admin-zoom-fill-panel.admin-zoom-fill-panel { min-height: 0 !important; height: auto !important; flex: none !important; }
:root body #view-admin #office-top-grid > .admin-zoom-fill-panel > .scroll-list.scroll-list { flex: none !important; padding-bottom: 0 !important; min-height: 0 !important; }
:root body #view-admin #office-top-grid > #box-tickets > .scroll-list > .admin-ticket-preview { flex: none !important; }
:root body #view-admin #office-top-grid > #box-tickets.admin-zoom-fill-panel.admin-zoom-fill-panel { max-height: none !important; }
/* v5c (Patrik 10-14): tjänsteraderna lika breda som ärendekorten (samma 10 px inre kant som Aktiva ärenden). */
:root body #view-admin #box-prices #price-list-grid { margin-left: -11px !important; margin-right: -11px !important; }
/* Scrollen i ärendelistan lämnar över till sidan vid listans slut (annars fastnar fingret). */
:root body #view-admin #office-top-grid > #box-tickets > .scroll-list.scroll-list { overscroll-behavior: auto !important; }

/* AT-162 (Patrik 10-30): kontorshuvudet på mobil.
   Namnraden: namn · sänd · färgring · prislista (bara ikonen) · anteckningar sist (JS: arrangeOfficeHeader flyttar färgring och anteckningar hit).
   Långa namn går att svepa i sidled, med toning i högerkanten, i stället för "…". ID-brickan döljs (ID:t står i Identitet).
   Raden under: bara räknarna, till höger. Kolumnerna runt rutorna är genomskinliga, så att inget krämfärgat band syns mellan rutorna. */
:root body #view-admin #admin-detail-content .detail-header-top .header-pills-row > #office-id-pill.pill { display: none !important; }
:root body #view-admin #admin-detail-content .admin-office-detail .detail-header-top .header-pills-row > .office-mobile-counter-slot.office-mobile-counter-slot { margin-left: auto !important; }
:root body #view-admin .detail-header-top:has(#office-avatar-circle) .detail-subject.detail-subject { order: 0; overflow-x: auto !important; overflow-y: hidden !important; text-overflow: clip !important; scrollbar-width: none !important; touch-action: pan-x !important; overscroll-behavior-x: contain !important; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent); }
:root body #view-admin .detail-header-top:has(#office-avatar-circle) .detail-subject.detail-subject::-webkit-scrollbar { display: none !important; }
:root body #view-admin .detail-header-top:has(#office-avatar-circle) .detail-subject ~ .footer-icon-btn:not(.notes-trigger-btn) { order: 1; }
:root body #view-admin .detail-header-top:has(#office-avatar-circle) .detail-subject ~ #inp-office-color-inline { order: 2; margin-left: 4px !important; }
:root body #view-admin #admin-detail-content .detail-header-top [id^="prislista-trigger"].ledare-pris-uppe { order: 3; font-size: 0 !important; gap: 0 !important; width: 32px !important; min-width: 32px !important; height: 32px !important; padding: 0 !important; justify-content: center !important; margin-left: 0 !important; background: transparent !important; flex: 0 0 32px !important; }
:root body #view-admin #admin-detail-content .detail-header-top [id^="prislista-trigger"].ledare-pris-uppe svg { width: 20px !important; height: 20px !important; }
:root body #view-admin .detail-header-top:has(#office-avatar-circle) .detail-subject ~ .notes-trigger-btn { order: 4; }
:root body #view-admin #admin-detail-content .admin-office-detail-grid > div:not(.glass-panel):has(> .glass-panel) { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; }
/* AT-177 k (ledaren 10-31, 390): namnet delade rad med fem ikoner och fick krympa, så "Eslöv" tonades och klipptes bakom ikonraden.
   Namnet står på egen rad och ikonerna på raden under, med jämn luft. Bara ett namn bredare än hela raden
   sveps i sidled (AT-162); toningen ligger i en egen högermarginal så att ett kort namn aldrig tonas. */
:root body #view-admin .detail-header-top:has(#office-avatar-circle) div:has(> .detail-subject) { flex-wrap: wrap !important; row-gap: 6px !important; column-gap: 14px !important; }
:root body #view-admin .detail-header-top:has(#office-avatar-circle) div:has(> .detail-subject) > :not(.detail-subject) { margin: 0 !important; }
:root body #view-admin .detail-header-top:has(#office-avatar-circle) .detail-subject.detail-subject.detail-subject { flex: 0 0 100% !important; max-width: 100% !important; padding-right: 14px !important; box-sizing: border-box !important; }
/* AT-177 (n), Patrik 11-01: kontorsfotens knappar större (22 px ikon, 44 px tryckyta) och centrerade i bandet.
   Patrik 11-01: Aktiva ärenden och Kopplade agenter får en mjuk ton av temats accentfärg i stället för platt vitt. */
:root body #view-admin #office-detail-body > .admin-danger-footer.admin-danger-footer.admin-danger-footer { justify-content: center !important; padding: 12px 25px 14px !important; gap: 28px !important; min-height: 70px !important; }
:root body #view-admin #office-detail-body > .admin-danger-footer > .footer-icon-btn.footer-icon-btn.footer-icon-btn,
:root body #view-admin #office-detail-body > .admin-danger-footer > .admin-danger-icon-btn.admin-danger-icon-btn.admin-danger-icon-btn {
  width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important;
}
:root body #view-admin #box-office-master #office-detail-body > .admin-danger-footer > :is(.footer-icon-btn, .admin-danger-icon-btn) svg { width: 22px !important; height: 22px !important; }
:root body #view-admin #office-top-grid > :is(#box-tickets, #box-agents).admin-zoom-fill-panel.admin-zoom-fill-panel {
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent-primary) 13%, color-mix(in srgb, var(--ledare-varm) 40%, var(--bg-dark-primary))) 0%, color-mix(in srgb, var(--accent-primary) 4%, color-mix(in srgb, var(--ledare-varm) 40%, var(--bg-dark-primary))) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 20%, transparent) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px -6px color-mix(in srgb, var(--accent-primary) 30%, transparent) !important;
}
/* Patrik 11-01: tomtexterna i Aktiva ärenden och Kopplade agenter på samma plats och i samma storlek. */
:root body #view-admin #office-top-grid > :is(#box-tickets, #box-agents) > h4 { margin: 0 0 10px !important; }
:root body #view-admin #office-top-grid > :is(#box-tickets, #box-agents) :is(.template-item-empty, .office-agents-empty).template-item-empty,
:root body #view-admin #office-top-grid > :is(#box-tickets, #box-agents) :is(.template-item-empty, .office-agents-empty).office-agents-empty {
  justify-content: flex-start !important; text-align: left !important; margin: 0 !important; padding: 2px 0 4px !important; min-height: 0 !important;
  font-size: 14px !important; font-style: normal !important; font-weight: 400 !important; line-height: 1.4 !important;
  color: var(--text-secondary) !important; opacity: 1 !important;
}
/* AT-177 (Patrik 11-01, mobil): Prisrad/Informationsrad som två lika breda segment med ikonen över texten, mjuk tematon;
   vald = ljus platta med accenttext i stället för kontorsfärgens fyrkant. Paketinnehåll är en VY (Patrik 10-15): avskild med streck,
   understruken när den är öppen. */
:root body #view-admin #box-prices .office-row-kind-picker.office-row-kind-picker {
  display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important; gap: 6px !important; width: 100% !important;
  padding: 0 !important; border: none !important; box-shadow: none !important; background: transparent !important;
}
:root body #view-admin #box-prices .office-row-kind-picker .office-row-kind-option.office-row-kind-option,
:root body #view-admin #box-prices .office-row-kind-picker .office-package-components-tab.office-package-components-tab {
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 4px !important;
  min-width: 0 !important; min-height: 56px !important; padding: 8px 2px !important; margin: 0 !important; border: none !important; border-radius: 12px !important;
  box-shadow: none !important; color: var(--text-secondary) !important;
  font-size: 11.5px !important; font-weight: 600 !important; line-height: 1.2 !important; text-align: center !important; white-space: normal !important;
}
:root body #view-admin #box-prices .office-row-kind-picker .office-row-kind-option.office-row-kind-option { background: color-mix(in srgb, var(--text-secondary) 9%, transparent) !important; }
:root body #view-admin #box-prices .office-row-kind-picker .office-package-components-tab.office-package-components-tab { background: transparent !important; padding: 8px 10px !important; }
:root body #view-admin #box-prices .office-row-kind-picker > .office-package-components-tab-slot { display: flex !important; margin: 0 !important; padding-left: 6px !important; border-left: 1px solid color-mix(in srgb, var(--border-color) 45%, transparent) !important; }
:root body #view-admin #box-prices .office-row-kind-picker :is(.office-row-kind-option, .office-package-components-tab) > span { overflow-wrap: normal; word-break: keep-all; }
:root body #view-admin #box-prices .office-row-kind-picker :is(.office-row-kind-option, .office-package-components-tab) svg { width: 18px !important; height: 18px !important; }
:root body #view-admin #box-prices .office-row-kind-picker .office-row-kind-option.office-row-kind-option[data-active="true"] {
  background: color-mix(in srgb, var(--accent-primary) 20%, transparent) !important; color: color-mix(in srgb, var(--accent-primary) 65%, var(--text-primary)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 45%, transparent) !important; /* tråd 7: samma valfärg som segmenten */
}
:root body #view-admin #box-prices .office-row-kind-picker .office-row-kind-option.office-row-kind-option.is-disabled[data-active="false"] { opacity: .5 !important; } /* tråd 7: låst = ovalt tonat, som segmenten */
:root body #view-admin #box-prices .office-row-kind-picker .office-package-components-tab.office-package-components-tab[data-active="true"] {
  color: color-mix(in srgb, var(--accent-primary) 80%, var(--text-primary)) !important; box-shadow: inset 0 -2px 0 var(--accent-primary) !important; border-radius: 0 !important;
}
:root body #view-admin #box-prices .office-service-note-editor[data-active-view="components"] .office-row-kind-picker .office-row-kind-option.office-row-kind-option[data-active="true"] {
  background: color-mix(in srgb, var(--text-secondary) 9%, transparent) !important; color: var(--text-secondary) !important; box-shadow: none !important;
}
:root body #view-admin #box-prices .office-row-kind-picker .office-row-kind-radio { position: absolute !important; opacity: 0 !important; pointer-events: none !important; }