/* DELAD UR mobile.css (KAN-388 CSS-2): rad 1063-1631, byte-exakt; admin templates and mobile admin template editing. Laddas direkt efter föregående del i index.html. */
/* ================================================================
MOBILFIX 31 — PERSONALDETALJ, KONSERVATIV PILL-POLISH
Behåller originalflödet men gör statuspills läsbarare och komprimerar
kontorsgrupperna så fem grupper får plats utan att bli kort/grid.
================================================================ */
body.capacitor-client #view-admin .admin-user-detail .agent-mobile-counter-slot span {
background: color-mix(in srgb, var(--bg-dark-secondary) 86%, var(--accent-primary) 7%) !important;
border-color: color-mix(in srgb, var(--border-color) 70%, var(--accent-primary) 18%) !important;
color: color-mix(in srgb, var(--text-primary) 78%, var(--text-secondary) 22%) !important;
font-weight: 700 !important;
opacity: 1 !important;
}

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

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

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

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

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

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

body.capacitor-client #view-admin .admin-user-detail .agent-office-count {
font-size: var(--text-badge-min-size) !important;
margin-left: 1px !important;
opacity: var(--text-help-opacity) !important;
}

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

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

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

body.capacitor-client #view-admin .admin-user-detail .agent-view-subtitle {
font-size: var(--text-badge-min-size) !important;
margin-bottom: 5px !important;
opacity: var(--text-help-opacity) !important;
}

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

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

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

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

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

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

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

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

#view-admin .template-list-container,
#view-admin #admin-main-list {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex: 1 !important;
max-height: none !important;
height: auto !important;
overflow-y: auto !important;
border-right: none !important;
box-sizing: border-box;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#view-templates .template-list-container {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex: 1 !important;
max-height: none !important;
height: auto !important;
overflow-y: auto !important;
border-right: none !important;
border-bottom: none !important;
box-sizing: border-box;
--panel-bleed: 10px;
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: "🚗"; }
/* K4/F6: i Standard listar #filter-vehicle KATEGORIER, inte fordon
   (archive-view.js:1282, index.html-forken "ALLA KATEGORIER") — bilikonen var
   ett kvarvarande trafikskole-uttryck. Klassen sätts pre-paint av
   applyEditionStaticLabels(); Box1–3 saknar den och behåller 🚗. */
html.atlas-edition-standard 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;
}