/* 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; }