/* DELAD UR mobile.css (KAN-388 CSS-2): rad 2099-2393, byte-exakt; home widgets and reader surfaces. Laddas direkt efter föregående del i index.html. */
/* ================================================================
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;
padding: 10px 12px !important;
}

/* Stats-kort: ta bort desktop-minhöjden och kompaktera sub-items */
.hw-stats-card {
min-height: 0 !important;
width: auto !important;
}

#hw-stats {
gap: 4px !important;
}

/* Widget-area: kompakt padding */
#home-widgets-area {
padding: 10px 10px 0 !important;
gap: 8px !important;
overflow-y: auto !important;
}

/* Rad 1 (web-mobil, ej app): konvertera till 2-kolumns grid.
   Privat-kortet tar full bredd; välkomst + statistik sida vid sida.
   body.capacitor-client har en identisk regel med högre specificitet. */
body:not(.capacitor-client) #home-widgets-area > div:first-child {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
align-items: stretch !important;
}

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

/* Rad 2 gap */
body:not(.capacitor-client) #home-widgets-area > div:last-child {
gap: 8px !important;
flex-wrap: wrap !important;
align-items: flex-start !important;
}

body:not(.capacitor-client) #home-widgets-area > div:last-child #hw-offices-card {
flex: 1 1 100% !important;
width: 100% !important;
max-width: none !important;
order: 1 !important;
}

body:not(.capacitor-client) #home-widgets-area > div:last-child #hw-todo-card {
flex: 1 1 100% !important;
width: 100% !important;
max-width: none !important;
order: 2 !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: visible !important;
flex-shrink: 0 !important;
padding: 0 !important;
}
/* Ikon-brickan (bakgrund/border/skugga ärvs från style-admin.css) finjusteras
   för mobil — något mindre tile men samma integrerade look som desktop. */
.chat-header h2 .header-title-icon {
width: 20px !important;
height: 20px !important;
padding: 7px !important;
border-radius: 10px !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 den gemensamma Admin-flikraden. Själva
   Personal-/Kontor-detailheadern täcks av läsaren, precis som detaljvyerna
   i Inkorgen/Mina ärenden/Garaget. */
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;
}