/* ================================================================
mobile.css — Mobilanpassning för Atlas
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.
================================================================ */

/* --- Hamburger-knapp: visas endast 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: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
color: rgba(255, 255, 255, 0.82);
cursor: pointer;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
flex-shrink: 0;
}

/* --- Tillbaka-knapp: visas av JS när ett ärende är öppet --- */
#mobile-back-btn {
align-items: center;
justify-content: center;
position: fixed;
top: 10px;
left: 10px;
z-index: 9997;
width: 38px;
height: 38px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
color: rgba(255, 255, 255, 0.82);
cursor: pointer;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
flex-shrink: 0;
}

/* --- 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: 9999;
transform: translateX(-100%);
transition: transform 0.25s ease;
box-shadow: 6px 0 40px rgba(0, 0, 0, 0.65);
}

.sidebar.mobile-open {
transform: translateX(0) !important;
}

/* --- Halvtransparent overlay bakom öppen meny --- */
#mobile-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.52);
z-index: 9998;
backdrop-filter: blur(1px);
-webkit-backdrop-filter: blur(1px);
}

/* !important krävs för att vinna mot inline style="display:none" */
#mobile-overlay.active {
display: block !important;
}

/* --- Dölj ej-mobilvänliga nav-items --- */
.sidebar .menu-item[data-view="inbox"],
.sidebar .menu-item[data-view="archive"],
.sidebar .menu-item[data-view="customers"],
.sidebar .menu-item[data-view="templates"] {
display: none !important;
}

/* --- App-container: ta bort flex-kolumnen med sidebar --- */
.app-container {
display: block !important;
}

/* --- Alla vyer: full skärmbredd och full höjd --- */
.app-container > main {
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: 56px !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;
}

#view-admin .header-tabs {
flex: 0 0 100% !important;
overflow-x: auto !important;
border-top: 1px solid rgba(255, 255, 255, 0.07);
padding: 5px 10px 5px 10px !important;
display: flex !important;
flex-wrap: nowrap !important;
gap: 4px !important;
scrollbar-width: none;
}

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