/* DELAD UR mobile.css (KAN-388 CSS-2): rad 1632-2098, byte-exakt; about view, modals and mobile reader shells. Laddas direkt efter föregående del i index.html. */
/* ================================================================
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: var(--text-badge-min-size) !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), och den ska ta HELA raden.
   Patriks IRL 2026-08-28: "senaste om vyn ändringar har centrerat dessa lite fult.
   borde kunna ta hela raden?"

   🔴 Mätt rotorsak. Den gamla regeln här pekade på en INLINE-stil
   (`div[style*="grid-template-columns"]`). Markupen bär numera klassen
   `.about-stats-grid` (`admin-audit.js:348`), så selektorn matchade `0` element —
   mätt live på Box1 i `412px` bredd.
   Dessutom ligger BÅDA reglerna som ger ytan sin layout inne i
   `@media (min-width: 769px)` (`style-admin.css:1911` och `#about-stats-content`).
   På mobil fick griden alltså ingen gridlayout alls: `grid-template-columns: none`,
   `display` från förälderns flexflöde, bredd `171px` av tillgängliga `354px`, centrerad
   av förälderns `justify-content: center`. Det var de smala centrerade korten.

   Radhöjderna från desktop (`repeat(6, clamp(...))`) ska INTE gälla här — på mobil är
   det tolv kort i en kolumn, inte två kolumner som måste linjera. */
#view-about #about-stats-content {
justify-content: stretch !important;
}

#view-about .about-stats-grid {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: none !important;
grid-auto-rows: auto !important;
grid-auto-flow: row !important;
gap: 8px !important;
width: 100% !important;
flex: 1 1 100% !important;
}

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

/* Standard använder den fjärde raden för global ärendesökning även i webb.
   Trafik behåller den tidigare mobilytan utan tangentbordscellen. */
html.atlas-edition-standard #view-about .about-cell:first-child {
display: flex !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;
}