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

body.capacitor-client * {
-webkit-tap-highlight-color: transparent;
}

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

body.capacitor-client img,
body.capacitor-client button {
-webkit-touch-callout: none;
}

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

body.capacitor-client :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. */
body.capacitor-client .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;
}

body.capacitor-client .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: auto !important;
overflow-y: hidden !important;
scrollbar-width: none !important;
-webkit-overflow-scrolling: touch !important;
}

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

body.capacitor-client .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;
}

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

body.capacitor-client .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;
}

body.capacitor-client .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. */
body.capacitor-client #view-archive .template-list-container,
body.capacitor-client #view-inbox .template-list-container,
body.capacitor-client #view-my-tickets .template-list-container,
body.capacitor-client #view-customers .template-list-container,
body.capacitor-client #view-templates .template-list-container,
body.capacitor-client #view-admin .admin-sidebar-list,
body.capacitor-client #view-admin #admin-main-list {
flex: 1 1 0px !important;
min-height: 0 !important;
height: 0 !important;
}

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

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

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

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

body.capacitor-client #home-chat-footer.chat-input-area,
body.capacitor-client #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;
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;
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. */
body.capacitor-client #view-inbox.mobile-detail-open .template-list-container,
body.capacitor-client #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;
}

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

body.capacitor-client #view-inbox.mobile-detail-open .list-panel-header,
body.capacitor-client #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. */
body.capacitor-client #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;
}

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

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

body.capacitor-client #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. */
body.capacitor-client #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;
}

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

body.capacitor-client #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. */
body.capacitor-client #view-inbox .detail-pills-container,
body.capacitor-client #view-my-tickets .detail-pills-container,
body.capacitor-client #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;
}

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

body.capacitor-client #view-inbox .detail-pills-container .detail-pill-meta,
body.capacitor-client #view-my-tickets .detail-pills-container .detail-pill-meta,
body.capacitor-client #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. */
body.capacitor-client .template-editor-container,
body.capacitor-client .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; }
}

body.capacitor-client #view-inbox.mobile-detail-open .detail-container,
body.capacitor-client #view-my-tickets.mobile-detail-open .detail-container,
body.capacitor-client #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. */
body.capacitor-client #view-customers.mobile-detail-open #customer-detail,
body.capacitor-client #view-templates.mobile-detail-open .template-editor-container,
body.capacitor-client #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;
}

body.capacitor-client #view-inbox .mobile-detail-footer-pills,
body.capacitor-client #view-my-tickets .mobile-detail-footer-pills,
body.capacitor-client #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;
}

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

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

body.capacitor-client .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;
}

body.capacitor-client #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;
}

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

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

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

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

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

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

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

body.capacitor-client #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;
}

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

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

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

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

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

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

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

body.capacitor-client #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;
}

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

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

body.capacitor-client #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. */
body.capacitor-client #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;
}

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

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

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

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

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

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

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

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

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

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

/* ================================================================
MOBILFIX 31 — PERSONALDETALJ, KONSERVATIV PILL-POLISH
Behåller originalflödet men gör statuspills läsbarare och komprimerar
kontorsgrupperna så fem grupper får plats utan att bli kort/grid.
================================================================ */
body.capacitor-client #view-admin .admin-user-detail .agent-mobile-counter-slot span {
background: color-mix(in srgb, var(--bg-dark-secondary) 86%, var(--accent-primary) 7%) !important;
border-color: color-mix(in srgb, var(--border-color) 70%, var(--accent-primary) 18%) !important;
color: color-mix(in srgb, var(--text-primary) 78%, var(--text-secondary) 22%) !important;
font-weight: 700 !important;
opacity: 1 !important;
}

body.capacitor-client #view-admin .admin-user-detail .agent-mobile-counter-slot [data-counter-kind="active"] {
background: color-mix(in srgb, var(--bg-dark-secondary) 82%, var(--dynamic-pill-color, var(--accent-primary)) 12%) !important;
border-color: color-mix(in srgb, var(--dynamic-pill-color, var(--accent-primary)) 44%, var(--border-color) 56%) !important;
color: color-mix(in srgb, var(--dynamic-pill-color, var(--accent-primary)) 78%, var(--text-primary) 22%) !important;
}

body.capacitor-client #view-admin .admin-user-detail .header-pills-row .pill {
background: color-mix(in srgb, var(--bg-dark-secondary) 84%, var(--dynamic-pill-color, var(--accent-primary)) 10%) !important;
border-color: color-mix(in srgb, var(--dynamic-pill-color, var(--accent-primary)) 42%, var(--border-color) 58%) !important;
border-radius: 999px !important;
color: color-mix(in srgb, var(--dynamic-pill-color, var(--accent-primary)) 80%, var(--text-primary) 20%) !important;
font-weight: 750 !important;
}

body.capacitor-client #view-admin .admin-user-detail .agent-office-group-row {
align-items: center !important;
gap: 2px !important;
flex-wrap: nowrap !important;
overflow: visible !important;
}

body.capacitor-client #view-admin .admin-user-detail .agent-office-group-pill {
background: color-mix(in srgb, var(--bg-dark-secondary) 88%, var(--accent-primary) 5%) !important;
border-color: color-mix(in srgb, var(--border-color) 76%, var(--accent-primary) 14%) !important;
border-radius: 999px !important;
box-shadow: none !important;
color: var(--text-primary) !important;
flex: 0 1 auto !important;
font-size: 8.5px !important;
font-weight: 650 !important;
letter-spacing: 0 !important;
line-height: 1 !important;
min-height: 24px !important;
padding: 4px 4px !important;
white-space: nowrap !important;
}

body.capacitor-client #view-admin .admin-user-detail .agent-office-group-pill.is-selected {
background: color-mix(in srgb, var(--bg-dark-secondary) 78%, var(--accent-primary) 14%) !important;
border-color: color-mix(in srgb, var(--accent-primary) 46%, var(--border-color) 54%) !important;
color: var(--accent-primary) !important;
}

body.capacitor-client #view-admin .admin-user-detail .agent-office-group-arrow {
display: none !important;
}

body.capacitor-client #view-admin .admin-user-detail .agent-office-count {
font-size: 7px !important;
margin-left: 1px !important;
opacity: 0.6 !important;
}

body.capacitor-client #view-admin .admin-user-detail #agent-permission-grid .glass-panel > div {
max-height: 150px !important;
}

body.capacitor-client #view-admin .admin-user-detail .agent-view-permission-panel {
background: color-mix(in srgb, var(--bg-dark-secondary) 84%, var(--accent-primary) 9%) !important;
border-color: color-mix(in srgb, var(--accent-primary) 34%, var(--border-color) 66%) !important;
padding: 12px !important;
}

body.capacitor-client #view-admin .admin-user-detail .agent-view-permission-panel > div {
max-height: none !important;
}

body.capacitor-client #view-admin .admin-user-detail .agent-view-subtitle {
font-size: 7.5px !important;
margin-bottom: 5px !important;
opacity: 0.62 !important;
}

body.capacitor-client #view-admin .admin-user-detail .agent-view-subtitle--admin {
margin-top: 8px !important;
}

body.capacitor-client #view-admin .admin-user-detail .agent-view-pill-row {
gap: 4px !important;
}

body.capacitor-client #view-admin .admin-user-detail .agent-office-pill,
body.capacitor-client #view-admin .admin-user-detail .agent-view-pill {
border-radius: 999px !important;
font-weight: 650 !important;
}

body.capacitor-client #view-admin .admin-user-detail .agent-office-pill input[type="checkbox"],
body.capacitor-client #view-admin .admin-user-detail .agent-view-pill input[type="checkbox"] {
-webkit-appearance: none !important;
appearance: none !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
inline-size: 0 !important;
block-size: 0 !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
position: absolute !important;
}

body.capacitor-client #view-admin .admin-user-detail .agent-view-pill {
font-size: 9.5px !important;
min-height: 24px !important;
padding: 4px 8px !important;
}

body.capacitor-client #atlas-toast-container {
bottom: calc(88px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px))) !important;
left: 12px !important;
right: 12px !important;
max-width: none !important;
width: auto !important;
z-index: 30000 !important;
}

body.capacitor-client #atlas-toast-container .toast-notification {
max-width: none !important;
}

/* --- Admin: dölj detalj-/agent-panel standard; visa på mobile-detail-open --- */
#view-admin .templates-container {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
}

#view-admin .template-list-container,
#view-admin #admin-main-list {
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;
box-sizing: border-box;
}

#view-admin .template-editor-container {
display: none !important;
}

#view-admin.mobile-detail-open .template-list-container,
#view-admin.mobile-detail-open #admin-main-list {
display: none !important;
}

#view-admin.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;
}

body.capacitor-client #view-admin.mobile-placeholder-open .admin-sidebar-list {
display: flex !important;
flex: 0 0 auto !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
padding-bottom: 0 !important;
}

body.capacitor-client #view-admin.mobile-placeholder-open #admin-main-list {
display: none !important;
}

body.capacitor-client #view-admin.mobile-placeholder-open .template-editor-container {
display: flex !important;
flex: 1 1 0 !important;
min-height: 0 !important;
overflow: hidden !important;
}

body.capacitor-client #view-admin.mobile-placeholder-open #admin-placeholder {
display: flex !important;
}

body.capacitor-client #view-admin.mobile-placeholder-open #admin-detail-content {
display: none !important;
}

body.capacitor-client #view-admin .admin-sidebar-list .pane-header {
cursor: pointer;
}

body.capacitor-client #view-admin .admin-mobile-kb-guide-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
min-height: 18px !important;
max-height: 18px !important;
margin-left: auto !important;
margin-right: 4px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
color: var(--accent-primary) !important;
box-shadow: none !important;
}

body.capacitor-client #view-admin .admin-mobile-kb-guide-btn + .admin-nav-ai-chip {
margin-left: 0 !important;
}

body.capacitor-client #view-admin .admin-mobile-kb-guide-btn:active {
transform: scale(0.96);
opacity: 0.72;
}

/* ================================================================
TILLBAKA-KNAPP
Visas (display:flex) av mobile-menu.js när mobile-detail-open är aktiv.
Hamburger-knappen döljs parallellt av samma JS.
================================================================ */
body.mobile-detail-active #mobile-hamburger {
display: none !important;
}

body.mobile-detail-active #mobile-back-btn {
display: flex !important;
}

/* ================================================================
MALLAR (#view-templates) — Single-panel mobilvy
Samma mönster som övriga vyer.
================================================================ */

#view-templates .templates-container {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
}

#view-templates .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;
padding: 10px !important;
}

#view-templates .template-editor-container {
display: none !important;
}

#view-templates.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;
}

#view-templates.mobile-detail-open .template-list-container > *:not(.list-panel-header) {
display: none !important;
}

#view-templates.mobile-detail-open .list-panel-header {
margin-bottom: 0 !important;
cursor: pointer;
}

body.capacitor-client #view-templates.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;
}

#view-templates.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;
}

/* ================================================================
HEM-VY (view-chat) — Chattinput synlig på mobil
Problem: style-admin.css sätter height: 100vh !important på alla vyer.
På mobil är 100vh = hela skärmhöjden inkl. adressfältet → footer klipps av.
Fix: Åsidosätt till 100dvh (dynamic viewport height = synlig yta) för alla vyer.
================================================================ */
/* Mailmallar har fler flikar an viewporten. Hall actions synliga och lat
   fliklisten scrolla horisontellt med touch. */
#view-templates .chat-header {
flex-wrap: wrap !important;
gap: 8px 10px !important;
height: auto !important;
padding-bottom: 0 !important;
row-gap: 8px !important;
}

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

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

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

#view-templates #template-tabs::-webkit-scrollbar {
display: none;
}

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

#view-chat,
#view-inbox,
#view-my-tickets,
#view-archive,
#view-settings,
#view-templates,
#view-admin,
#view-customers,
#view-about {
height: 100dvh !important;
min-height: 0 !important;
}

/* Footer-padding: reducera från 20px 40px till 12px 16px på smal mobil */
#home-chat-footer.chat-input-area {
padding: 12px 16px !important;
min-height: 72px !important;
}

/* Chat-form: tillåt full bredd på mobil */
#home-chat-footer #chat-form {
max-width: 100% !important;
}

#view-chat .chat-header {
padding-left: 88px !important;
}

/* Garagets desktop-wide header far inte klippa filterkontroller pa mobil. */
#view-archive #archive-wide-header {
flex-direction: column !important;
min-height: 0 !important;
}

#view-archive #archive-wide-header .archive-rect-section {
width: auto !important;
min-width: 0 !important;
padding: 14px 14px 6px !important;
}

#view-archive #archive-wide-header .archive-filter-section {
padding: 6px 12px 12px !important;
}

#view-archive #archive-wide-header .archive-filter-section > div {
flex-wrap: wrap !important;
min-width: 0 !important;
}

#view-archive #archive-wide-header .archive-filter-section .filter-select,
#view-archive #archive-wide-header .archive-filter-section .filter-input {
flex: 1 1 138px !important;
min-width: 0 !important;
}

body.capacitor-client #view-archive #archive-wide-header .archive-rect-section,
body.capacitor-client #view-archive #archive-wide-header .archive-filter-section {
cursor: pointer;
}

/* App: synlig placeholder i Garagets datum-filter. <input type="date"> saknar
   placeholder-stöd; JS (archive-view.js) wrappar fältet i .atlas-date-field[data-label]
   och vi ritar texten som overlay. .has-value sätts när ett datum valts → texten döljs.
   Labeln visas så länge fältet är tomt (även vid fokus) — Android behåller fokus efter
   att pickern stängts utan val, så :focus-within skulle annars låsa texten dold. Endast app. */
body.capacitor-client #view-archive .atlas-date-field {
position: relative;
display: flex;
flex: 1 1 138px;
min-width: 0;
}
body.capacitor-client #view-archive .atlas-date-field > input {
width: 100% !important;
min-width: 0 !important;
}
body.capacitor-client #view-archive .atlas-date-field::before {
content: attr(data-label);
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
color: var(--text-secondary);
opacity: 0.5;
pointer-events: none;
white-space: nowrap;
z-index: 1;
}
body.capacitor-client #view-archive .atlas-date-field.has-value::before {
display: none;
}
body.capacitor-client #view-archive .atlas-date-field:not(.has-value) > input::-webkit-datetime-edit {
opacity: 0;
}

/* App, Garaget: ge stad/kontor/fordon-filtren egen bredd + kategori-ikon så de inte
   kläms till bara pilen (datumboxarna växte annars och tog all bredd). Scopat till
   ENBART rad B:s tre dropdowns via deras select-adjacens — CHATT+MAIL/ADMIN i raden
   ovanför lämnas orörda. 2-radslayout (3 dropdowns + 2 datum) faller ut via flex-wrap.
   !important krävs då triggern ärver inline flex:1 från select-elementet. Endast app. */
body.capacitor-client #view-archive #filter-city + .atlas-filter-dd,
body.capacitor-client #view-archive #filter-office + .atlas-filter-dd,
body.capacitor-client #view-archive #filter-vehicle + .atlas-filter-dd {
flex: 1 1 110px !important;
}
body.capacitor-client #view-archive #filter-city + .atlas-filter-dd::before,
body.capacitor-client #view-archive #filter-office + .atlas-filter-dd::before,
body.capacitor-client #view-archive #filter-vehicle + .atlas-filter-dd::before {
flex-shrink: 0;
font-size: 12px;
line-height: 1;
}
body.capacitor-client #view-archive #filter-city + .atlas-filter-dd::before { content: "📍"; }
body.capacitor-client #view-archive #filter-office + .atlas-filter-dd::before { content: "🏢"; }
body.capacitor-client #view-archive #filter-vehicle + .atlas-filter-dd::before { content: "🚗"; }

body.capacitor-client #view-archive.mobile-placeholder-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;
}

body.capacitor-client #view-archive.mobile-placeholder-open #archive-list {
display: none !important;
}

body.capacitor-client #view-archive.mobile-placeholder-open .template-editor-container {
display: flex !important;
flex: 1 1 0 !important;
min-height: 0 !important;
overflow: hidden !important;
}

body.capacitor-client #view-archive.mobile-placeholder-open #archive-placeholder {
display: flex !important;
}

body.capacitor-client #view-archive.mobile-placeholder-open #archive-detail {
display: none !important;
}

/* ================================================================
DETAIL-VY — Overflow-fix
.template-editor-container har margin: 24px i style-admin.css
vilket orsakar horisontell overflow i mobilt full-bredd-läge.
================================================================ */
.template-editor-container {
margin: 0 !important;
border-radius: 0 !important;
border-left: none !important;
border-right: none !important;
border-bottom: none !important;
}

/* Säkerställ att detaljvyer inte kan flöda utanför skärmen */
#view-inbox.mobile-detail-open .template-editor-container,
#view-my-tickets.mobile-detail-open .template-editor-container,
#view-archive.mobile-detail-open .template-editor-container,
#view-customers.mobile-detail-open .template-editor-container,
#view-templates.mobile-detail-open .template-editor-container,
#view-admin.mobile-detail-open .template-editor-container {
max-width: 100vw !important;
overflow-x: hidden !important;
}

/* ================================================================
ADMIN-VY — admin-grid-container och admin-sidebar-list
Admin-vyn använder egna klasser och inte de generiska
.templates-container/.template-list-container.
================================================================ */

/* Admin split-container: kolumn på mobil */
#view-admin .admin-grid-container {
display: flex !important;
flex-direction: column !important;
flex: 1 !important;
height: 100% !important;
overflow: hidden !important;
}

/* Admin sidebar: full bredd, ingen fast höger-border */
#view-admin .admin-sidebar-list {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex: 1 !important;
overflow-y: auto !important;
border-right: none !important;
box-sizing: border-box !important;
}

/* Admin: dölj hela sidebaren (inkl. header) när detail är öppen */
#view-admin.mobile-detail-open .admin-sidebar-list {
display: none !important;
}

/* ================================================================
OM-VY (#view-about) — 1-kolumns grid på mobil, scrollbar
================================================================ */
#view-about {
overflow: hidden !important;
}

#view-about .about-grid {
grid-template-columns: 1fr !important;
grid-template-rows: none !important;
grid-auto-rows: max-content !important;
align-content: start !important;
gap: 14px !important;
padding: 14px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
height: calc(100dvh - 60px) !important;
max-height: none !important;
padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}

#view-about .about-cell {
border-radius: 12px !important;
gap: 10px !important;
height: auto !important;
min-height: 0 !important;
overflow: hidden !important;
padding: 14px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}

#view-about .about-shortcut-list {
flex: 0 0 auto !important;
overflow: visible !important;
}

#view-about .about-shortcut-row {
align-items: center !important;
display: flex !important;
flex-direction: row !important;
gap: 10px !important;
justify-content: space-between !important;
padding: 7px 10px !important;
}

#view-about .about-shortcut-label {
flex: 1 1 auto !important;
font-size: 11px !important;
line-height: 1.25 !important;
min-width: 0 !important;
overflow: hidden !important;
text-align: right !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}

#view-about .about-kbd-group {
flex: 0 0 auto !important;
max-width: 44% !important;
min-width: 0 !important;
}

#view-about .about-kbd-badge {
font-size: 8px !important;
padding: 2px 4px !important;
}

#view-about .about-platform-note {
font-size: 10px !important;
line-height: 1.35 !important;
}

#view-about .about-cell kbd {
font-size: 10px !important;
padding: 3px 7px !important;
}

#view-about .guide-section {
gap: 8px !important;
}

#view-about .guide-step {
align-items: center !important;
min-height: 0 !important;
padding: 8px 10px !important;
}

/* Statistik-grid: 1 kolumn på mobil (annars för smalt) */
#view-about #about-stats-content > div[style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
}

/* Tangentbord-cellen irrelevant på telefon — dölj */
#view-about .about-cell:first-child {
display: none !important;
}

#view-about .step-content {
font-size: 12px !important;
line-height: 1.35 !important;
min-width: 0 !important;
}

#view-about #about-stats-content {
flex: 0 0 auto !important;
overflow: visible !important;
}

body.capacitor-client #about-stats-content .about-stat-card {
min-height: 40px !important;
padding-top: 7px !important;
padding-bottom: 7px !important;
box-sizing: border-box !important;
}

#view-about .setting-item {
align-items: stretch !important;
flex-direction: column !important;
gap: 10px !important;
padding: 12px !important;
}

#view-about .setting-item > div {
min-width: 0 !important;
width: 100% !important;
}

#view-about .atlas-filter-dd,
#view-about .filter-select {
max-width: 100% !important;
min-width: 0 !important;
width: 100% !important;
}

#view-about .about-cell .info-item {
align-items: flex-start !important;
gap: 10px !important;
min-width: 0 !important;
}

#view-about .about-cell .info-item span:last-child {
min-width: 0 !important;
overflow-wrap: anywhere !important;
}

/* ================================================================
MOBILFIX 5 — MALLREDIGERARE: Spara/radera-ikoner dolda på Android
Det andra footerbaret (.detail-footer-toolbar) klipps av av
Android-navigationsfältet. Gör det sticky och lägg till safe-area padding.
================================================================ */
#view-templates .detail-footer-toolbar {
  padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  position: sticky !important;
  bottom: env(safe-area-inset-bottom) !important;
  z-index: 10 !important;
}

body.capacitor-client #view-templates .detail-footer-toolbar {
bottom: auto !important;
min-height: 52px !important;
padding: 8px 12px !important;
position: static !important;
}

/* ================================================================
DESKTOP-SKYDD: Dölj mobilknappar och overlay på skärmar > 768px.
Hanterar det fall då mobile.css laddas trots att media-queryn
misslyckas (t.ex. vid "Desktop site" på bred skärm).
================================================================ */
/* ================================================================
MOBILFIX 1 — ADMIN DETALJPANEL (#admin-detail-content)
Admin-detaljpanelen heter #admin-detail-content (ej .template-editor-container).
================================================================ */

/* Standard: dölj detaljpanelen (JS kontrollerar via display, men
mobile-detail-open behöver en CSS-fallback som alltid gäller) */
#view-admin:not(.mobile-detail-open) #admin-detail-content {
display: none !important;
}

/* När ärende/agent öppnas: visa detaljpanelen full höjd */
#view-admin.mobile-detail-open #admin-detail-content {
display: flex !important;
flex: 1 !important;
width: 100% !important;
max-width: 100vw !important;
min-width: 0 !important;
overflow: hidden !important;
}

/* Säkerställ att admin-grid är kolumn-orienterad på mobil */
#view-admin.mobile-detail-open .admin-grid-container {
flex-direction: column !important;
}

/* ================================================================
MOBILFIX 2 — iOS MOMENTUM-SCROLL
Alla scrollbara listor och detaljpaneler saknade -webkit-overflow-scrolling: touch.
Utan detta är scrollning trög och hackig på iPhone/iPad.
================================================================ */
#view-my-tickets .template-list-container,
#view-inbox .template-list-container,
#view-archive .template-list-container,
#view-customers .template-list-container,
#view-templates .template-list-container,
#view-admin .admin-sidebar-list,
#view-admin #admin-main-list,
#view-my-tickets .template-editor-container,
#view-inbox .template-editor-container,
#view-archive .template-editor-container,
#view-customers .template-editor-container,
#view-templates .template-editor-container,
#view-admin #admin-detail-content,
.sidebar,
#notes-list-container {
-webkit-overflow-scrolling: touch;
}

/* ================================================================
MOBILFIX 3 — MODALER PÅ SMAL SKÄRM (≤ 430px)
.glass-modal-box är 500px och login-modalen 360px.
På en 390px telefon → horisontell overflow → kan inte stängas.
max-width: 95vw i style-modals.css räcker inte — padding:32px
gör netto-bredden smalare. Här reduceras padding och sätts box-sizing: border-box.
================================================================ */
@media screen and (max-width: 430px) {
.glass-modal-box {
width: calc(100vw - 24px) !important;
max-width: calc(100vw - 24px) !important;
padding: 20px 16px !important;
box-sizing: border-box !important;
border-radius: 12px !important;
margin: 0 12px !important;
}

#login-modal .glass-modal-box {
width: calc(100vw - 24px) !important;
max-width: calc(100vw - 24px) !important;
padding: 20px 16px !important;
box-sizing: border-box !important;
}

/* Overlay: centrera korrekt utan horisontell scroll */
.glass-modal-overlay,
.atlas-help-overlay {
padding: 0 !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
}
}

/* App: hjälp-/infomodaler ska öppnas under aktuell vyrektangel, inte ovanpå den.
   Klassen sätts bara på snabbhjälp, vy-guide och info-modaler via JS. */
body.capacitor-client .custom-modal-overlay.atlas-mobile-anchored-modal,
body.capacitor-client .atlas-help-overlay.atlas-mobile-anchored-modal {
top: var(--atlas-modal-mobile-top, 0px) !important;
left: 0 !important;
right: 0 !important;
bottom: auto !important;
width: 100vw !important;
height: calc(100dvh - var(--atlas-modal-mobile-top, 0px) - var(--safe-area-bottom, 0px)) !important;
padding: 0 !important;
align-items: stretch !important;
justify-content: flex-start !important;
background: transparent !important;
overflow: hidden !important;
}

body.capacitor-client .atlas-mobile-anchored-modal > .glass-modal-box,
body.capacitor-client .atlas-mobile-anchored-modal > .help-modal-box {
width: 100vw !important;
max-width: 100vw !important;
height: 100% !important;
max-height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
box-sizing: border-box !important;
}

body.capacitor-client .atlas-mobile-anchored-modal > .glass-modal-box {
overflow-y: auto !important;
}

body.capacitor-client .atlas-mobile-anchored-modal > .glass-modal-box[style*="display:flex"],
body.capacitor-client .atlas-mobile-anchored-modal > .glass-modal-box[style*="display: flex"] {
overflow: hidden !important;
}

body.capacitor-client .atlas-mobile-anchored-modal > .help-modal-box {
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
padding: 0 !important;
}

body.capacitor-client .atlas-mobile-anchored-modal #help-content-area {
flex: 1 1 0 !important;
min-height: 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding: 0 20px 16px !important;
-webkit-overflow-scrolling: touch !important;
}

body.capacitor-client #atlas-help-overlay.atlas-mobile-anchored-modal .help-view-header {
margin: 0 0 16px !important;
padding: 18px 62px 16px 20px !important;
border-radius: 0 !important;
}

body.capacitor-client #atlas-help-overlay.atlas-mobile-anchored-modal .help-content ul {
margin: 0 !important;
padding: 0 !important;
}

body.capacitor-client #atlas-help-overlay.atlas-mobile-anchored-modal .help-content li {
margin-bottom: 12px !important;
}

body.capacitor-client #atlas-help-overlay.atlas-mobile-anchored-modal .help-footer {
flex: 0 0 auto !important;
margin: 0 !important;
padding: 12px 20px 16px !important;
}

.atlas-mobile-modal-close {
display: none;
}

body.capacitor-client .atlas-mobile-anchored-modal > .atlas-mobile-modal-close {
position: absolute !important;
top: 10px !important;
right: 10px !important;
z-index: 5 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 40px !important;
height: 40px !important;
min-height: 40px !important;
padding: 0 !important;
border-radius: 11px !important;
border: 1px solid rgba(255,255,255,0.13) !important;
background: rgba(0,0,0,0.22) !important;
color: rgba(255,255,255,0.74) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
}

body.capacitor-client .atlas-mobile-anchored-modal > .atlas-mobile-modal-close svg {
width: 18px !important;
height: 18px !important;
}

body.capacitor-client .notif-bell-btn {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 44px !important;
min-width: 44px !important;
height: 44px !important;
padding: 0 !important;
}

body.capacitor-client .notif-bell-btn .notif-badge-bubble {
top: 3px !important;
right: 3px !important;
min-width: 15px !important;
height: 15px !important;
padding: 0 4px !important;
box-sizing: border-box !important;
}

/* App: mail-composers behåller sin modalhöjd men börjar under aktuell
   vyrektangel, så bottenluften används i stället för att toppen täcker headern. */
body.capacitor-client #atlas-mail-composer.atlas-mobile-composer-anchored,
body.capacitor-client #customer-mail-compose-modal.atlas-mobile-composer-anchored {
top: var(--atlas-modal-mobile-top, 0px) !important;
left: 0 !important;
right: 0 !important;
bottom: auto !important;
width: 100vw !important;
height: calc(100dvh - var(--atlas-modal-mobile-top, 0px) - var(--safe-area-bottom, 0px)) !important;
padding: 0 !important;
align-items: flex-start !important;
justify-content: center !important;
background: transparent !important;
overflow: hidden !important;
}

body.capacitor-client #atlas-mail-composer.atlas-mobile-composer-anchored > .glass-modal-box,
body.capacitor-client #customer-mail-compose-modal.atlas-mobile-composer-anchored > .glass-modal-box {
width: calc(100vw - 22px) !important;
max-width: calc(100vw - 22px) !important;
height: min(680px, 100%) !important;
max-height: 100% !important;
margin: 0 11px !important;
box-sizing: border-box !important;
}

/* ================================================================
MOBILFIX 4 — TOUCH-ACTION: MANIPULATION (iOS 300ms-fördröjning)
Ärendekort, agentkort och knappar saknade touch-action: manipulation.
Utan det väntar iOS 300ms för att avgöra om det är ett dubbel-tap-zoom,
vilket ger känslan av att ingenting händer vid klick.
================================================================ */
.ticket-card,
.team-ticket-card,
.template-item,
.menu-item,
.agent-card,
.header-tab,
.btn,
button,
[role="button"],
.clickable,
.chat-send-btn,
.action-btn,
.icon-btn,
.pill-btn,
.tab-btn,
.filter-chip,
.admin-list-item,
#mobile-hamburger,
#mobile-back-btn {
touch-action: manipulation;
}
/* ================================================================
MOBILFIX 5 — HEM-VY WIDGET-LAYOUT
Ny layout på mobil:
Rad 1: PRIVAT-kort | Välkommen+klocka  (sida vid sida, befintligt)
Rad 2: MINA ÄRENDEN | KONTOR DU BEVAKAR (sida vid sida)
Rad 3: ATT GÖRA (full bredd)

Kortraderna har inline style="display:flex" — kortens storlek
styr vi via CSS så de ryms och klockan visas korrekt.
================================================================ */

/* Klocka: syns alltid, rätt storlek */
#hw-clock {
display: block !important;
font-size: 20px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
color: var(--text-primary) !important;
}

#hw-date {
display: block !important;
font-size: 10px !important;
color: var(--text-secondary) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}

.hw-welcome-greeting {
font-size: 11px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}

#hw-welcome-card {
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
min-width: 0 !important;
}

.hw-welcome-left {
min-width: 0 !important;
overflow: hidden !important;
}

/* Alla kort: ingen overflow, ingen fast bredd */
.hw-card {
min-width: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
flex: 1 !important;
padding: 10px 12px !important;
}

/* Stats-kort: ta bort desktop-minhöjden och kompaktera sub-items */
.hw-stats-card {
min-height: 0 !important;
width: auto !important;
}

#hw-stats {
gap: 4px !important;
}

/* Widget-area: kompakt padding */
#home-widgets-area {
padding: 10px 10px 0 !important;
gap: 8px !important;
overflow-y: auto !important;
}

/* Rad 1 (web-mobil, ej app): konvertera till 2-kolumns grid.
   Privat-kortet tar full bredd; välkomst + statistik sida vid sida.
   body.capacitor-client har en identisk regel med högre specificitet. */
body:not(.capacitor-client) #home-widgets-area > div:first-child {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
align-items: stretch !important;
}

body:not(.capacitor-client) #home-widgets-area > div:first-child .hw-private-card {
grid-column: 1 / -1 !important;
width: auto !important;
}

/* Rad 2 gap */
body:not(.capacitor-client) #home-widgets-area > div:last-child {
gap: 8px !important;
flex-wrap: wrap !important;
align-items: flex-start !important;
}

body:not(.capacitor-client) #home-widgets-area > div:last-child #hw-offices-card {
flex: 1 1 100% !important;
width: 100% !important;
max-width: none !important;
order: 1 !important;
}

body:not(.capacitor-client) #home-widgets-area > div:last-child #hw-todo-card {
flex: 1 1 100% !important;
width: 100% !important;
max-width: none !important;
order: 2 !important;
}

/* ================================================================
MOBILFIX 6 — HEADER TITLAR (dölj text, behåll ikon)
Läggs också i style-admin.css men upprepas här för säkerhets skull
för vyer som inte täcks av style-admin.css.
================================================================ */
.chat-header h2 {
font-size: 0 !important;
display: inline-flex !important;
align-items: center !important;
overflow: visible !important;
flex-shrink: 0 !important;
padding: 0 !important;
}
/* Ikon-brickan (bakgrund/border/skugga ärvs från style-admin.css) finjusteras
   för mobil — något mindre tile men samma integrerade look som desktop. */
.chat-header h2 .header-title-icon {
width: 20px !important;
height: 20px !important;
padding: 7px !important;
border-radius: 10px !important;
display: block !important;
flex-shrink: 0 !important;
}
/* ================================================================
ADMIN READER MODAL — BOTTOM SHEET (mobil)
Placeras i mobile.css (laddas med media-attribut) i stället för
style-admin.css. Desktop-reglerna i style-admin.css (align-items:
flex-start, padding-top:11vh, width:680px) overridas av !important
här — korrekt specificitetsmönster.
================================================================ */

/* Overlay: förankra nerifrån (bottom sheet) */
#atlas-reader-modal {
align-items: flex-end !important;
padding: 0 !important;
overflow: hidden !important;
}

/* Modal-boxen: full bredd, 90svh från botten */
#atlas-reader-modal .glass-modal-box {
width: 100vw !important;
max-width: 100vw !important;
min-width: 100vw !important;
height: 90svh !important;
min-height: 75svh !important;
max-height: 95svh !important;
border-radius: 14px 14px 0 0 !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
}

/* App: öppna admin-läsaren under den gemensamma Admin-flikraden. Själva
   Personal-/Kontor-detailheadern täcks av läsaren, precis som detaljvyerna
   i Inkorgen/Mina ärenden/Garaget. */
body.capacitor-client #atlas-reader-modal {
top: var(--atlas-reader-mobile-top, calc(var(--safe-area-top) + 127px)) !important;
height: calc(100dvh - var(--atlas-reader-mobile-top, calc(var(--safe-area-top) + 127px)) - var(--safe-area-bottom, 0px)) !important;
bottom: auto !important;
background: transparent !important;
}

body.capacitor-client #atlas-reader-modal .glass-modal-box {
height: 100% !important;
max-height: 100% !important;
min-height: 0 !important;
margin-bottom: 0 !important;
border-radius: 0 !important;
}

/* Chat-scroll: tar upp allt utrymme mellan header och composer */
#atlas-reader-modal #reader-chat-scroll {
flex: 1 1 0 !important;
min-height: 0 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}

/* Header: komprimera padding så att "1/6 > <"-navigationens 
flex-shrink:0-block inte trycks ut ur ramen */
#atlas-reader-modal .glass-modal-box > div:first-child {
padding: 8px 10px !important;
}

/* Avatar: lite mindre på smal skärm */
#atlas-reader-modal .glass-modal-box > div:first-child > div > div:first-child[style*="width:40px"] {
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
font-size: 13px !important;
border-radius: 8px !important;
}

/* Pills-rad: dölj på mobil — tar för mycket vertikal höjd i headern */
#atlas-reader-modal .reader-pills-scroll-wrap {
display: none !important;
}

/* Meddelandebubblornas max-width (satt via inline style i admin-reader.js).
!important vinner mot inline-styles. Ökar från 60/70 % → 90 % på smal skärm. */
#atlas-reader-modal #reader-chat-scroll > div {
max-width: 90% !important;
}

/* Quill-wrappern: inline style sätter min-height:84px.
Begränsa till 48px på mobil så composer inte äter halva skärmen. */
#atlas-reader-modal #reader-quick-reply-wrap {
min-height: 48px !important;
}

/* Pills: horisontell scroll, aldrig radbryta */
#atlas-reader-modal .reader-pills-container {
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
}
#atlas-reader-modal .reader-pills-container::-webkit-scrollbar {
display: none !important;
}
#atlas-reader-modal .pill {
flex-shrink: 0 !important;
}

/* Kundvyns ärendemodal: samma bottom-sheet-princip som admin-readern i appen.
   Gäller bara normal reader, inte flytande/minimerat läge. */
body.capacitor-client #customer-reader-modal:not([data-reader-state="floating"]):not([data-reader-state="minimized"]) {
align-items: flex-end !important;
padding: 0 !important;
overflow: hidden !important;
top: var(--customer-reader-mobile-top, 0px) !important;
height: calc(100dvh - var(--customer-reader-mobile-top, 0px) - var(--safe-area-bottom, 0px)) !important;
background: transparent !important;
}

body.capacitor-client #customer-reader-modal:not([data-reader-state="floating"]):not([data-reader-state="minimized"]) .glass-modal-box {
width: 100vw !important;
max-width: 100vw !important;
min-width: 100vw !important;
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
border-radius: 14px 14px 0 0 !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
}

body.capacitor-client #customer-reader-modal:not([data-reader-state="floating"]):not([data-reader-state="minimized"]) #cust-reader-chat-scroll {
flex: 1 1 0 !important;
min-height: 0 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}

body.capacitor-client #customer-reader-modal:not([data-reader-state="floating"]):not([data-reader-state="minimized"]) .glass-modal-box > div:first-child {
padding: 8px 10px !important;
}

body.capacitor-client #customer-reader-modal:not([data-reader-state="floating"]):not([data-reader-state="minimized"]) .glass-modal-box > div:first-child > div > div:first-child[style*="width:40px"] {
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
font-size: 13px !important;
border-radius: 8px !important;
}

body.capacitor-client #customer-reader-modal:not([data-reader-state="floating"]):not([data-reader-state="minimized"]) .reader-pills-scroll-wrap {
display: none !important;
}

body.capacitor-client #customer-reader-modal:not([data-reader-state="floating"]):not([data-reader-state="minimized"]) #cust-reader-chat-scroll > div {
max-width: 90% !important;
}

body.capacitor-client #customer-reader-modal:not([data-reader-state="floating"]):not([data-reader-state="minimized"]) #cust-reader-quick-reply-wrap {
min-height: 48px !important;
}

/* ================================================================
MOBILFIX 7 — CAPACITOR SAFE AREA + KOMPAKT UI
Capacitor kör med body safe-area padding. Därför måste app-containern
vara kvar innanför den ytan; annars blir varje vy safe-area-höjden för
hög och Android-navigeringen klipper listor, detailvyer och footers.
Ärendekort och hem-widgets kompakteras endast i appen.
================================================================ */

/* Scrollbara listcontainers: app-containern slutar ovanför Android nav-bar,
   så bara normal andningsyta behövs här. */
body.capacitor-client #view-archive .template-list-container,
body.capacitor-client #view-inbox .template-list-container,
body.capacitor-client #view-my-tickets .template-list-container,
body.capacitor-client #view-customers .template-list-container,
body.capacitor-client #view-templates .template-list-container,
body.capacitor-client #view-admin .template-list-container,
body.capacitor-client #view-admin .admin-sidebar-list,
body.capacitor-client #view-admin #admin-main-list {
padding-bottom: 16px !important;
}

/* Detailvyer ska inte dubbelräkna safe-area. */
body.capacitor-client #view-inbox.mobile-detail-open .template-editor-container,
body.capacitor-client #view-my-tickets.mobile-detail-open .template-editor-container,
body.capacitor-client #view-archive.mobile-detail-open .template-editor-container,
body.capacitor-client #view-customers.mobile-detail-open .template-editor-container {
padding-bottom: 0 !important;
}

/* Garaget: filterhuvudet döljs i fokusläge (mobile-detail-open) via
   body.capacitor-client-regeln längre ned i filen. Ingen extra regel här. */

/* Garagets detaljvy scrollar på .detail-body. Den inre historik-wrappern
   får inte vara en egen icke-scrollande touch-container, annars fastnar
   Android WebView-draget där och når aldrig den faktiska scrollen. */
body.capacitor-client #archive-detail .detail-body > .inbox-chat-history {
display: block !important;
overflow: visible !important;
overscroll-behavior: auto !important;
}

/* Ärendekort: kompaktare höjd utan att tappa footer-info. */
body.capacitor-client .team-ticket-card,
body.capacitor-client .archive-card {
padding: 8px 10px 28px 10px !important;
min-height: 72px !important;
margin-bottom: 5px !important;
border-radius: 11px !important;
}

body.capacitor-client .team-ticket-card .ticket-header-row,
body.capacitor-client .archive-card .ticket-header-row {
margin-bottom: 2px !important;
}

body.capacitor-client .team-ticket-card .ticket-preview,
body.capacitor-client .archive-card .ticket-preview {
font-size: 11px !important;
line-height: 1.2 !important;
padding-right: 164px !important;
}

body.capacitor-client .team-ticket-card .ticket-footer-bar,
body.capacitor-client .archive-card .ticket-footer-bar {
height: 24px !important;
padding: 0 9px 0 10px !important;
}

body.capacitor-client .team-ticket-card .ticket-time,
body.capacitor-client .archive-card .ticket-time {
font-size: 9px !important;
}

body.capacitor-client .team-ticket-card .ticket-tag,
body.capacitor-client .archive-card .ticket-tag {
font-size: 8px !important;
padding: 1px 6px !important;
}

/* Hem-vy: på mobil ska primära widgets ligga i en tydlig vertikal ordning:
   klocka fullbredd, Mina ärenden + Kontor bredvid varandra, Att göra underst.
   Privat-infokortet döljs i appen eftersom det bara är förklarande text och
   annars äter första skärmens viktigaste arbetsyta. */
body.capacitor-client #home-widgets-area {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
gap: 8px !important;
align-content: start !important;
overflow-y: auto !important;
}

body.capacitor-client #home-widgets-area > div:first-child {
display: contents !important;
}

body.capacitor-client #home-widgets-area > div:first-child .hw-private-card {
display: none !important;
}

body.capacitor-client #home-widgets-area > div:last-child {
display: contents !important;
}

body.capacitor-client #hw-welcome-card {
grid-column: 1 / -1 !important;
order: 1 !important;
min-height: 118px !important;
}

body.capacitor-client .hw-stats-card {
grid-column: 1 !important;
order: 2 !important;
height: 100% !important;
}

body.capacitor-client #hw-offices-card {
grid-column: 2 !important;
order: 3 !important;
height: 100% !important;
}

body.capacitor-client #hw-todo-card {
grid-column: 1 / -1 !important;
order: 4 !important;
}

body.capacitor-client #hw-todo-card,
body.capacitor-client #hw-offices-card {
width: auto !important;
flex: 1 1 auto !important;
min-height: 0 !important;
padding: 12px !important;
}

body.capacitor-client .hw-stats-card {
width: auto !important;
min-height: 0 !important;
padding: 12px !important;
}

body.capacitor-client.atlas-single-office .hw-stats-card {
grid-column: 1 / -1 !important;
}

body.capacitor-client #hw-offices-card .hw-card-header,
body.capacitor-client .hw-stats-card h3 {
min-height: 28px !important;
margin-bottom: 8px !important;
}

/* Todo-lista: full bredd i stället för ihoptryckta halvradskort. */
body.capacitor-client #hw-todo-card .hw-todo-list {
max-height: clamp(160px, calc(100dvh - 520px), 260px) !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}

body.capacitor-client #hw-todo-card .hw-todo-section {
gap: 6px !important;
}

body.capacitor-client #hw-todo-card .hw-todo-section + .hw-todo-section {
margin-top: 9px !important;
}

body.capacitor-client #hw-todo-card .hw-todo-section-head,
body.capacitor-client #hw-todo-card .hw-todo-archive-toggle {
min-height: 40px !important;
gap: 8px !important;
}

body.capacitor-client #hw-todo-card .hw-todo-section-title {
gap: 7px !important;
font-size: 11px !important;
min-width: 0 !important;
}

body.capacitor-client #hw-todo-card .hw-todo-section-title em {
display: none !important;
}

body.capacitor-client #hw-todo-card .hw-todo-section-actions {
gap: 6px !important;
}

body.capacitor-client #hw-todo-card .hw-todo-head-icon-btn,
body.capacitor-client #hw-todo-card .hw-todo-head-action-btn {
height: 36px !important;
border-radius: 10px !important;
}

body.capacitor-client #hw-todo-card .hw-todo-head-icon-btn {
width: 36px !important;
}

body.capacitor-client #hw-todo-card .hw-todo-head-action-btn {
padding: 0 10px !important;
font-size: 11px !important;
}

body.capacitor-client #hw-todo-card .hw-todo-item {
gap: 7px !important;
min-height: 42px !important;
padding: 6px 7px 6px 9px !important;
}

body.capacitor-client #hw-todo-card .hw-todo-ts {
flex: 0 0 auto !important;
font-size: 9px !important;
max-width: 82px !important;
}

body.capacitor-client #hw-todo-card .hw-todo-text {
min-width: 0 !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
white-space: normal !important;
}

body.capacitor-client #hw-todo-card .hw-todo-feedback,
body.capacitor-client #hw-todo-card .hw-todo-group-toggle {
min-height: 36px !important;
}

body.capacitor-client #hw-todo-card .hw-todo-bulk-btn {
height: 36px !important;
}

body.capacitor-client #hw-todo-card .hw-todo-bulk-icon-btn {
width: 36px !important;
height: 36px !important;
}

body.capacitor-client #hw-todo-card .hw-todo-bell,
body.capacitor-client #hw-todo-card .hw-todo-check,
body.capacitor-client #hw-todo-card .hw-todo-restore,
body.capacitor-client #hw-todo-card .hw-todo-del {
width: 30px !important;
height: 30px !important;
flex: 0 0 30px !important;
}

body.capacitor-client #hw-todo-card .hw-todo-del {
opacity: 0.72 !important;
}

body.capacitor-client #hw-todo-card .hw-todo-archive-toggle {
padding: 7px 9px !important;
}

/* Hem-vy widget-area: safe-area padding nedtill */
body.capacitor-client #home-widgets-area {
flex: 1 1 auto !important;
min-height: 0 !important;
padding-bottom: 12px !important;
}

/* Admin > Kontor: Pixel-bredden räcker inte för både ärendekort och agentlista
   i två kolumner utan att kortet trycks ihop. Behåll fulla kort på varsin rad. */
body.capacitor-client #view-admin #office-top-grid {
grid-template-columns: 1fr !important;
gap: 12px !important;
}

body.capacitor-client #office-detail-body > div:has(> #box-tickets):has(> #box-agents) {
grid-template-columns: 1fr !important;
gap: 12px !important;
}

body.capacitor-client #office-detail-body #box-tickets,
body.capacitor-client #office-detail-body #box-agents {
max-height: none !important;
min-height: 0 !important;
overflow: visible !important;
touch-action: pan-y !important;
}

body.capacitor-client #office-detail-body #box-tickets .scroll-list,
body.capacitor-client #office-detail-body #box-agents .scroll-list {
overflow: visible !important;
touch-action: pan-y !important;
-webkit-overflow-scrolling: auto !important;
}

body.capacitor-client #office-detail-body .admin-ticket-preview .atp-footer-row {
align-items: flex-start !important;
}

/* Kopplade agenter på mobil: ge varje agent en egen liten kort-rad med
   agentens färg som vänsterstapel, så man får distinktion mellan agenterna
   (den tidigare border-bottom rgba(255,255,255,0.05) syns inte i ljusa teman). */
body.capacitor-client #office-detail-body #box-agents [data-office-agent-username] {
background: color-mix(in srgb, var(--text-primary) 4%, transparent) !important;
border: 1px solid color-mix(in srgb, var(--text-primary) 9%, transparent) !important;
border-left: 3px solid var(--agent-color, var(--accent-primary)) !important;
border-radius: 8px !important;
padding: 8px 10px !important;
margin-bottom: 8px !important;
}

body.capacitor-client #office-detail-body #box-agents [data-office-agent-username]:last-child {
margin-bottom: 0 !important;
}

/* ================================================================
MOBILFIX 22 — detaljvyns header på mobil (app + web): flytta @ MAIL/@ CHATT-
pillen ner till pills-raden (samma rad som kontor/agent-pills) och tajta
mellanrummen mellan action-ikonerna. Gäller Inkorgen/Mina ärenden/
Garaget/Kunder/Admin — alla använder renderDetailHeader().
Gäller även body.capacitor-client — appens detaljvy delar samma
renderDetailHeader()-markup och hade kvar badgen i titelraden.
================================================================ */
.detail-subject .detail-type-badge {
display: none !important;
}
.detail-pills-container .detail-type-badge-mobile {
display: inline-flex !important;
}

/* Tätare ikon-spacing i detaljvyns header-actions, all mobil (app + web) */
.detail-header-actions {
gap: 4px !important;
}

body.capacitor-client #office-detail-body .admin-ticket-preview .atp-pills {
flex-wrap: wrap !important;
justify-content: flex-end !important;
}

/* ================================================================
MOBILFIX 8 — PRIORITETSCIRKEL TOUCH-TARGET (card-prio-btn)
.card-prio-btn är 10×10px visuellt (inkl. min-width:10px i style.css)
och body.capacitor-client .team-ticket-card button har min-height:0.
Bygg 44×44 touch-target med pseudo-element som ritar cirkeln;
parent-knappen är osynlig och fungerar som klickyta. Själva knappgruppen
absolutpositioneras ur header-flexflödet så höjden inte skapar gap.
================================================================ */
body.capacitor-client .team-ticket-card .card-prio-btn,
body.capacitor-client .archive-card .card-prio-btn,
body.capacitor-client .card-prio-btn {
  position: relative !important;
  width: 10px !important;
  height: 10px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 6px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
body.capacitor-client .card-prio-btn::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 2px currentColor, 0 0 8px color-mix(in srgb, currentColor 38%, transparent) !important;
  pointer-events: none !important;
}
body.capacitor-client .card-prio-btn:hover::before {
  transform: translate(-50%, -50%) scale(1.3) !important;
}

/* ================================================================
MOBILFIX 9 — HISTORIK- OCH NOTES-KNAPPAR I ÄRENDEKORT
body.capacitor-client .team-ticket-card button sätter min-height:0,
vilket reducerar touch-target till 18px (SVG-höjd). Ge dem 44px höjd.
================================================================ */
body.capacitor-client .team-ticket-card .history-trigger-btn,
body.capacitor-client .team-ticket-card .notes-trigger-btn {
  min-height: 44px !important;
  min-width: 36px !important;
  padding: 0 9px !important;
}

/* ================================================================
MOBILFIX-CARD-GAP — FLYTTA .ticket-top-right UR FLEX-FLÖDET
Rot: .ticket-top-right med min-height:44px expanderade .ticket-header-row
(align-items:flex-start) till 44px; namntext ~22px gav tomt gap.
Korten har position:relative och overflow:hidden, så knappgruppen placeras
absolut inne i kortet. Padding-right hindrar namntext från underlöpning.
================================================================ */
body.capacitor-client .team-ticket-card .ticket-top-right,
body.capacitor-client .archive-card .ticket-top-right {
  position: absolute !important;
  top: 0 !important;
  right: 40px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-left: 0 !important;
}

body.capacitor-client .team-ticket-card .ticket-header-row,
body.capacitor-client .archive-card .ticket-header-row {
  padding-right: 164px !important;
}

body.capacitor-client #inbox-list .ticket-top-right > span,
body.capacitor-client #my-tickets-list .ticket-top-right > span,
body.capacitor-client #customer-ticket-list-body .ticket-top-right > span {
  display: none !important;
}

body.capacitor-client .archive-card .history-trigger-btn,
body.capacitor-client .archive-card .notes-trigger-btn {
  min-height: 44px !important;
  min-width: 36px !important;
  padding: 0 9px !important;
}

/* ================================================================
MOBILFIX 10 — PRIORITY-FLYOUT UTANFÖR VIEWPORT
togglePriorityFlyout beräknar right=innerWidth-rect.right via inline
style. Om knappen sitter nära vänsterkanten (rätt=stor) hamnar flyouten
off-screen till vänster. CSS !important centrera horisontellt.
================================================================ */
body.capacitor-client .priority-flyout {
  right: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* ================================================================
MOBILFIX 11 — ÄRENDEHISTORIK-MODAL SCROLL + SMAL SKÄRM
- Capacitor WebView kräver -webkit-overflow-scrolling för listan.
- På ≤430px-skärmar har .glass-modal-box padding 20px 16px (ej 32px)
  men modalens inline margin:-32px -32px överkorrigerar → justera.
================================================================ */
body.capacitor-client #ticket-history-list {
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}
@media screen and (max-width: 430px) {
  #atlas-ticket-history-modal .glass-modal-box > div:first-child {
    margin: -20px -16px 18px !important;
  }
}

/* ================================================================
MOBILFIX 12 — NOTISPANEL BREDD
#notif-panel är 400px bred — knappt plats på 448dp viewport och
off-screen på smalare telefoner. Begränsa till viewport.
================================================================ */
#notif-panel,
body.capacitor-client #notif-panel {
  left: 12px !important;
  right: 12px !important;
  width: auto !important;
  max-width: calc(100vw - 24px) !important;
  max-height: min(540px, 70svh) !important;
}

/* ================================================================
MOBILFIX 13 — GLOBAL SÖKNING RESULTAT-SCROLL
Resultat-containern och overlay-modalens inre lista behöver
-webkit-overflow-scrolling i Capacitor WebView för smidig scroll.
================================================================ */
body.capacitor-client #atlas-global-search-results {
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

/* ================================================================
MOBILFIX 14 — ADMIN-KONFIG RADBRYTNING
Flex-rader (buildConfigRow): label på egen rad, input+knapp på rad 2.
Grid-rader (RAG, bokningslänkar) undantas via :not([style*="display:grid"])
så deras inline grid-template-columns och item-stilar inte skrivs över.
================================================================ */
body.capacitor-client .admin-config-row:not([style*="display:grid"]) {
  min-width: 0 !important;
  flex-wrap: wrap !important;
}
body.capacitor-client .admin-config-row:not([style*="display:grid"]) > label {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-bottom: 4px !important;
}
body.capacitor-client .admin-config-row:not([style*="display:grid"]) > .admin-config-field,
body.capacitor-client .admin-config-row:not([style*="display:grid"]) > select.admin-config-field,
body.capacitor-client .admin-config-row:not([style*="display:grid"]) > input.admin-config-field {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 60px !important;
}
body.capacitor-client .admin-config-row > span {
  display: block !important;
  width: 100% !important;
  margin-top: 6px !important;
  line-height: 1.4 !important;
}
body.capacitor-client .admin-config-row > div {
  min-width: 0 !important;
  flex-wrap: wrap !important;
}

/* ================================================================
MOBILFIX 15 — ADMIN-CONFIG-FIELD TEXT I ANDROID WEBVIEW
Android WebView ignorerar color på disabled inputs — webkit-text-fill-color krävs.
================================================================ */
body.capacitor-client .admin-config-field {
  -webkit-text-fill-color: var(--text-primary) !important;
  color: var(--text-primary) !important;
}
body.capacitor-client .admin-config-field:disabled {
  -webkit-text-fill-color: color-mix(in srgb, var(--text-primary) 55%, transparent) !important;
  opacity: 1 !important;
}

/* ================================================================
MOBILFIX 16 — ADMIN GRID-RADER PÅ MOBIL
6-kolumns RAG-rader och 4-kolumns bokningslänk/TS-URL-rader trillar
utanför mobilskärmen (~360 px). Konverteras till flex-wrap-layout:
  rad 1: label / titel (full bredd)
  rad 2: input + låsknapp sida vid sida
Hint-texten i RAG-rader döljs (info finns i tooltip på label).
================================================================ */

/* RAG-poängsättning: minmax(170px, 0.75fr) minmax(260px, 1.5fr) 120px auto auto auto */
body.capacitor-client .admin-config-row[style*="minmax(170px"] {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px 8px !important;
  margin-bottom: 12px !important;
}
body.capacitor-client .admin-config-row[style*="minmax(170px"] > label {
  flex: 0 0 100% !important;
  width: 100% !important;
  margin: 0 0 4px 0 !important;
  font-size: 12px !important;
}
body.capacitor-client .admin-config-row[style*="minmax(170px"] > div {
  display: none !important;
}
body.capacitor-client .admin-config-row[style*="minmax(170px"] > input.admin-config-field {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 80px !important;
  max-width: 140px !important;
}

/* Bokningslänkar + TS-URLs: 220px 1fr auto auto */
body.capacitor-client .admin-config-row[style*="220px 1fr"] {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px 8px !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  margin-bottom: 6px !important;
}
body.capacitor-client .admin-config-row[style*="220px 1fr"] > div:first-child {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 0 !important;
}
body.capacitor-client .admin-config-row[style*="220px 1fr"] > input.admin-config-field {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
}

/* ================================================================
MOBILFIX 17 — KUNSKAPSLUCKOR-KORT I LJUSA TEMAN
Datum-texten (opacity:0.4) och RAG-badge (rgba-border) har för låg kontrast
mot den ljusgrå bakgrunden i Nordic Dawn / apple-light.
Scoped till .atlas-light-theme (sätts av changeTheme i modals.js).
================================================================ */
body.capacitor-client.atlas-light-theme .admin-mini-card[id^="gap-card-"] {
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

body.capacitor-client.atlas-light-theme .admin-mini-card[id^="gap-card-"] > div:first-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
  padding-bottom: 5px !important;
  margin-bottom: 3px !important;
}

body.capacitor-client.atlas-light-theme .admin-mini-card[id^="gap-card-"] > div:first-child > span[style*="opacity:0.4"],
body.capacitor-client.atlas-light-theme .admin-mini-card[id^="gap-card-"] > div:first-child > span[style*="opacity: 0.4"] {
  opacity: 0.65 !important;
  color: var(--text-primary) !important;
}

body.capacitor-client.atlas-light-theme .admin-mini-card[id^="gap-card-"] > div:first-child > span[style*="#636366"] {
  color: #374151 !important;
  background: rgba(0, 0, 0, 0.07) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

/* ================================================================
MOBILFIX 18 — KUNSKAPSBANK KB-SEKTIONER
.kw-pill-pills wrappas utan gap och sektionsgränser saknar separator.
================================================================ */
body.capacitor-client .admin-kb-keywords {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 8px !important;
}

body.capacitor-client .kw-pill {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

body.capacitor-client .admin-kb-section-card {
  border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08)) !important;
  padding-bottom: 10px !important;
  margin-bottom: 10px !important;
}

body.capacitor-client .admin-kb-title-field {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* MOBILFIX 19 — HEM TODO WORD-BREAK: se .hw-todo-text-regeln ovan (MF7-blocket). */

/* ================================================================
MOBILFIX 20 — KUNSKAPSIMPORT PANEL-HEADERS BLIR TOMMA GRÅ RUTOR
@media (max-width:768px) i style-admin.css ställer .ki-panel-header
i kolumn (rubrik ovanpå undertext) — på 448px mobilbredd blir den
gråblå gradient-bakgrunden då ~43px hög med mest tomt utrymme.
Behåll radlayouten (rubrik vänster, undertext höger) som på desktop.
================================================================ */
body.capacitor-client .ki-panel-header {
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

/* ================================================================
MOBILFIX 21 — F-UX-8 TOUCH :ACTIVE FEEDBACK
-webkit-tap-highlight-color: transparent (rad 14) raderar webbläsarens
inbyggda tryck-effekt. Utan explicit :active ser interaktiva element
helt orörda ut vid tryckning. Kräver pointer:coarse för att inte
aktiveras på mus på smal fönsterstorlek (t.ex. DevTools narrow).
================================================================ */
@media (pointer: coarse) {
  .menu-item:active {
    opacity: 0.65 !important;
    background: rgba(255, 255, 255, 0.06) !important;
  }

  .team-ticket-card:active,
  .archive-card:active {
    opacity: 0.82 !important;
    transform: scale(0.99) !important;
  }

  .filter-btn:active,
  .filter-chip:active,
  .action-btn:active,
  .icon-btn:active,
  .pill-btn:active,
  .tab-btn:active,
  .header-tab:active {
    opacity: 0.65 !important;
    transform: scale(0.97) !important;
  }

  button:not([class]):active,
  [role="button"]:active {
    opacity: 0.7 !important;
  }
}

/* ================================================================
MOBILFIX 23 — TJÄNSTEKATALOG FORDONSKATEGORIER I LJUSA TEMAN
.catalog-vehicle-group har ingen bakgrund — osynlig mot ljusgrå sida.
Varje fordonsgrupp (BIL, MC, AM, SLÄP, LASTBIL) får kort-utseende.
Interna tjänstekort (.catalog-list-card) får tydligare kontrast.
================================================================ */
body.capacitor-client.atlas-light-theme .catalog-vehicle-group {
  background: color-mix(in srgb, var(--accent-primary) 9%, #ffffff 72%);
  border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, rgba(0, 0, 0, 0.14));
  border-radius: 10px;
  margin-bottom: 8px;
}

body.capacitor-client.atlas-light-theme .catalog-vehicle-heading {
  color: var(--text-primary);
}

body.capacitor-client.atlas-light-theme .catalog-vehicle-heading > span,
body.capacitor-client.atlas-light-theme .catalog-vehicle-tools > span {
  opacity: 0.65 !important;
}

body.capacitor-client.atlas-light-theme .catalog-list-card {
  background: rgba(248, 250, 249, 0.92) !important;
  border-color: rgba(34, 52, 45, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}
body.capacitor-client.atlas-light-theme .catalog-list-card.active {
  background: rgba(244, 248, 246, 0.96) !important;
  border-color: color-mix(in srgb, var(--accent-primary) 42%, rgba(34, 52, 45, 0.14)) !important;
}
body.capacitor-client.atlas-light-theme .catalog-list-card .svc-type-pill {
  background: rgba(255, 255, 255, 0.54) !important;
  border-color: rgba(70, 98, 84, 0.18) !important;
  color: color-mix(in srgb, var(--text-primary) 72%, var(--text-secondary) 28%) !important;
  font-weight: 700 !important;
}
body.capacitor-client.atlas-light-theme .catalog-list-card .svc-type-pill.is-package {
  background: color-mix(in srgb, var(--accent-primary) 12%, #ffffff 62%) !important;
  border-color: color-mix(in srgb, var(--accent-primary) 48%, rgba(0, 0, 0, 0.12)) !important;
  color: color-mix(in srgb, var(--accent-primary) 78%, var(--text-primary) 22%) !important;
}
body.capacitor-client.atlas-light-theme .catalog-list-card .svc-type-pill.svc-type-kurs {
  background: color-mix(in srgb, #a78bfa 16%, #ffffff 64%) !important;
  border-color: rgba(124, 58, 237, 0.28) !important;
  color: #6d28d9 !important;
}
body.capacitor-client.atlas-light-theme .catalog-list-card .svc-type-pill.svc-type-lesson {
  background: color-mix(in srgb, #60a5fa 15%, #ffffff 66%) !important;
  border-color: rgba(37, 99, 235, 0.24) !important;
  color: #1d4ed8 !important;
}

/* ================================================================
MOBILFIX 24 — ADMIN-FLIKAR + KNAPPAR I LJUSA TEMAN
Fyra elementtyper som använder rgba(255,255,255,…) — osynliga mot
ljus bakgrund på Apple Light Green / Nordic Dawn:
  1. admin-sysconfig-nav-item  (Systemkonfig + Kundchatt nav-lista)
  2. btn-glass-tiny             (liten glasknapp, texten rgba 55% vit)
  3. report-preset-btn          (Rapporter AI — förinst. rapporter)
  4. ki-section-card            (Kunskapsimport — fynds-kort)
Active-state på nav-item använder accent-primary → synlig → orörd.
Ki-kort: state-vänster-border (grön/gul/röd) återproclameras explicit
         efter att border-color-overriden annars dödar den.
================================================================ */

/* 1 — Systemkonfig + Kundchatt navigeringsobjekt */
body.capacitor-client.atlas-light-theme #view-admin .admin-sysconfig-nav-item {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}
body.capacitor-client.atlas-light-theme #view-admin .admin-sysconfig-nav-item:hover {
  background: rgba(0, 0, 0, 0.09) !important;
  border-color: rgba(0, 0, 0, 0.18) !important;
}

/* 2 — btn-glass-tiny: text och form osynliga i ljust läge */
body.capacitor-client.atlas-light-theme .btn-glass-tiny {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: var(--text-primary) !important;
}
body.capacitor-client.atlas-light-theme .btn-glass-tiny:hover {
  background: rgba(0, 0, 0, 0.09) !important;
  color: var(--text-primary) !important;
}

/* 3 — Rapporter AI: förinställda rapportknappar + åtgärdsknappar */
body.capacitor-client.atlas-light-theme .report-preset-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}
body.capacitor-client.atlas-light-theme .report-preset-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(0, 0, 0, 0.18) !important;
}
body.capacitor-client.atlas-light-theme .report-action-btn {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}

/* 4 — Kunskapsimport: fyndskort — återproklamera state-vänster-border */
body.capacitor-client.atlas-light-theme .ki-section-card {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}
body.capacitor-client.atlas-light-theme .ki-section-card.ki-sc--new {
  background: rgba(74, 222, 128, 0.12) !important;
  border-left-color: rgba(74, 222, 128, 0.65) !important;
}
body.capacitor-client.atlas-light-theme .ki-section-card.ki-sc--similar {
  background: rgba(251, 191, 36, 0.12) !important;
  border-left-color: rgba(251, 191, 36, 0.6) !important;
}
body.capacitor-client.atlas-light-theme .ki-section-card.ki-sc--uncertain {
  background: rgba(239, 68, 68, 0.1) !important;
  border-left-color: rgba(239, 68, 68, 0.45) !important;
}

/* ================================================================
MOBILFIX 25 — PERSONAL + KONTOR KORT I LJUSA TEMAN
admin-mini-card har rgba(255,255,255,0.03) bakgrund — osynlig på
ljusgrå/ljusgrön yta. Varje kort färgläggs subtilt med sin
--agent-color (satt inline per kort). gap-card- exkluderas
(hanteras av MOBILFIX 17).
Katalog-flik: heading inner border-left "skär av" inuti MOBILFIX 23-
kortets ram — statusfärg flyttas till grupp-kortets vänstra kant
via CSS :has() (Chrome 105+, modern Android).
================================================================ */

/* Personal + Kontor mini-kort */
body.capacitor-client.atlas-light-theme #view-admin .admin-mini-card:not([id^="gap-card-"]) {
  background: color-mix(in srgb, var(--agent-color, var(--accent-primary)) 10%, var(--bg-dark-secondary)) !important;
  border: 1px solid color-mix(in srgb, var(--agent-color, var(--accent-primary)) 22%, var(--border-color)) !important;
}
body.capacitor-client.atlas-light-theme #view-admin .admin-mini-card:not([id^="gap-card-"]):hover {
  background: color-mix(in srgb, var(--agent-color, var(--accent-primary)) 18%, var(--bg-dark-secondary)) !important;
}
body.capacitor-client.atlas-light-theme #view-admin .admin-mini-card.active:not([id^="gap-card-"]) {
  background: color-mix(in srgb, var(--agent-color, var(--accent-primary)) 26%, var(--bg-dark-secondary)) !important;
  border-color: color-mix(in srgb, var(--agent-color, var(--accent-primary)) 45%, var(--border-color)) !important;
}

/* Tjänstekatalog: ta bort heading inner border-left (klipps av inuti kortet) */
body.capacitor-client.atlas-light-theme .catalog-vehicle-heading.is-active,
body.capacitor-client.atlas-light-theme .catalog-vehicle-heading.is-inactive {
  border-left: none !important;
  padding-left: 0 !important;
}
/* Statusfärg på grupp-kortets vänstra kant i stället */
body.capacitor-client.atlas-light-theme .catalog-vehicle-group:has(.catalog-vehicle-heading.is-active) {
  border-left: 3px solid rgba(52, 199, 89, 0.7) !important;
}
body.capacitor-client.atlas-light-theme .catalog-vehicle-group:has(.catalog-vehicle-heading.is-inactive) {
  border-left: 3px solid rgba(255, 59, 48, 0.6) !important;
}

/* Katalogtjänster ska läsa som neutrala kort inuti grön fordonsgrupp. */
body.capacitor-client.atlas-light-theme #view-admin .catalog-vehicle-group .catalog-list-card {
  background: rgba(248, 250, 249, 0.92) !important;
  border-color: rgba(34, 52, 45, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}
body.capacitor-client.atlas-light-theme #view-admin .catalog-vehicle-group .catalog-list-card.active {
  background: rgba(244, 248, 246, 0.96) !important;
  border-color: color-mix(in srgb, var(--accent-primary) 42%, rgba(34, 52, 45, 0.14)) !important;
}

/* ================================================================
MOBILFIX 26 — GUIDE-KORT I LJUSA TEMAN (Tjänster & Paket-flik)
catalog-guide-card har rgba(255,255,255,0.08) border + 0.025 bg —
båda osynliga på ljusgrå/ljusgrön yta. Mer synlig kant + bakgrund.
================================================================ */
body.capacitor-client.atlas-light-theme .catalog-guide-card {
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
}
body.capacitor-client.atlas-light-theme .catalog-guide-card p {
  opacity: 0.75 !important;
}
body.capacitor-client.atlas-light-theme .catalog-active-vehicles-panel {
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
}
body.capacitor-client.atlas-light-theme .catalog-active-vehicles-grid .catalog-active-vehicle-card.is-active {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.075)) !important;
  border-color: rgba(34, 197, 94, 0.42) !important;
}
body.capacitor-client.atlas-light-theme .catalog-active-vehicles-grid .catalog-active-vehicle-card.is-inactive {
  background: rgba(239, 68, 68, 0.045) !important;
  border-color: rgba(239, 68, 68, 0.18) !important;
}

/* ================================================================
MOBILFIX 27 — SKAPA AGENT/KONTOR FORMULÄR MOBILANPASSNING
Outer 2-kol-grids spiller utanför viewporten på mobil.
Klassen admin-create-outer-grid sätts i admin-forms.js på de yttre
grid-wrapparna. Overflow-x döljs på containern så inget horisontellt
scroll möjliggörs.
× öppettider-knappar: synlig cirkel-border i ljusa teman döljs.
================================================================ */
body.capacitor-client #admin-detail-content .admin-create-outer-grid {
  grid-template-columns: 1fr !important;
}
body.capacitor-client.atlas-light-theme .admin-time-del-btn,
body.capacitor-client.atlas-light-theme .price-delete-btn,
body.capacitor-client.atlas-light-theme .hours-remove-btn {
  background: transparent !important;
  border: none !important;
}
body.capacitor-client.atlas-light-theme .no-price-row {
  background: rgba(0, 0, 0, 0.04) !important;
}

/* ================================================================
MOBILFIX 30 — PERSONAL/AGENT-FORMULÄR
IRL 2026-06-14:
- avatargriden hade fem 1fr-kolumner men fasta 36px-ikoner, vilket gav
  stor dödyta mellan ikonerna
- kontorslistan hade egen scroll inuti detaljvyn och skapade döda touchytor
- vybehörighet och footer behövde tajtare, mer temabunden formkänsla
================================================================ */
body.capacitor-client #admin-detail-content .new-agent-form-shell {
  overflow: hidden !important;
}

body.capacitor-client #admin-detail-content .new-agent-form-body {
  padding: 16px 24px 12px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain;
}

body.capacitor-client #admin-detail-content .new-agent-main-grid {
  gap: 14px !important;
  margin-bottom: 16px !important;
}

body.capacitor-client #admin-detail-content .new-agent-lower-grid {
  gap: 14px !important;
}

body.capacitor-client #admin-detail-content .new-agent-fields-panel {
  gap: 12px !important;
}

body.capacitor-client #admin-detail-content .new-agent-profile-controls {
  gap: 14px !important;
  margin-bottom: 0 !important;
}

body.capacitor-client #admin-detail-content #new-agent-avatar-preview-big {
  height: 58px !important;
  width: 58px !important;
}

body.capacitor-client #admin-detail-content .new-agent-avatar-panel {
  margin-top: -2px !important;
}

body.capacitor-client #admin-detail-content #new-agent-avatar-grid {
  grid-template-columns: repeat(5, 40px) !important;
  justify-content: center !important;
  column-gap: 24px !important;
  row-gap: 10px !important;
}

body.capacitor-client #admin-detail-content #new-agent-avatar-grid .new-agent-avatar-opt {
  height: 40px !important;
  width: 40px !important;
}

body.capacitor-client #admin-detail-content .new-agent-office-list {
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
  gap: 6px !important;
}

body.capacitor-client #admin-detail-content .new-agent-office-label {
  min-height: 34px !important;
  padding: 7px 10px !important;
}

body.capacitor-client #admin-detail-content .new-agent-view-panel {
  padding: 12px !important;
  border-radius: 13px !important;
}

body.capacitor-client #admin-detail-content .new-agent-view-panel .na-view-pill {
  font-size: 11px !important;
  line-height: 1.1 !important;
  min-height: 0 !important;
  padding: 6px 10px !important;
}

body.capacitor-client #view-admin #na-form-footer {
  min-height: 58px !important;
  padding: 8px 20px calc(8px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px))) !important;
}

/* ================================================================
MOBILFIX 28 — MAILMALLAR + ADMINFORMULÄR
IRL 2026-06-13:
- ny mailmall måste öppna samma single-panel editor som befintlig mall
- Quill-toolbar i Mailmallar/Kundchatt-svar ska hålla en rad
- admin-configkort var för höga och RAG-beskrivningar doldes på mobil
- ljusa teman behövde tydligare kortkontrast i Tjänster & Paket
================================================================ */

body.capacitor-client #view-templates #template-header-row {
  grid-template-columns: minmax(0, 1fr) minmax(126px, 0.58fr) !important;
  gap: 8px !important;
  padding: 10px 12px 8px !important;
}

body.capacitor-client #view-templates #template-title-input,
body.capacitor-client #view-templates #template-group-input,
body.capacitor-client #ctpl-title,
body.capacitor-client #ctpl-subgroup {
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--bg-dark-secondary) 92%, var(--accent-primary) 8%) !important;
  border: 1px solid color-mix(in srgb, var(--border-color) 82%, var(--accent-primary) 18%) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

body.capacitor-client.atlas-light-theme #view-templates #template-title-input,
body.capacitor-client.atlas-light-theme #view-templates #template-group-input,
body.capacitor-client.atlas-light-theme #ctpl-title,
body.capacitor-client.atlas-light-theme #ctpl-subgroup {
  background: color-mix(in srgb, var(--bg-dark-secondary) 86%, #ffffff 14%) !important;
  border-color: color-mix(in srgb, var(--border-color) 86%, var(--accent-primary) 14%) !important;
}

body.capacitor-client #view-templates #template-editor-form .ql-toolbar.ql-snow,
body.capacitor-client #ctpl-editor .ql-toolbar.ql-snow {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 1px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding: 4px 5px !important;
  min-height: 34px !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

body.capacitor-client #view-templates #template-editor-form .ql-toolbar.ql-snow::-webkit-scrollbar,
body.capacitor-client #ctpl-editor .ql-toolbar.ql-snow::-webkit-scrollbar {
  display: none !important;
}

body.capacitor-client #view-templates #template-editor-form .ql-toolbar.ql-snow .ql-formats,
body.capacitor-client #ctpl-editor .ql-toolbar.ql-snow .ql-formats {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  gap: 1px !important;
  margin-right: 1px !important;
}

body.capacitor-client #view-templates #template-editor-form .ql-toolbar.ql-snow button,
body.capacitor-client #ctpl-editor .ql-toolbar.ql-snow button {
  width: 23px !important;
  height: 23px !important;
  padding: 2px !important;
}

body.capacitor-client #view-templates #template-editor-form .ql-toolbar.ql-snow .ql-picker,
body.capacitor-client #ctpl-editor .ql-toolbar.ql-snow .ql-picker {
  position: relative !important;
  height: 24px !important;
  line-height: 24px !important;
}

body.capacitor-client #view-admin .ql-toolbar.ql-snow .ql-picker.ql-icon-picker,
body.capacitor-client #view-admin .ql-toolbar.ql-snow .ql-picker.ql-color-picker {
  background: transparent !important;
  border: 0 !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.capacitor-client #view-templates #template-editor-form .ql-toolbar.ql-snow .ql-picker-label,
body.capacitor-client #ctpl-editor .ql-toolbar.ql-snow .ql-picker-label {
  height: 24px !important;
  min-height: 0 !important;
  padding: 0 13px 0 4px !important;
}

body.capacitor-client #view-admin .ql-toolbar.ql-snow .ql-picker.ql-icon-picker .ql-picker-label,
body.capacitor-client #view-admin .ql-toolbar.ql-snow .ql-picker.ql-color-picker .ql-picker-label {
  width: 100% !important;
  height: 24px !important;
  min-height: 0 !important;
  padding: 2px 4px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.capacitor-client #view-templates #template-editor-form .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options,
body.capacitor-client #ctpl-editor .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 90 !important;
  max-height: 180px !important;
  overflow-y: auto !important;
  background: var(--bg-frosty-content) !important;
  border: 1px solid color-mix(in srgb, var(--border-color) 72%, var(--accent-primary) 28%) !important;
  border-radius: 8px !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28) !important;
}

body.capacitor-client #view-templates #template-editor-form .ql-toolbar.ql-snow .ql-picker.ql-align.ql-expanded .ql-picker-options,
body.capacitor-client #ctpl-editor .ql-toolbar.ql-snow .ql-picker.ql-align.ql-expanded .ql-picker-options {
  width: 42px !important;
  min-width: 42px !important;
}

body.capacitor-client #view-templates #template-editor-form .ql-toolbar.ql-snow .ql-picker.ql-color.ql-expanded .ql-picker-options,
body.capacitor-client #ctpl-editor .ql-toolbar.ql-snow .ql-picker.ql-color.ql-expanded .ql-picker-options {
  width: 152px !important;
  max-width: 152px !important;
}

body.capacitor-client #ctpl-editor,
body.capacitor-client #ctpl-quill,
body.capacitor-client #view-templates #quill-editor {
  overflow: visible !important;
}

body.capacitor-client #view-admin .admin-config-row:not([style*="display:grid"]) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 8px 10px !important;
  padding: 12px 14px !important;
  margin-bottom: 10px !important;
  border-radius: 10px !important;
}

body.capacitor-client #view-admin .admin-config-row:not([style*="display:grid"]) > label {
  grid-column: 1 / -1 !important;
  width: auto !important;
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

body.capacitor-client #view-admin .admin-config-row:not([style*="display:grid"]) > .admin-config-field,
body.capacitor-client #view-admin .admin-config-row:not([style*="display:grid"]) > input.admin-config-field,
body.capacitor-client #view-admin .admin-config-row:not([style*="display:grid"]) > select.admin-config-field,
body.capacitor-client #view-admin .admin-config-row:not([style*="display:grid"]) > span[id^="writeonly-mask-"] {
  grid-column: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

body.capacitor-client #view-admin .admin-config-row:not([style*="display:grid"]) > .admin-lock-btn {
  grid-column: 2 !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 12px !important;
  justify-self: end !important;
}

body.capacitor-client #view-admin .admin-config-row:not([style*="display:grid"]) > .admin-save-icon-btn,
body.capacitor-client #view-admin .admin-config-row:not([style*="display:grid"]) > .config-save-btn {
  grid-column: 3 !important;
  width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
}

body.capacitor-client #view-admin .admin-config-row:not([style*="display:grid"]) > div {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
}

body.capacitor-client #view-admin .admin-config-row:not([style*="display:grid"]) > div > .admin-lock-btn {
  margin-left: auto !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 12px !important;
}

body.capacitor-client #view-admin .admin-config-row:not([style*="display:grid"]) + p {
  margin: -4px 0 12px 0 !important;
  line-height: 1.42 !important;
}

body.capacitor-client #view-admin .admin-config-row[style*="minmax(170px"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto auto !important;
  gap: 7px 10px !important;
  padding: 12px 14px !important;
  margin-bottom: 10px !important;
  border-radius: 10px !important;
}

body.capacitor-client #view-admin .admin-config-row[style*="minmax(170px"] > label {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}

body.capacitor-client #view-admin .admin-config-row[style*="minmax(170px"] > div {
  display: block !important;
  grid-column: 1 / -1 !important;
  margin: -2px 0 2px 0 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  opacity: 0.72 !important;
}

body.capacitor-client #view-admin .admin-config-row[style*="minmax(170px"] > input.admin-config-field {
  grid-column: 1 !important;
  width: 100% !important;
  max-width: none !important;
  height: 38px !important;
  min-height: 38px !important;
}

body.capacitor-client #view-admin .admin-config-row[style*="minmax(170px"] > .admin-lock-btn {
  grid-column: 2 !important;
  justify-self: end !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 12px !important;
}

body.capacitor-client #view-admin .admin-config-row[style*="minmax(170px"] > .admin-save-icon-btn {
  grid-column: 3 !important;
  width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
}

body.capacitor-client #view-admin .admin-config-row[style*="minmax(170px"] > button[id^="rag-reset-"] {
  grid-column: 4 !important;
  height: 38px !important;
  min-height: 38px !important;
}

body.capacitor-client #view-admin .catalog-guide-grid {
  grid-template-columns: 1fr !important;
  gap: 9px !important;
}

body.capacitor-client .catalog-guide-card {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 3px 10px !important;
  padding: 12px 13px !important;
  background: color-mix(in srgb, var(--accent-primary) 7%, var(--bg-dark-secondary)) !important;
  border-color: color-mix(in srgb, var(--accent-primary) 25%, var(--border-color)) !important;
}

body.capacitor-client .catalog-guide-card strong {
  grid-column: 2 !important;
  margin: 0 !important;
}

body.capacitor-client .catalog-guide-card p {
  grid-column: 2 !important;
  opacity: 0.82 !important;
}

body.capacitor-client .catalog-guide-card::before {
  content: attr(data-step);
  grid-row: 1 / span 2;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent-primary) 16%, transparent);
  color: var(--accent-primary);
  font-weight: 800;
  font-size: 12px;
}

body.capacitor-client .catalog-guide-card:nth-child(1)::before { content: "1"; }
body.capacitor-client .catalog-guide-card:nth-child(2)::before { content: "2"; }
body.capacitor-client .catalog-guide-card:nth-child(3)::before { content: "3"; }

body.capacitor-client.atlas-light-theme .catalog-guide-card,
body.capacitor-client.atlas-light-theme .catalog-active-vehicles-panel,
body.capacitor-client.atlas-light-theme #ctpl-editor {
  background: color-mix(in srgb, var(--accent-primary) 8%, #ffffff 72%) !important;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 26%, rgba(0, 0, 0, 0.16)) !important;
}

/* ================================================================
MOBILFIX 29 — TJÄNSTEKATALOG FORMULÄR I LJUSA TEMAN
IRL 2026-06-14:
- Nordic Dawn: svag sektionskontrast i Tjänster & Paket
- Spara/avbryt hamnade under rubriktexten i stället för uppe till höger
- katalogens select-fält ärvde mörk admin-select trots ljust tema
================================================================ */

body.capacitor-client.atlas-light-theme #view-admin .catalog-main-panel,
body.capacitor-client.atlas-light-theme #view-admin .catalog-chain-panel,
body.capacitor-client.atlas-light-theme #view-admin .catalog-components-panel,
body.capacitor-client.atlas-light-theme #view-admin .catalog-kb-section-panel,
body.capacitor-client.atlas-light-theme #view-admin .catalog-new-service-guide {
  background: color-mix(in srgb, var(--accent-primary) 9%, #ffffff 74%) !important;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 30%, rgba(0, 0, 0, 0.16)) !important;
  border-left: 3px solid color-mix(in srgb, var(--accent-primary) 72%, transparent) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 66%, transparent) !important;
}

body.capacitor-client.atlas-light-theme #view-admin .catalog-new-service-guide li {
  background: color-mix(in srgb, var(--accent-primary) 5%, #ffffff 80%) !important;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 20%, rgba(0, 0, 0, 0.13)) !important;
}

body.capacitor-client.atlas-light-theme #view-admin .catalog-new-service-guide .catalog-section-heading h4 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

body.capacitor-client.atlas-light-theme #view-admin .catalog-new-service-guide .catalog-title-help {
  margin-left: 0 !important;
}

body.capacitor-client.atlas-light-theme #view-admin .catalog-main-panel > .catalog-section-heading {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 8px 12px !important;
  margin-bottom: 14px !important;
}

body.capacitor-client.atlas-light-theme #view-admin .catalog-main-panel > .catalog-section-heading > div:first-child {
  min-width: 0 !important;
}

body.capacitor-client.atlas-light-theme #view-admin .catalog-main-panel .catalog-heading-actions,
body.capacitor-client.atlas-light-theme #view-admin .catalog-main-panel .catalog-form-actions {
  justify-self: end !important;
  align-self: start !important;
  margin-left: auto !important;
}

body.capacitor-client.atlas-light-theme #view-admin .catalog-main-panel .catalog-form-actions > .btn-glass-icon {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
}

body.capacitor-client.atlas-light-theme #view-admin #admin-detail-content .catalog-main-panel input.filter-input,
body.capacitor-client.atlas-light-theme #view-admin #admin-detail-content .catalog-main-panel textarea.filter-input,
body.capacitor-client.atlas-light-theme #view-admin #admin-detail-content .catalog-main-panel select.filter-input,
body.capacitor-client.atlas-light-theme #view-admin #admin-detail-content .catalog-main-panel #catalog-vehicle,
body.capacitor-client.atlas-light-theme #view-admin #admin-detail-content .catalog-main-panel #catalog-type {
  background: color-mix(in srgb, var(--accent-primary) 5%, #ffffff 86%) !important;
  border-color: color-mix(in srgb, var(--accent-primary) 24%, rgba(0, 0, 0, 0.18)) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

/* ================================================================
MOBILFIX 32 — SNABBFRÅGOR I KUNDCHATT & KUNSKAP
Raderna behöver tydlig separation i ljusa teman, men mobilvyn får inte bli
bredare än skärmen när testknappar och låsikoner visas.
================================================================ */

body.capacitor-client #view-admin .qq-admin-panel {
  gap: 12px !important;
}

body.capacitor-client #view-admin .qq-topbar {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  padding: 13px !important;
}

body.capacitor-client #view-admin .qq-status-actions {
  justify-content: space-between !important;
  width: 100% !important;
}

body.capacitor-client #view-admin .qq-title-block p {
  font-size: 12px !important;
  line-height: 1.42 !important;
}

body.capacitor-client #view-admin .qq-control-row {
  gap: 7px !important;
}

body.capacitor-client #view-admin .qq-toolbar-actions {
  gap: 8px !important;
}

body.capacitor-client #view-admin .qq-count-btn {
  height: 36px !important;
  min-width: 42px !important;
  border-radius: 10px !important;
}

body.capacitor-client #view-admin .qq-add-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 44px !important;
  gap: 8px !important;
}

body.capacitor-client #view-admin .qq-add-input {
  height: 44px !important;
  border-radius: 11px !important;
  font-size: 12.5px !important;
}

body.capacitor-client #view-admin .qq-add-row .qq-icon-btn,
body.capacitor-client #view-admin .qq-toolbar-actions .qq-icon-btn,
body.capacitor-client #view-admin .qq-save-btn {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 11px !important;
}

body.capacitor-client #view-admin .qq-test-panel {
  grid-template-columns: 1fr !important;
  gap: 9px !important;
  padding: 13px !important;
}

body.capacitor-client #view-admin .qq-test-heading {
  align-items: flex-start !important;
  flex-direction: column !important;
  gap: 2px !important;
}

body.capacitor-client #view-admin .qq-test-panel textarea,
body.capacitor-client #view-admin .qq-test-actions,
body.capacitor-client #view-admin .qq-test-result {
  grid-column: 1 !important;
}

body.capacitor-client #view-admin .qq-test-panel textarea {
  min-height: 74px !important;
  font-size: 13px !important;
}

body.capacitor-client #view-admin .qq-test-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

body.capacitor-client #view-admin .qq-test-actions .btn-glass-small {
  min-height: 38px !important;
  white-space: normal !important;
}

body.capacitor-client #view-admin .qq-list {
  gap: 8px !important;
}

body.capacitor-client #view-admin .qq-row {
  grid-template-columns: 24px minmax(0, 1fr) 34px 30px 26px !important;
  gap: 5px !important;
  min-height: 54px !important;
  padding: 9px 8px !important;
  border-radius: 11px !important;
}

body.capacitor-client #view-admin .qq-row-index {
  font-size: 11px !important;
}

body.capacitor-client #view-admin .qq-row-text {
  font-size: 13px !important;
  line-height: 1.32 !important;
}

body.capacitor-client #view-admin .qq-test-row-btn {
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 10px !important;
}

body.capacitor-client #view-admin .qq-test-row-btn span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.capacitor-client #view-admin .qq-row-action {
  width: 30px !important;
  height: 34px !important;
  border-radius: 10px !important;
}

/* Mobile ticket-reader focus mode: when a ticket is open, spend vertical space
   on the conversation instead of the old section/filter rectangle. */
body.capacitor-client #view-inbox.mobile-detail-open .template-list-container,
body.capacitor-client #view-my-tickets.mobile-detail-open .template-list-container,
body.capacitor-client #view-archive.mobile-detail-open .template-list-container,
body.capacitor-client #view-archive.mobile-detail-open #archive-wide-header {
display: none !important;
}

body.capacitor-client #view-inbox.mobile-detail-open .template-editor-container,
body.capacitor-client #view-my-tickets.mobile-detail-open .template-editor-container,
body.capacitor-client #view-archive.mobile-detail-open .template-editor-container {
flex: 1 1 0 !important;
min-height: 0 !important;
height: auto !important;
}

/* Safety: toggle is only meaningful (and styled) inside the Capacitor app.
   Hide it on mobile web browsers so no giant unstyled chevron appears. */
.atlas-mobile-reply-toggle {
display: none !important;
}

body.capacitor-client .atlas-mobile-reply-footer {
position: relative;
flex-shrink: 0 !important;
transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

body.capacitor-client .atlas-mobile-reply-footer > .atlas-mobile-reply-toggle,
body.capacitor-client .atlas-mobile-reply-summary-row > .atlas-mobile-reply-toggle {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
width: calc(100% - 28px) !important;
min-height: 42px !important;
margin: 8px 14px !important;
padding: 0 14px !important;
border-radius: 14px !important;
border: 1px solid var(--border-color, rgba(255,255,255,0.18)) !important;
background: var(--bg-secondary, var(--bg-color, #1a1c2e)) !important;
color: var(--text-secondary, rgba(255,255,255,0.70)) !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
box-shadow: 0 5px 14px rgba(0,0,0,0.12) !important;
}
body.capacitor-client.atlas-light-theme .atlas-mobile-reply-footer > .atlas-mobile-reply-toggle,
body.capacitor-client.atlas-light-theme .atlas-mobile-reply-summary-row > .atlas-mobile-reply-toggle {
border: 1px solid var(--border-color, rgba(0,0,0,0.12)) !important;
background: var(--bg-secondary, var(--bg-color, #f0f0f5)) !important;
color: var(--text-secondary, rgba(0,0,0,0.60)) !important;
box-shadow: 0 5px 14px rgba(0,0,0,0.08) !important;
}

body.capacitor-client .atlas-mobile-reply-toggle-icon {
display: inline-flex !important;
width: 18px !important;
height: 18px !important;
align-items: center !important;
justify-content: center !important;
}

body.capacitor-client .atlas-mobile-reply-toggle-icon svg {
width: 18px !important;
height: 18px !important;
stroke: currentColor !important;
}

body.capacitor-client .atlas-mobile-reply-footer.atlas-mobile-reply-collapsed {
padding-bottom: 8px !important;
}

body.capacitor-client .atlas-mobile-reply-footer.atlas-mobile-reply-collapsed > :not(.atlas-mobile-reply-toggle):not(.atlas-mobile-reply-summary-row),
body.capacitor-client .atlas-mobile-reply-footer.atlas-mobile-reply-collapsed .atlas-mobile-reply-summary-row > :not(.atlas-mobile-reply-toggle) {
display: none !important;
}

body.capacitor-client .atlas-mobile-reply-footer.atlas-mobile-reply-expanded > .atlas-mobile-reply-toggle,
body.capacitor-client .atlas-mobile-reply-footer.atlas-mobile-reply-expanded .atlas-mobile-reply-summary-row > .atlas-mobile-reply-toggle {
min-height: 32px !important;
margin-bottom: 0 !important;
border-color: transparent !important;
background: transparent !important;
box-shadow: none !important;
opacity: 0.72;
}

body.capacitor-client .atlas-mobile-reply-footer.atlas-mobile-reply-expanded > .atlas-mobile-reply-toggle:hover,
body.capacitor-client .atlas-mobile-reply-footer.atlas-mobile-reply-expanded > .atlas-mobile-reply-toggle:focus-visible,
body.capacitor-client .atlas-mobile-reply-footer.atlas-mobile-reply-expanded .atlas-mobile-reply-summary-row > .atlas-mobile-reply-toggle:hover,
body.capacitor-client .atlas-mobile-reply-footer.atlas-mobile-reply-expanded .atlas-mobile-reply-summary-row > .atlas-mobile-reply-toggle:focus-visible {
opacity: 1;
}

/* Customer view mobile: keep the overview compact, and let an opened customer
   ticket spend the vertical space on the conversation instead of duplicated
   customer profile data. */
body.capacitor-client #view-customers.mobile-detail-open #customer-detail .detail-header-top {
padding: 10px 12px !important;
gap: 8px !important;
}

body.capacitor-client #view-customers.mobile-detail-open #customer-detail .detail-header-top > div:first-child {
display: grid !important;
grid-template-columns: 46px minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 9px !important;
width: 100% !important;
}

body.capacitor-client #view-customers.mobile-detail-open #customer-detail .customer-avatar-edit {
width: 42px !important;
height: 42px !important;
font-size: 17px !important;
}

body.capacitor-client #view-customers.mobile-detail-open #customer-detail .avatar-edit-pen {
transform: scale(0.88) !important;
transform-origin: bottom right !important;
}

body.capacitor-client #view-customers.mobile-detail-open #customer-header-display .detail-subject {
font-size: 16px !important;
line-height: 1.12 !important;
margin: 0 0 4px !important;
}

body.capacitor-client #view-customers.mobile-detail-open #customer-detail .header-pills-row {
display: flex !important;
gap: 5px !important;
max-height: 58px !important;
overflow: hidden !important;
}

body.capacitor-client #view-customers.mobile-detail-open #customer-detail .header-pills-row .pill {
font-size: 10.5px !important;
line-height: 1.05 !important;
max-width: 168px !important;
padding: 5px 8px !important;
}

body.capacitor-client #view-customers.mobile-detail-open #customer-detail .detail-header-top > div:first-child > div:last-child {
align-self: start !important;
gap: 3px !important;
}

body.capacitor-client #view-customers.mobile-detail-open #customer-detail .detail-header-top > div:first-child > div:last-child .btn-glass-icon {
height: 34px !important;
min-width: 34px !important;
width: 34px !important;
padding: 0 !important;
}

body.capacitor-client #view-customers.mobile-detail-open #customer-detail .cust-stat-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 6px !important;
padding: 8px 12px !important;
}

body.capacitor-client #view-customers.mobile-detail-open #customer-detail .cust-stat-grid .admin-stat-card {
min-height: 58px !important;
padding: 8px 6px !important;
}

body.capacitor-client #view-customers.mobile-detail-open #customer-detail .cust-stat-grid .admin-stat-card > div:first-child {
font-size: 21px !important;
}

body.capacitor-client #view-customers.mobile-detail-open #customer-detail .cust-stat-grid .admin-stat-card:nth-child(n+3) > div:last-child {
font-size: 10px !important;
line-height: 1.2 !important;
max-height: 2.4em !important;
overflow: hidden !important;
}

body.capacitor-client #view-customers.mobile-detail-open #customer-detail > .detail-container > div[style*="padding:14px 20px 0"] {
padding: 9px 12px 0 !important;
}

body.capacitor-client #view-customers.mobile-detail-open #customer-detail #customer-ticket-list-body {
padding: 10px 12px !important;
}

body.capacitor-client #customer-reader-modal:not([data-reader-state="floating"]):not([data-reader-state="minimized"]) .glass-modal-box {
border-radius: 12px 12px 0 0 !important;
}

body.capacitor-client #customer-reader-modal:not([data-reader-state="floating"]):not([data-reader-state="minimized"]) .glass-modal-box > div:first-child {
padding: 7px 10px !important;
}

body.capacitor-client #customer-reader-modal:not([data-reader-state="floating"]):not([data-reader-state="minimized"]) [data-reader-drag-handle="1"] {
gap: 8px !important;
}

body.capacitor-client #customer-reader-modal:not([data-reader-state="floating"]):not([data-reader-state="minimized"]) [data-reader-drag-handle="1"] > div:first-child {
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
border-radius: 8px !important;
font-size: 13px !important;
}

body.capacitor-client #customer-reader-modal:not([data-reader-state="floating"]):not([data-reader-state="minimized"]) [data-reader-drag-handle="1"] > div:nth-child(2) {
font-size: 13px !important;
}

body.capacitor-client #customer-reader-modal:not([data-reader-state="floating"]):not([data-reader-state="minimized"]) .glass-modal-box > div:first-child > div:nth-child(2) {
margin-top: 5px !important;
padding-left: 40px !important;
}

/* Admin > Personal mobile: reduce profile chrome and let agent ticket readers
   cover the duplicated agent profile header. */
body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail .detail-header-top {
padding: 8px 12px !important;
gap: 6px !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail .detail-header-top > div:first-child {
display: grid !important;
grid-template-columns: 46px minmax(0, 1fr) !important;
align-items: center !important;
gap: 9px !important;
width: 100% !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail .msg-avatar {
width: 44px !important;
height: 44px !important;
font-size: 18px !important;
border-width: 2px !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail .msg-avatar [style*="bottom:2px"] {
width: 11px !important;
height: 11px !important;
border-width: 1px !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail .detail-subject {
font-size: 16px !important;
line-height: 1.12 !important;
max-width: 100% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail .agent-mobile-counter-slot {
margin: 1px 0 0 !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail .agent-counter-pills {
gap: 5px !important;
justify-content: flex-start !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail .agent-counter-card {
gap: 0 !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail .agent-counter-card > div:not(:first-child) {
display: none !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail .agent-counter-pill {
font-size: 10px !important;
line-height: 1 !important;
padding: 4px 8px !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail .header-pills-row {
gap: 5px !important;
margin-top: 1px !important;
max-height: 38px !important;
overflow: hidden !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail .header-pills-row .pill {
font-size: 10px !important;
line-height: 1 !important;
padding: 5px 8px !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail .header-pills-row .footer-icon-btn,
body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail .header-pills-row .notes-trigger-btn,
body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail .header-pills-row input[type="color"] {
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
padding: 0 !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail #agent-detail-body {
gap: 12px !important;
padding: 12px !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail .agent-permission-section h4,
body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail #agent-detail-body h4 {
font-size: 9.5px !important;
margin-bottom: 6px !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail .glass-panel,
body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail #agent-ticket-list-panel {
padding: 10px !important;
border-radius: 10px !important;
}

body.capacitor-client #atlas-reader-modal[data-reader-source="admin-user-reader"]:not([data-reader-state="floating"]):not([data-reader-state="minimized"]) .glass-modal-box {
border-radius: 12px 12px 0 0 !important;
}

/* Admin > Kontor: compact service/booking controls in the app. */
body.capacitor-client #box-booking .office-booking-row {
gap: 6px !important;
}

body.capacitor-client #box-booking .office-booking-row > span:first-child {
width: 34px !important;
}

body.capacitor-client #box-prices .office-service-note-btn {
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
min-height: 18px !important;
margin-left: 0 !important;
}

body.capacitor-client #box-prices .office-service-note-editor {
padding: 9px !important;
border-radius: 10px !important;
}

body.capacitor-client #box-prices .office-service-note-textarea {
min-height: 76px !important;
font-size: 12px !important;
}

body.capacitor-client #view-admin #box-prices .price-row span[data-service-name] {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 55vw !important;
}

body.capacitor-client.atlas-light-theme #box-prices .price-delete-btn,
body.capacitor-client #box-prices .price-delete-btn {
background: rgba(255,69,58,0.10) !important;
border: 1px solid rgba(255,69,58,0.28) !important;
color: #ff453a !important;
}

/* Admin > Kontor mobile: same reader-focus treatment as Personal. */
body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail .detail-header-top {
padding: 8px 12px !important;
gap: 6px !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail .detail-header-top > div:first-child {
display: grid !important;
grid-template-columns: 46px minmax(0, 1fr) !important;
align-items: center !important;
gap: 9px !important;
width: 100% !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail #office-avatar-circle {
width: 44px !important;
height: 44px !important;
border-radius: 10px !important;
font-size: 18px !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail .detail-subject {
font-size: 16px !important;
line-height: 1.12 !important;
max-width: 100% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail .office-mobile-counter-slot {
gap: 5px !important;
margin: 1px 0 0 !important;
}

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

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail .office-mobile-counter-slot span {
font-size: 10px !important;
line-height: 1 !important;
padding: 4px 8px !important;
}

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

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail .header-pills-row {
gap: 5px !important;
max-height: 38px !important;
overflow: hidden !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail .header-pills-row .pill {
font-size: 10px !important;
line-height: 1 !important;
padding: 5px 8px !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail .header-pills-row .footer-icon-btn,
body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail .header-pills-row .notes-trigger-btn,
body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail .header-pills-row #prislista-trigger,
body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail .header-pills-row button,
body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail .header-pills-row input[type="color"] {
height: 30px !important;
min-height: 30px !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail #office-detail-body {
gap: 12px !important;
padding: 12px !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail #office-top-grid {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
align-items: stretch !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail #box-tickets,
body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail #box-agents {
min-height: 96px !important;
max-height: 230px !important;
padding: 10px !important;
border-radius: 10px !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail #box-tickets .scroll-list,
body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail #box-agents .scroll-list {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail #box-tickets h4,
body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail #box-agents h4 {
font-size: 9.5px !important;
margin-bottom: 8px !important;
}

body.capacitor-client #atlas-reader-modal[data-reader-source="admin-office-reader"]:not([data-reader-state="floating"]):not([data-reader-state="minimized"]) .glass-modal-box {
border-radius: 12px 12px 0 0 !important;
}

/* Reply editor: compact on mobile and mobile web; it still grows while typing. */
body.capacitor-client .reply-quill-wrap {
  min-height: 40px !important;
}

body.capacitor-client .reply-quill-wrap .ql-toolbar.ql-snow {
  padding: 2px 4px !important;
}

body.capacitor-client .reply-quill-wrap .ql-toolbar.ql-snow .ql-formats {
  margin-right: 3px !important;
}

body.capacitor-client .reply-quill-wrap .ql-toolbar.ql-snow button {
  width: 24px !important;
  height: 24px !important;
  padding: 2px !important;
}

body.capacitor-client .reply-quill-wrap .ql-toolbar.ql-snow .ql-picker {
  height: 24px !important;
  font-size: 12px !important;
}

body.capacitor-client .reply-quill-wrap .ql-toolbar.ql-snow .ql-picker-label {
  padding: 2px 18px 2px 4px !important;
}

body.capacitor-client .reply-quill-wrap .ql-container.ql-snow .ql-editor {
  min-height: 22px !important;
  padding: 4px 8px !important;
}

@media (max-width: 768px) {
  .reply-quill-wrap {
    min-height: 40px !important;
  }

  .reply-quill-wrap .ql-toolbar.ql-snow {
    padding: 2px 4px !important;
  }

  .reply-quill-wrap .ql-toolbar.ql-snow .ql-formats {
    margin-right: 3px !important;
  }

  .reply-quill-wrap .ql-toolbar.ql-snow button {
    width: 24px !important;
    height: 24px !important;
    padding: 2px !important;
  }

  .reply-quill-wrap .ql-toolbar.ql-snow .ql-picker {
    height: 24px !important;
    font-size: 12px !important;
  }

  .reply-quill-wrap .ql-toolbar.ql-snow .ql-picker-label {
    padding: 2px 18px 2px 4px !important;
  }

  .reply-quill-wrap .ql-container.ql-snow .ql-editor {
    min-height: 22px !important;
    padding: 4px 8px !important;
  }
}

body.capacitor-client .atlas-mobile-reply-footer.atlas-mobile-reply-collapsed > .atlas-mobile-reply-toggle {
  min-height: 34px !important;
  margin: 5px 12px !important;
}

body.capacitor-client .atlas-mobile-reply-summary-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

body.capacitor-client .atlas-mobile-reply-footer.atlas-mobile-reply-collapsed > .atlas-mobile-reply-summary-row {
  padding: 5px 12px 8px !important;
}

body.capacitor-client .atlas-mobile-reply-footer.atlas-mobile-reply-collapsed .atlas-mobile-reply-summary-row > .atlas-mobile-reply-toggle {
  width: 100% !important;
  min-height: 34px !important;
  margin: 0 !important;
}

body.capacitor-client .atlas-mobile-reply-footer.atlas-mobile-reply-expanded > .atlas-mobile-reply-summary-row {
  padding: 4px 12px 0 !important;
}

body.capacitor-client .atlas-mobile-reply-footer.atlas-mobile-reply-expanded .atlas-mobile-reply-summary-row > .atlas-mobile-reply-toggle {
  width: auto !important;
  min-width: 88px !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

body.capacitor-client .atlas-mobile-reply-footer.atlas-mobile-reply-expanded .atlas-mobile-reply-summary-row > .mobile-detail-footer-pills {
  flex: 1 1 auto !important;
  padding: 0 !important;
}

body.capacitor-client .atlas-mobile-reply-footer.atlas-mobile-reply-expanded > .atlas-mobile-reply-toggle {
  min-height: 30px !important;
  margin-top: 4px !important;
  margin-bottom: 0 !important;
  padding: 0 10px !important;
}

body.capacitor-client .atlas-mobile-reply-footer.atlas-mobile-reply-expanded > div[style*="padding:8px 16px 10px"],
body.capacitor-client .atlas-mobile-reply-footer.atlas-mobile-reply-expanded > form > div[style*="padding:8px 16px 10px"],
body.capacitor-client .atlas-mobile-reply-footer.atlas-mobile-reply-expanded > div[style*="padding:10px 14px 10px"] {
  padding: 5px 12px 8px !important;
}

body.capacitor-client .atlas-mobile-reply-footer.atlas-mobile-reply-expanded > div[style*="font-size:11px"] {
  padding: 5px 12px 0 !important;
}

/* Ticket detail: floating prev/next nav arrows on mobile side edges. */
.atlas-ticket-detail-side-nav {
  display: none;
}

@media (max-width: 768px) {
  #view-inbox.mobile-detail-open .detail-container,
  #view-my-tickets.mobile-detail-open .detail-container,
  #view-archive.mobile-detail-open .detail-container {
    position: relative !important;
  }

  #view-inbox.mobile-detail-open .atlas-ticket-detail-side-nav,
  #view-my-tickets.mobile-detail-open .atlas-ticket-detail-side-nav,
  #view-archive.mobile-detail-open .atlas-ticket-detail-side-nav {
    display: block !important;
  }
}

body.capacitor-client #view-inbox.mobile-detail-open .detail-container,
body.capacitor-client #view-my-tickets.mobile-detail-open .detail-container,
body.capacitor-client #view-archive.mobile-detail-open .detail-container {
  position: relative !important;
}

body.capacitor-client #view-inbox.mobile-detail-open .atlas-ticket-detail-side-nav,
body.capacitor-client #view-my-tickets.mobile-detail-open .atlas-ticket-detail-side-nav,
body.capacitor-client #view-archive.mobile-detail-open .atlas-ticket-detail-side-nav {
  display: block !important;
}

body.capacitor-client #atlas-reader-modal .atlas-ticket-detail-side-nav,
body.capacitor-client #customer-reader-modal .atlas-ticket-detail-side-nav {
  display: block !important;
}

body.capacitor-client #atlas-reader-modal .glass-modal-box,
body.capacitor-client #customer-reader-modal .glass-modal-box {
  position: relative !important;
}

body.capacitor-client #atlas-reader-modal #reader-prev,
body.capacitor-client #atlas-reader-modal #reader-next,
body.capacitor-client #atlas-reader-modal .reader-position-counter,
body.capacitor-client #customer-reader-modal #cust-reader-prev,
body.capacitor-client #customer-reader-modal #cust-reader-next,
body.capacitor-client #customer-reader-modal .reader-position-counter {
  display: none !important;
}

.atlas-ticket-detail-nav-btn {
  position: absolute;
  top: 50%;
  z-index: 7;
  pointer-events: auto;
  width: 40px;
  min-width: 40px;
  height: 58px;
  min-height: 40px;
  transform: translateY(-50%);
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(9, 12, 18, 0.34);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 7px 18px rgba(0,0,0,0.20);
  user-select: none;
  -webkit-user-select: none;
}

.atlas-ticket-detail-nav-prev {
  left: 0;
  border-left: 0;
  border-radius: 0 10px 10px 0;
}

.atlas-ticket-detail-nav-next {
  right: 0;
  border-right: 0;
  border-radius: 10px 0 0 10px;
}

.atlas-ticket-detail-nav-btn:active {
  background: rgba(9, 12, 18, 0.52) !important;
}

.atlas-ticket-detail-nav-btn.is-disabled {
  opacity: 0;
  pointer-events: none;
}

.atlas-ticket-detail-nav-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.atlas-ticket-detail-nav-counter {
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  opacity: 0.68;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Ljusa teman: behåll sidpilen ljus/translucent så den inte blir en svart
   kloss i Mina ärenden/Admin/Kunder. */
body.atlas-light-theme .atlas-ticket-detail-nav-btn,
body.capacitor-client.atlas-light-theme .atlas-ticket-detail-nav-btn {
  background: rgba(255, 255, 255, 0.76) !important;
  color: var(--text-primary, rgba(28, 36, 48, 0.86)) !important;
  border-color: rgba(28, 36, 48, 0.14) !important;
  box-shadow: 0 5px 16px rgba(28, 36, 48, 0.16) !important;
}
body.atlas-light-theme .atlas-ticket-detail-nav-btn:active,
body.capacitor-client.atlas-light-theme .atlas-ticket-detail-nav-btn:active {
  background: rgba(255, 255, 255, 0.92) !important;
}