/* DELAD UR mobile.css (KAN-388 CSS-2): rad 2394-2881, byte-exakt; capacitor app compact layout and mobile chrome. Laddas direkt efter föregående del i index.html. */
/* ================================================================
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: var(--text-badge-min-size) !important;
}

body.capacitor-client .team-ticket-card .ticket-tag,
body.capacitor-client .archive-card .ticket-tag {
font-size: var(--text-badge-min-size) !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;
grid-auto-rows: max-content !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 #atlas-onboarding-summary-card {
grid-column: 1 / -1 !important;
order: 1 !important;
}

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

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

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

body.capacitor-client #hw-todo-card {
grid-column: 1 / -1 !important;
order: 5 !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 #home-widgets-area #hw-todo-card {
min-height: max-content !important;
height: max-content !important;
align-self: start !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-head-action-btn.is-icon-only {
width: 36px !important;
padding: 0 !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: var(--text-badge-min-size) !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-y: auto !important;
overflow-x: hidden !important;
touch-action: pan-y !important;
-webkit-overflow-scrolling: touch !important;
/* #78 F5: scoped exception from style-tickets.css master contain so the
   office detail page can keep scrolling when these short lists cannot. */
overscroll-behavior: 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;
}