/* ================================================================
Renderer/assets/css/mobile.css — Mobilanpassning för Atlas
VAD DEN GÖR: ÅsidoSätter layout och synlighet för skärmar ≤ 768px.
Laddas ENBART via: <link media="screen and (max-width: 768px)">.
Påverkar INTE Electron, desktop-browser eller ngrok på dator.
FILOSOFI:    På mobil visas primärt "Mina Ärenden".
Inbox, Garaget, Kunder och Mallar döljs från nav.
ANVÄNDS AV:  Renderer/index.html
SENAST STÄDAD: 2026-05-15
================================================================ */

/* Förhindra oavsiktlig zoom och webb-beteenden */
html, body {
touch-action: pan-x pan-y;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
overscroll-behavior: none;
}

/* Förhindra textmarkering på interaktiva UI-element */
.menu-item, .ticket-card, .team-ticket-card, .agent-card,
.admin-list-item, .template-item, .btn, button, [role="button"],
.header-tab, .pill-btn, .tab-btn, .filter-chip, .icon-btn,
.action-btn, #mobile-hamburger, #mobile-back-btn {
-webkit-user-select: none;
user-select: none;
}

/* Safe area insets för notch och navigationsfält */
body.capacitor-client {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}

/* Hem/Om har bildbakgrund. Utan en egen safe-area-yta syns bilden bakom
   telefonens statusrad, medan arendevyerna redan far solid topp via sina vyer. */
body.capacitor-client::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--safe-area-top, env(safe-area-inset-top, 0px));
background: color-mix(in srgb, var(--bg-frosty-header, var(--bg-dark-secondary)) 88%, var(--bg-dark-secondary, #0d1117) 12%);
z-index: 9996;
pointer-events: none;
}

body.capacitor-client #mobile-hamburger,
body.capacitor-client #mobile-back-btn {
top: calc(18px + env(safe-area-inset-top));
}

body.capacitor-client .sidebar {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
box-sizing: border-box;
}

/* Capacitor WebView polish: native-känsla utan att påverka mobilwebben. */
body.capacitor-client {
--safe-area-top: env(safe-area-inset-top, 0px);
--safe-area-bottom: env(safe-area-inset-bottom, 0px);
overscroll-behavior: none;
touch-action: pan-y;
}

body.capacitor-client .app-container {
height: calc(100dvh - var(--safe-area-top) - var(--safe-area-bottom)) !important;
max-height: calc(100dvh - var(--safe-area-top) - var(--safe-area-bottom)) !important;
min-height: 0 !important;
}

body.capacitor-client .app-container > main {
height: 100% !important;
max-height: 100% !important;
min-height: 0 !important;
}

:root body * {
-webkit-tap-highlight-color: transparent;
}

:root body *:not(input):not(textarea):not([contenteditable="true"]):not([contenteditable]) {
-webkit-user-select: none;
user-select: none;
}

:root body img,
:root body button {
-webkit-touch-callout: none;
}

:root body button,
:root body [role="button"],
:root body .menu-item,
:root body .ticket-card,
:root body .team-ticket-card,
:root body .admin-list-item,
:root body .template-item,
:root body .header-tab,
:root body .pill-btn,
:root body .tab-btn,
:root body .filter-chip,
:root body .icon-btn,
:root body .action-btn {
min-height: 44px;
touch-action: manipulation;
}

:root body :is(.template-list-container, .detail-body, .glass-modal-body, .chat-messages, .inbox-chat-history, #chat-messages, #my-chat-scroll-area, #inbox-list, #my-tickets-list, #archive-list, #customer-list, #admin-main-list, #view-about .about-grid) {
touch-action: pan-y;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}

/* Fix 1: Quill-toolbar-knappar ärver ej 44px från button-regeln ovan.
   min-height vinner alltid över height — måste nollställas explicit. */
:root body .ql-toolbar.ql-snow button {
min-height: unset !important;
height: 26px !important;
width: 26px !important;
padding: 3px !important;
border: 0 !important;
box-shadow: none !important;
text-decoration: none !important;
background: transparent !important;
}
:root body .ql-toolbar.ql-snow .ql-picker-item { min-height: 0 !important; }

:root body .composer-quill-wrap .ql-toolbar.ql-snow {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 1px !important;
padding: 3px 5px !important;
overflow-x: visible !important;
overflow-y: visible !important;
scrollbar-width: none !important;
-webkit-overflow-scrolling: touch !important;
}

:root body .composer-quill-wrap .ql-toolbar.ql-snow::-webkit-scrollbar {
display: none !important;
}

:root body .composer-quill-wrap .ql-toolbar.ql-snow .ql-formats {
display: inline-flex !important;
align-items: center !important;
flex: 0 0 auto !important;
gap: 1px !important;
margin-right: 0 !important;
}

:root body .ql-toolbar.ql-snow .ql-picker {
height: 26px !important;
line-height: 26px !important;
}

:root body .ql-toolbar.ql-snow .ql-picker-label {
min-height: 0 !important;
height: 26px !important;
padding: 0 14px 0 4px !important;
border: 0 !important;
box-shadow: none !important;
text-decoration: none !important;
display: flex !important;
align-items: center !important;
background: transparent !important;
}

:root body .ql-toolbar.ql-snow .ql-picker.ql-icon-picker .ql-picker-label, :root body .ql-toolbar.ql-snow .ql-picker.ql-color-picker .ql-picker-label { width: 26px !important; padding: 3px !important; justify-content: center !important; }

:root body .ql-snow .ql-picker.ql-size { width: 34px !important; }

/* Fix 2: Listcontainers i Capacitor WebView — flex+height:auto räcker inte
   för att aktivera overflow-y:auto. Sätt flex-basis:0 + min-height:0. */
:root body #view-archive .template-list-container,
:root body #view-inbox .template-list-container,
:root body #view-my-tickets .template-list-container,
:root body #view-customers .template-list-container,
:root body #view-templates .template-list-container,
:root body #view-admin .admin-sidebar-list,
:root body #view-admin #admin-main-list {
flex: 1 1 0px !important;
min-height: 0 !important;
height: 0 !important;
}

:root body .templates-container,
:root body .admin-grid-container,
:root body .template-editor-container,
:root body #archive-detail,
:root body #inbox-detail,
:root body #my-ticket-detail,
:root body #customer-detail,
:root body #admin-detail-content {
min-height: 0 !important;
}

:root body .team-ticket-card button,
:root body .archive-card button,
:root body .hw-todo-card button {
min-height: 0 !important;
}

:root body .app-header,
:root body .chat-header,
:root body .pane-header {
padding-top: var(--safe-area-top);
}

:root body .app-bottom,
:root body .chat-input-area,
:root body .detail-footer-toolbar,
:root body .detail-footer-area {
padding-bottom: 12px;
}

:root body #home-chat-footer.chat-input-area,
:root body #my-tickets-footer.chat-input-area {
padding-bottom: 12px !important;
}

/* GPU-accelererad sidomeny */
.sidebar {
-webkit-transform: translateX(-100%);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}

.sidebar.mobile-open {
-webkit-transform: translateX(0);
}

/* --- mobile-only-btn: hamburgern, tillbaka-knappen och overlay ---
På desktop (> 768px) döljs de av style.css (display: none) — regler i DENNA
fil kan aldrig träffa desktop eftersom filen laddas media-gatad ≤768px.
Här, inom mobile-breakpointen, visas hamburgern som standard. */

/* Hamburgern: alltid synlig på mobil */
#mobile-hamburger {
display: flex !important;
align-items: center;
justify-content: center;
position: fixed;
top: 10px;
left: 10px;
z-index: 9997;
width: 38px;
height: 38px;
border-radius: 8px;
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.82);
cursor: pointer;
box-shadow: none;
transition: color 0.15s ease, transform 0.15s ease, filter 0.15s ease;
flex-shrink: 0;
}

/* --- Tillbaka-knapp: visas av JS (body.mobile-detail-active) när ett ärende är öppet --- */
#mobile-back-btn {
display: none;
align-items: center;
justify-content: center;
position: fixed;
top: 10px;
left: 10px;
z-index: 9997;
width: 38px;
height: 38px;
border-radius: 8px;
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.82);
cursor: pointer;
box-shadow: none;
transition: color 0.15s ease, transform 0.15s ease, filter 0.15s ease;
flex-shrink: 0;
}

#mobile-hamburger:hover,
#mobile-back-btn:hover {
background: transparent;
border-color: transparent;
color: #fff;
transform: scale(1.06);
filter: drop-shadow(0 0 7px currentColor);
}

/* --- Sidomenyn: dold till vänster, glider in som overlay --- */
.sidebar {
position: fixed !important;
top: 0 !important;
left: 0 !important;
height: 100dvh !important;
width: 260px !important;
z-index: 10001 !important;
transform: translateX(-100%) !important;
transition: transform 0.25s ease !important;
box-shadow: 6px 0 40px rgba(0, 0, 0, 0.65) !important;
will-change: transform;
background: var(--bg-frosty-sidebar, rgba(13, 17, 23, 0.98)) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-radius: 0 !important;
border-right: 1px solid var(--border-color, rgba(255,255,255,0.1)) !important;
overflow-y: auto !important;
pointer-events: none !important;
}

.sidebar.mobile-open {
transform: translateX(0) !important;
pointer-events: auto !important;
}

/* --- Halvtransparent overlay bakom öppen meny --- */
#mobile-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.52);
z-index: 10000;
backdrop-filter: blur(1px);
-webkit-backdrop-filter: blur(1px);
pointer-events: auto;
}

#mobile-overlay.active {
display: block !important;
z-index: 10000 !important;
pointer-events: auto !important;
}

.sidebar.mobile-open {
pointer-events: auto !important;
z-index: 10001 !important;
}

/* Säkerställ att sidomenyn har klickbarhet från start (om JS-fel) */
.sidebar.mobile-open .menu-item {
pointer-events: auto !important;
}


/* --- Alla nav-items visas på mobil --- */

/* --- App-container: behåll flex men tvinga full höjd så child-vyer kan beräkna 100dvh/100% korrekt.
Sidomenyn är position:fixed och tar ingen plats i flödet → main får automatiskt full bredd.
z-index: auto krävs för att INTE skapa en ny stacking context — annars hamnar sidomenyn (z-index 10001)
"inuti" app-containers kontext och kan inte slå #mobile-overlay (z-index 10000) som är utanför app-container. */
.app-container {
display: flex !important;
height: 100dvh !important;
overflow: hidden !important;
z-index: auto !important;
}

/* --- Alla vyer: full skärmbredd och full höjd --- */
.app-container > main {
flex: 1 !important;
width: 100% !important;
min-width: 0 !important;
margin-left: 0 !important;
max-width: 100vw !important;
box-sizing: border-box;
overflow-x: hidden;
height: 100dvh !important;
}

/* --- Rubriker: ge plats åt hamburger/back-knappen till vänster --- */
.chat-header {
padding-left: 72px !important;
}

/* ================================================================
MINA ÄRENDEN — Single-panel mobil UX
Standard: lista fyller hela skärmen.
När ett ärende öppnas: dölj listan, visa detaljvyn full höjd.
================================================================ */

/* Split-container: kolumnriktning */
#view-my-tickets .templates-container {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
}

/* Standard: lista tar hela höjden */
#view-my-tickets .template-list-container {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex: 1 !important;
max-height: none !important;
height: auto !important;
overflow-y: auto !important;
border-right: none !important;
border-bottom: none !important;
box-sizing: border-box;
--panel-bleed: 10px;
padding: 10px !important;
}

/* H3-rubrik i listan: kompaktera */
#view-my-tickets .template-list-container > h3 {
font-size: 11px !important;
opacity: 0.5;
text-transform: uppercase;
margin: 0 0 10px 0 !important;
}

/* Standard: detalj är dold */
#view-my-tickets .template-editor-container {
display: none !important;
}

/* När ärende öppnas: dölj lista, visa detalj full höjd */
#view-my-tickets.mobile-detail-open .template-list-container {
display: none !important;
}

#view-my-tickets.mobile-detail-open .template-editor-container {
display: flex !important;
flex: 1 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
overflow: hidden !important;
}

/* ================================================================
ADMIN HEADER-TABBAR
"Agenter", "Kontor & Utbildningar", "Systemkonfiguration"
löper ut ur skärmen på mobil → egna raden med horisontell scroll
================================================================ */

#view-admin .chat-header {
flex-wrap: wrap !important;
height: auto !important;
padding-bottom: 0 !important;
row-gap: 8px !important;
}

#view-admin .chat-header h2 {
order: 1 !important;
}

#view-admin .header-actions {
order: 2 !important;
margin-left: auto !important;
flex-shrink: 0 !important;
}

#view-admin .header-tabs {
order: 3 !important;
flex: 0 0 100% !important;
overflow-x: auto !important;
overflow-y: hidden !important;
border-top: 1px solid rgba(255, 255, 255, 0.07);
padding: 7px 0 5px 0 !important;
display: flex !important;
flex-wrap: nowrap !important;
gap: 4px !important;
justify-content: flex-start !important;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}

#view-admin .header-tabs::-webkit-scrollbar {
display: none;
}

#view-admin .header-tabs .header-tab {
flex: 0 0 auto !important;
}

/* Inkorgen har tre flikar och tre header-actions (hjälp, sök, notiser).
   På telefon får flikarna egen rad så actions inte trycks utanför viewporten. */
#view-inbox .chat-header {
flex-wrap: wrap !important;
height: auto !important;
padding-bottom: 0 !important;
row-gap: 8px !important;
}

#view-inbox .chat-header h2 {
order: 1 !important;
}

#view-inbox .header-actions {
order: 2 !important;
margin-left: auto !important;
flex-shrink: 0 !important;
}

#view-inbox .header-tabs {
order: 3 !important;
flex: 0 0 100% !important;
overflow-x: auto !important;
overflow-y: hidden !important;
border-top: 1px solid rgba(255, 255, 255, 0.07);
padding: 7px 0 5px 0 !important;
display: flex !important;
flex-wrap: nowrap !important;
gap: 4px !important;
justify-content: flex-start !important;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}

#view-inbox .header-tabs::-webkit-scrollbar {
display: none;
}

/* Mina Ärenden har samma headerstruktur som Inkorgen. Egen flikrad håller
   nytt-mail, sök, hjälp och notisklocka kvar inom 390px-viewporten. */
#view-my-tickets .chat-header {
flex-wrap: wrap !important;
height: auto !important;
padding-bottom: 0 !important;
row-gap: 8px !important;
}

#view-my-tickets .chat-header h2 {
order: 1 !important;
}

#view-my-tickets .header-actions {
order: 2 !important;
margin-left: auto !important;
flex-shrink: 0 !important;
}

#view-my-tickets .header-tabs {
order: 3 !important;
flex: 0 0 100% !important;
overflow-x: auto !important;
overflow-y: hidden !important;
border-top: 1px solid rgba(255, 255, 255, 0.07);
padding: 7px 0 5px 0 !important;
display: flex !important;
flex-wrap: nowrap !important;
gap: 4px !important;
justify-content: flex-start !important;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}

#view-my-tickets .header-tabs::-webkit-scrollbar {
display: none;
}

/* Tabs: kompakta, krymper ej */
.header-tab {
flex-shrink: 0 !important;
font-size: 11px !important;
padding: 5px 10px !important;
white-space: nowrap !important;
}

/* Kompakta mobilflikar ska reservera faktisk plats for raknaren. */
.header-tab .tab-badge {
position: static !important;
margin-left: 4px !important;
vertical-align: middle;
transform: translateY(-1px);
}

/* ================================================================
SINGLE-PANEL MOBIL UX — INBOX, ARKIV, KUNDER, ADMIN
Samma mönster som #view-my-tickets ovan.
JS lägger till klassen "mobile-detail-open" på vy-elementet
när ett ärende/post öppnas. CSS sköter resten — inga inline-styles.
================================================================ */

/* --- Gemensam reset: alla split-vyer är kolumn-orienterade på mobil --- */
#view-inbox .templates-container,
#view-archive .templates-container,
#view-customers .templates-container {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
}

/* --- Standard: list fyller hela höjden --- */
#view-inbox .template-list-container,
#view-archive .template-list-container,
#view-customers .template-list-container {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex: 1 !important;
max-height: none !important;
height: auto !important;
overflow-y: auto !important;
border-right: none !important;
border-bottom: none !important;
box-sizing: border-box;
--panel-bleed: 10px;
padding: 10px !important;
}

/* --- Standard: detalj är dold --- */
#view-inbox .template-editor-container,
#view-archive .template-editor-container,
#view-customers .template-editor-container {
display: none !important;
}

/* --- När ärende öppnas: dölj lista, visa detalj full höjd --- */
#view-inbox.mobile-detail-open .template-list-container,
#view-archive.mobile-detail-open .template-list-container,
#view-customers.mobile-detail-open .template-list-container {
display: none !important;
}

#view-inbox.mobile-detail-open .template-editor-container,
#view-archive.mobile-detail-open .template-editor-container,
#view-customers.mobile-detail-open .template-editor-container {
display: flex !important;
flex: 1 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
overflow: hidden !important;
}

/* App: behåll sektionsrubriken ovanför detalj/placeholder i Inkorgen och Mina Ärenden.
   Visa list-containerns rubrik men göm sök + lista; detaljen fyller resten direkt under
   rektangelns nederkant. */
:root body #view-inbox.mobile-detail-open .template-list-container,
:root body #view-my-tickets.mobile-detail-open .template-list-container {
display: flex !important;
flex: 0 0 auto !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
padding-bottom: 0 !important;
}

:root body #view-inbox.mobile-detail-open .template-list-container > *:not(.list-panel-header),
:root body #view-my-tickets.mobile-detail-open .template-list-container > *:not(.list-panel-header) {
display: none !important;
}

:root body #view-inbox.mobile-detail-open .list-panel-header,
:root body #view-my-tickets.mobile-detail-open .list-panel-header {
margin-bottom: 0 !important;
cursor: pointer;
}

/* App, Kundvyn: startläget ska inte bara visa en tom sökyta. Behåll
   Kundregister-rektangeln/sökningen överst och visa desktop-placeholdern
   direkt under den tills en kund öppnas. */
:root body #view-customers:not(.mobile-detail-open) .template-list-container {
display: flex !important;
flex: 0 0 auto !important;
height: auto !important;
max-height: 42svh !important;
overflow-y: auto !important;
padding-bottom: 0 !important;
}

:root body #view-customers:not(.mobile-detail-open) .template-editor-container {
display: flex !important;
flex: 1 1 0 !important;
min-height: 0 !important;
overflow: hidden !important;
}

:root body #view-customers:not(.mobile-detail-open) #customer-placeholder {
display: flex !important;
}

:root body #view-customers:not(.mobile-detail-open) #customer-detail {
display: none !important;
}

/* App, Kundvyn: vid aktiv sökning (listan visar träffkort ELLER "inga träffar"-meddelande)
   ska hjälte-placeholdern döljas helt och listan ta full höjd, så hela sökresultatet syns.
   Självsynkande via :has() — kräver ingen JS-klass att hålla i synk över navigeringsvägar
   (inkl. tillbaka från kunddetalj med aktiv sökning). Desktop/Electron (ej capacitor) orört. */
:root body #view-customers:not(.mobile-detail-open):has(#customer-list .team-ticket-card, #customer-list .template-item-empty) .template-list-container {
max-height: none !important;
flex: 1 1 auto !important;
}

:root body #view-customers:not(.mobile-detail-open):has(#customer-list .team-ticket-card, #customer-list .template-item-empty) .template-editor-container {
display: none !important;
}

:root body #view-customers .list-panel-header {
cursor: pointer;
}

/* App, ärendedetaljer: headern bär kundidentitet; systempills flyttas till
   footern för att inte äta vertikal yta i Inkorgen/Mina Ärenden/Garaget. */
:root body #view-inbox .detail-pills-container,
:root body #view-my-tickets .detail-pills-container,
:root body #view-archive .detail-pills-container {
flex-wrap: nowrap !important;
/* Pillsen sitter i en flex-kolumn ihop med titeln, kapad till ~224px. Förälderkolumnen
   har overflow:visible, så låt containern växa till innehållet och nyttja rad 2:s fulla
   headerbredd (calc-cap = headerns content-bredd). Scroll blir bara fallback när
   kund-pillsen verkligen är bredare än headern. */
width: max-content !important;
max-width: calc(100vw - 46px) !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scrollbar-width: none !important;
}

:root body #view-inbox .detail-pills-container::-webkit-scrollbar,
:root body #view-my-tickets .detail-pills-container::-webkit-scrollbar,
:root body #view-archive .detail-pills-container::-webkit-scrollbar {
display: none !important;
}

:root body #view-inbox .detail-pills-container .detail-pill-meta,
:root body #view-my-tickets .detail-pills-container .detail-pill-meta,
:root body #view-archive .detail-pills-container .detail-pill-meta {
display: none !important;
}

/* App: ärendedetaljens öppning. Temats `transition: var(--transition-slow)` (= all 0.5s)
   på glas-panelerna animerar även LAYOUT-bytet när mobile-detail-open slås på → ryckig
   reflow-"slide" (top/height/flex animeras, ej GPU). Begränsa transition till ren
   kosmetik (aldrig layout) på mobil, och ge detaljen en medveten, GPU-accelererad
   slide-up i stället. Desktop/Electron (ej capacitor-client) är orört. */
:root body .template-editor-container,
:root body .template-list-container {
transition: box-shadow 0.25s ease, background-color 0.25s ease !important;
}

@keyframes atlasDetailSlideIn {
from { transform: translateY(14px); opacity: 0; }
to   { transform: translateY(0);    opacity: 1; }
}

:root body #view-inbox.mobile-detail-open .detail-container,
:root body #view-my-tickets.mobile-detail-open .detail-container,
:root body #view-archive.mobile-detail-open .detail-container {
animation: atlasDetailSlideIn 0.25s cubic-bezier(0.22, 0.61, 0.36, 1) both;
will-change: transform, opacity;
}

/* Samma diskreta detalj-enter för mobilvyer där panelen inte heter detail-container.
   Endast när användaren faktiskt öppnar detalj; socket-rerender av samma panel ska
   inte få en separat animation från denna regel. */
:root body #view-customers.mobile-detail-open #customer-detail,
:root body #view-templates.mobile-detail-open .template-editor-container,
:root body #view-admin.mobile-detail-open .template-editor-container {
animation: atlasDetailSlideIn 0.22s cubic-bezier(0.22, 0.61, 0.36, 1) both;
will-change: transform, opacity;
}

.mobile-detail-footer-pills {
display: none;
}

/* Readers keep the ticket identity row visible on narrow browser surfaces.
   Category is rendered first by the reader builders; remaining pills may scroll. */
#atlas-reader-modal .mobile-detail-footer-pills,
#customer-reader-modal .mobile-detail-footer-pills {
display: flex !important;
align-items: center !important;
gap: 6px !important;
min-width: 0 !important;
overflow-x: auto !important;
overflow-y: hidden !important;
padding: 6px 12px !important;
scrollbar-width: none !important;
white-space: nowrap !important;
}

#atlas-reader-modal .mobile-detail-footer-pills .pill,
#customer-reader-modal .mobile-detail-footer-pills .pill {
flex: 0 0 auto !important;
}

:root body #view-inbox .mobile-detail-footer-pills,
:root body #view-my-tickets .mobile-detail-footer-pills,
:root body #view-archive .mobile-detail-footer-pills {
display: flex !important;
flex: 1 1 auto !important;
gap: 6px !important;
min-width: 0 !important;
overflow-x: auto !important;
overflow-y: hidden !important;
padding: 6px 12px 0 !important;
scrollbar-width: none !important;
white-space: nowrap !important;
}

:root body #view-archive .mobile-detail-footer-pills {
padding: 0 !important;
}

:root body .mobile-detail-footer-pills::-webkit-scrollbar {
display: none !important;
}

:root body .mobile-detail-footer-pills .pill {
flex: 0 0 auto !important;
font-size: 10px !important;
line-height: 1.1 !important;
max-width: 190px !important;
overflow: hidden !important;
padding: 4px 8px !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}

:root body #view-archive .desktop-footer-close-pill {
display: none !important;
}

/* Fix 3: Kundvy stats-grid — 4 kolumner ger 78px/kol på 390px skärm.
   Med 3 kontor (text-overflow) bryts layouten. 2×2 är läsbar. */
.cust-stat-grid {
grid-template-columns: repeat(2, 1fr) !important;
}

/* Kunddetailens desktopheader far annars fasta actions utanfor viewporten. */
#view-customers #customer-detail .detail-header-top {
align-items: stretch !important;
flex-wrap: wrap !important;
gap: 10px !important;
}

#view-customers #customer-detail .detail-header-top > div:first-child {
width: 100% !important;
min-width: 0 !important;
}

#view-customers #customer-detail .detail-header-top > div:last-child {
align-self: flex-end !important;
}

#view-customers #customer-detail .header-pills-row {
flex-wrap: wrap !important;
min-width: 0 !important;
}

#view-customers #customer-detail .header-pills-row .pill {
max-width: 100% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}

#view-customers #customer-header-edit > div {
grid-template-columns: 1fr !important;
}

#view-admin #admin-detail-content .detail-header-top {
align-items: stretch !important;
box-sizing: border-box !important;
flex-wrap: wrap !important;
gap: 12px !important;
overflow: hidden !important;
}

#view-admin #admin-detail-content .detail-header-top > div:first-child {
flex: 1 1 100% !important;
min-width: 0 !important;
}

#view-admin #admin-detail-content .detail-header-top > div:first-child > div:last-child {
min-width: 0 !important;
}

#view-admin #admin-detail-content .header-pills-row {
flex-wrap: wrap !important;
min-width: 0 !important;
}

#view-admin .agent-ticket-counter-cell,
#view-admin #office-ticket-counter-cell {
justify-content: flex-start !important;
max-width: 100% !important;
min-width: 0 !important;
width: 100% !important;
}

#view-admin .agent-ticket-counter-cell > div,
#view-admin #office-ticket-counter-cell > div {
justify-content: flex-start !important;
max-width: 100% !important;
min-width: 0 !important;
}

:root body #view-admin .admin-user-detail .detail-header-top {
gap: 8px !important;
padding: 12px 16px !important;
}

:root body #view-admin .admin-user-detail .detail-header-top > div:first-child {
align-items: flex-start !important;
gap: 12px !important;
}

:root body #view-admin .admin-user-detail .msg-avatar {
height: 52px !important;
width: 52px !important;
font-size: 20px !important;
}

:root body #view-admin .admin-user-detail .agent-desktop-counter-wrap {
display: none !important;
}

:root body #view-admin .admin-user-detail .agent-mobile-counter-slot {
display: block !important;
margin: 1px 0 2px !important;
width: 100% !important;
}

:root body #view-admin .admin-user-detail .agent-mobile-counter-slot > div {
gap: 6px !important;
justify-content: flex-start !important;
}

:root body #view-admin .admin-user-detail .agent-mobile-counter-slot > div > div {
gap: 0 !important;
}

:root body #view-admin .admin-user-detail .agent-mobile-counter-slot span {
font-size: 10px !important;
line-height: 1.1 !important;
min-height: 0 !important;
padding: 4px 8px !important;
}

:root body #view-admin .admin-user-detail .agent-mobile-counter-slot [data-counter-sub],
:root body #view-admin .admin-user-detail .agent-mobile-counter-slot span + div {
display: none !important;
}

:root body #view-admin .admin-user-detail .header-pills-row {
gap: 6px !important;
}

:root body #view-admin .admin-office-detail .detail-header-top {
gap: 6px !important;
padding: 10px 14px !important;
}

:root body #view-admin .admin-office-detail .detail-header-top > div:first-child {
align-items: flex-start !important;
gap: 12px !important;
}

:root body #view-admin .admin-office-detail #office-avatar-circle {
border-radius: 10px !important;
font-size: 18px !important;
height: 46px !important;
width: 46px !important;
}

:root body #view-admin .admin-office-detail .office-mobile-counter-slot {
display: flex !important;
gap: 6px !important;
margin: 1px 0 2px !important;
width: 100% !important;
}

:root body #view-admin .admin-office-detail .office-mobile-counter-slot > div {
gap: 0 !important;
}

:root body #view-admin .admin-office-detail .office-mobile-counter-slot span {
font-size: 11.5px !important;
font-weight: 600 !important;
line-height: 1.15 !important;
min-height: 0 !important;
padding: 4px 10px !important;
}

:root body #view-admin .admin-office-detail .office-mobile-counter-slot span + div {
display: none !important;
}

:root body #view-admin .admin-office-detail #office-ticket-counter-cell {
display: none !important;
}

:root body #view-admin .admin-office-detail .header-pills-row {
gap: 5px !important;
align-items: center !important;
}

/* Tajtare header: krymp ID-pillen och färgväljaren så Prislista-knappen får
   plats på samma rad som övriga pills — headern blir lägre och visar mer innehåll.
   ID-pillen behåller fast bredd men hela routing-ID:t kan läsas genom att dra
   texten i sidled med fingret (horisontell touch-scroll), så pillen aldrig
   växer för långa kontors-ID. */
:root body #view-admin .admin-office-detail #office-id-pill {
max-width: 116px !important;
justify-content: flex-start !important;
overflow-x: auto !important;
overflow-y: hidden !important;
white-space: nowrap !important;
text-overflow: clip !important;
-webkit-overflow-scrolling: touch !important;
touch-action: pan-x !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}

:root body #view-admin .admin-office-detail #office-id-pill::-webkit-scrollbar {
height: 0 !important;
width: 0 !important;
display: none !important;
}

:root body #view-admin .admin-office-detail #office-id-pill .office-id-pill-text {
white-space: nowrap !important;
flex: 0 0 auto !important;
}

:root body #view-admin .admin-office-detail #inp-office-color-inline {
width: 28px !important;
height: 28px !important;
}

:root body #view-admin #agent-permission-grid {
grid-template-columns: 1fr !important;
gap: 10px !important;
}

:root body #view-admin #agent-permission-grid .agent-permission-section {
gap: 5px !important;
}

:root body #view-admin #agent-permission-grid .glass-panel {
border-radius: 10px !important;
padding: 10px !important;
}

:root body #view-admin #agent-permission-grid .glass-panel > div {
max-height: 118px !important;
}

:root body #view-admin #agent-permission-grid button,
:root body #view-admin #agent-permission-grid label {
font-size: 10px !important;
line-height: 1.1 !important;
min-height: 0 !important;
padding: 5px 8px !important;
}

:root body #view-admin #agent-permission-grid button {
height: auto !important;
}

:root body #view-admin #agent-permission-grid label {
margin: 0 4px 4px 0 !important;
}