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

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 {
align-items: center !important;
gap: 1px !important;
padding: 3px 5px !important;
}

body.capacitor-client .composer-quill-wrap .ql-toolbar.ql-snow .ql-formats {
display: inline-flex !important;
align-items: center !important;
gap: 1px !important;
margin-right: 2px !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 via en separat media-query längst ned.
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;
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;
}

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

.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: 8px !important;
padding: 12px 16px !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: 11px !important;
font-size: 20px !important;
height: 52px !important;
width: 52px !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: 10px !important;
line-height: 1.1 !important;
min-height: 0 !important;
padding: 4px 8px !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: 6px !important;
}

body.capacitor-client #view-admin .admin-office-detail #office-id-pill {
max-width: 150px !important;
overflow: hidden !important;
text-overflow: ellipsis !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;
}

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

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

#view-about .about-cell {
border-radius: 12px !important;
gap: 10px !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
padding: 14px !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-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;
}

#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;
}

#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).
================================================================ */
@media screen and (min-width: 769px) {
#mobile-hamburger,
#mobile-back-btn,
#mobile-overlay {
display: none !important;
}
}

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

/* Widget-area: kompakt padding */
#home-widgets-area {
padding: 10px 10px 0 !important;
gap: 8px !important;
overflow-y: auto !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: hidden !important;
flex-shrink: 0 !important;
}
.chat-header h2 .header-title-icon {
width: 22px !important;
height: 22px !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 app-header + flikraden (header.chat-header slutar
   vid safe-area-top + ~127px innehåll) så Personal/Kontor/Systemkonfig + headern
   förblir synliga. Modalens färgade topplinje hamnar kant-i-kant med headerns
   nederkant och fyller hela vägen ner. App-only → desktop/mobilwebb opåverkat. */
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 har ett eget filterhuvud ovanför splitcontainern. I appen ska
   detaljen följa samma princip som övriga vyer: öppna under vyrektangeln. */
body.capacitor-client #view-archive.mobile-detail-open #archive-wide-header {
display: flex !important;
}

/* 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: 7px 10px 27px 10px !important;
min-height: 60px !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: 28px !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: behåll toppens premiumkort men låt dem bryta naturligt på telefon. */
body.capacitor-client #home-widgets-area > div:first-child {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
gap: 8px !important;
align-items: stretch !important;
}

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

body.capacitor-client #home-widgets-area > div:last-child {
/* column-reverse: i appen ska "Kontor du bevakar" ligga överst och "Att göra" underst.
   Endast visuell ordning (DOM oförändrad) + gated på capacitor-client → desktop opåverkat. */
flex-direction: column-reverse !important;
gap: 8px !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;
}

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

body.capacitor-client #hw-todo-card .hw-todo-item {
gap: 7px !important;
min-height: 36px !important;
padding: 6px 7px !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;
}

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-bell,
body.capacitor-client #hw-todo-card .hw-todo-check,
body.capacitor-client #hw-todo-card .hw-todo-del {
width: 30px !important;
height: 30px !important;
flex: 0 0 30px !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 #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;
}

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