/* DELAD UR mobile.css (KAN-388 CSS-2): rad 4131-4611, byte-exakt; ticket cards, archive cards and reader navigation. Laddas direkt efter föregående del i index.html. */
/* Mobile ticket-reader focus mode: when a ticket is open, spend vertical space
   on the conversation instead of the old section/filter rectangle. */
body.capacitor-client #view-inbox.mobile-detail-open .template-list-container,
body.capacitor-client #view-my-tickets.mobile-detail-open .template-list-container,
body.capacitor-client #view-archive.mobile-detail-open .template-list-container,
body.capacitor-client #view-archive.mobile-detail-open #archive-wide-header {
display: none !important;
}

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 {
flex: 1 1 0 !important;
min-height: 0 !important;
height: auto !important;
}

/* Safety: toggle is only meaningful (and styled) inside the Capacitor app.
   Hide it on mobile web browsers so no giant unstyled chevron appears. */
.atlas-mobile-reply-toggle {
display: none !important;
}

body.capacitor-client .atlas-mobile-reply-footer {
position: relative;
flex-shrink: 0 !important;
transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

body.capacitor-client .atlas-mobile-reply-footer > .atlas-mobile-reply-toggle,
body.capacitor-client .atlas-mobile-reply-summary-row > .atlas-mobile-reply-toggle {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
width: calc(100% - 28px) !important;
min-height: 42px !important;
margin: 8px 14px !important;
padding: 0 14px !important;
border-radius: 14px !important;
border: 1px solid var(--border-color, rgba(255,255,255,0.18)) !important;
background: var(--bg-secondary, var(--bg-color, #1a1c2e)) !important;
color: var(--text-secondary, rgba(255,255,255,0.70)) !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
box-shadow: 0 5px 14px rgba(0,0,0,0.12) !important;
}
body.capacitor-client.atlas-light-theme .atlas-mobile-reply-footer > .atlas-mobile-reply-toggle,
body.capacitor-client.atlas-light-theme .atlas-mobile-reply-summary-row > .atlas-mobile-reply-toggle {
border: 1px solid var(--border-color, rgba(0,0,0,0.12)) !important;
background: var(--bg-secondary, var(--bg-color, #f0f0f5)) !important;
color: var(--text-secondary, rgba(0,0,0,0.60)) !important;
box-shadow: 0 5px 14px rgba(0,0,0,0.08) !important;
}

body.capacitor-client .atlas-mobile-reply-toggle-icon {
display: inline-flex !important;
width: 18px !important;
height: 18px !important;
align-items: center !important;
justify-content: center !important;
}

body.capacitor-client .atlas-mobile-reply-toggle-icon svg {
width: 18px !important;
height: 18px !important;
stroke: currentColor !important;
}

body.capacitor-client .atlas-mobile-reply-footer.atlas-mobile-reply-collapsed {
padding-bottom: 8px !important;
}

body.capacitor-client .atlas-mobile-reply-footer.atlas-mobile-reply-collapsed > :not(.atlas-mobile-reply-toggle):not(.atlas-mobile-reply-summary-row),
body.capacitor-client .atlas-mobile-reply-footer.atlas-mobile-reply-collapsed .atlas-mobile-reply-summary-row > :not(.atlas-mobile-reply-toggle) {
display: none !important;
}

body.capacitor-client .atlas-mobile-reply-footer.atlas-mobile-reply-expanded > .atlas-mobile-reply-toggle,
body.capacitor-client .atlas-mobile-reply-footer.atlas-mobile-reply-expanded .atlas-mobile-reply-summary-row > .atlas-mobile-reply-toggle {
min-height: 32px !important;
margin-bottom: 0 !important;
border-color: transparent !important;
background: transparent !important;
box-shadow: none !important;
opacity: 0.72;
}

body.capacitor-client .atlas-mobile-reply-footer.atlas-mobile-reply-expanded > .atlas-mobile-reply-toggle:hover,
body.capacitor-client .atlas-mobile-reply-footer.atlas-mobile-reply-expanded > .atlas-mobile-reply-toggle:focus-visible,
body.capacitor-client .atlas-mobile-reply-footer.atlas-mobile-reply-expanded .atlas-mobile-reply-summary-row > .atlas-mobile-reply-toggle:hover,
body.capacitor-client .atlas-mobile-reply-footer.atlas-mobile-reply-expanded .atlas-mobile-reply-summary-row > .atlas-mobile-reply-toggle:focus-visible {
opacity: 1;
}

/* Customer view mobile: keep the overview compact, and let an opened customer
   ticket spend the vertical space on the conversation instead of duplicated
   customer profile data. */
body.capacitor-client #view-customers.mobile-detail-open #customer-detail .detail-header-top {
padding: 10px 12px !important;
gap: 8px !important;
}

body.capacitor-client #view-customers.mobile-detail-open #customer-detail .detail-header-top > div:first-child {
display: grid !important;
grid-template-columns: 46px minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 9px !important;
width: 100% !important;
}

body.capacitor-client #view-customers.mobile-detail-open #customer-detail .customer-avatar-edit {
width: 42px !important;
height: 42px !important;
font-size: 17px !important;
}

body.capacitor-client #view-customers.mobile-detail-open #customer-detail .avatar-edit-pen {
transform: scale(0.88) !important;
transform-origin: bottom right !important;
}

body.capacitor-client #view-customers.mobile-detail-open #customer-header-display .detail-subject {
font-size: 16px !important;
line-height: 1.12 !important;
margin: 0 0 4px !important;
}

body.capacitor-client #view-customers.mobile-detail-open #customer-detail .header-pills-row {
display: flex !important;
gap: 5px !important;
max-height: 58px !important;
overflow: hidden !important;
}

body.capacitor-client #view-customers.mobile-detail-open #customer-detail .header-pills-row .pill {
font-size: 10.5px !important;
line-height: 1.05 !important;
max-width: 168px !important;
padding: 5px 8px !important;
}

body.capacitor-client #view-customers.mobile-detail-open #customer-detail .detail-header-top > div:first-child > div:last-child {
align-self: start !important;
gap: 3px !important;
}

body.capacitor-client #view-customers.mobile-detail-open #customer-detail .detail-header-top > div:first-child > div:last-child .btn-glass-icon {
height: 34px !important;
min-width: 34px !important;
width: 34px !important;
padding: 0 !important;
}

body.capacitor-client #view-customers.mobile-detail-open #customer-detail .cust-stat-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 6px !important;
padding: 8px 12px !important;
}

body.capacitor-client #view-customers.mobile-detail-open #customer-detail .cust-stat-grid .admin-stat-card {
min-height: 58px !important;
padding: 8px 6px !important;
}

body.capacitor-client #view-customers.mobile-detail-open #customer-detail .cust-stat-grid .admin-stat-card > div:first-child {
font-size: 21px !important;
}

body.capacitor-client #view-customers.mobile-detail-open #customer-detail .cust-stat-grid .admin-stat-card:nth-child(n+3) > div:last-child {
font-size: 10px !important;
line-height: 1.2 !important;
max-height: 2.4em !important;
overflow: hidden !important;
}

body.capacitor-client #view-customers.mobile-detail-open #customer-detail > .detail-container > div[style*="padding:14px 20px 0"] {
padding: 9px 12px 0 !important;
}

body.capacitor-client #view-customers.mobile-detail-open #customer-detail #customer-ticket-list-body {
padding: 10px 12px !important;
}

body.capacitor-client #customer-reader-modal:not([data-reader-state="floating"]):not([data-reader-state="minimized"]) .glass-modal-box {
border-radius: 12px 12px 0 0 !important;
}

body.capacitor-client #customer-reader-modal:not([data-reader-state="floating"]):not([data-reader-state="minimized"]) .glass-modal-box > div:first-child {
padding: 7px 10px !important;
}

body.capacitor-client #customer-reader-modal:not([data-reader-state="floating"]):not([data-reader-state="minimized"]) [data-reader-drag-handle="1"] {
gap: 8px !important;
}

body.capacitor-client #customer-reader-modal:not([data-reader-state="floating"]):not([data-reader-state="minimized"]) [data-reader-drag-handle="1"] > div:first-child {
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
border-radius: 8px !important;
font-size: 13px !important;
}

body.capacitor-client #customer-reader-modal:not([data-reader-state="floating"]):not([data-reader-state="minimized"]) [data-reader-drag-handle="1"] > div:nth-child(2) {
font-size: 13px !important;
}

body.capacitor-client #customer-reader-modal:not([data-reader-state="floating"]):not([data-reader-state="minimized"]) .glass-modal-box > div:first-child > div:nth-child(2) {
margin-top: 5px !important;
padding-left: 40px !important;
}

/* Admin > Personal mobile: reduce profile chrome and let agent ticket readers
   cover the duplicated agent profile header. */
body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail .detail-header-top {
padding: 8px 12px !important;
gap: 6px !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail .detail-header-top > div:first-child {
display: grid !important;
grid-template-columns: 46px minmax(0, 1fr) !important;
align-items: center !important;
gap: 9px !important;
width: 100% !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail .msg-avatar {
width: 44px !important;
height: 44px !important;
font-size: 18px !important;
border-width: 2px !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail .msg-avatar [style*="bottom:2px"] {
width: 11px !important;
height: 11px !important;
border-width: 1px !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail .detail-subject {
font-size: 16px !important;
line-height: 1.12 !important;
max-width: 100% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail .agent-mobile-counter-slot {
margin: 1px 0 0 !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail .agent-counter-pills {
gap: 5px !important;
justify-content: flex-start !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail .agent-counter-card {
gap: 0 !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail .agent-counter-card > div:not(:first-child) {
display: none !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail .agent-counter-pill {
font-size: 10px !important;
line-height: 1 !important;
padding: 4px 8px !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail .header-pills-row {
gap: 5px !important;
margin-top: 1px !important;
max-height: 38px !important;
overflow: hidden !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail .header-pills-row .pill {
font-size: 10px !important;
line-height: 1 !important;
padding: 5px 8px !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail .header-pills-row .footer-icon-btn,
body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail .header-pills-row .notes-trigger-btn,
body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail .header-pills-row input[type="color"] {
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
padding: 0 !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail #agent-detail-body {
gap: 12px !important;
padding: 12px !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail .agent-permission-section h4,
body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail #agent-detail-body h4 {
font-size: var(--text-badge-min-size) !important;
margin-bottom: 6px !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail .glass-panel,
body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-user-detail #agent-ticket-list-panel {
padding: 10px !important;
border-radius: 10px !important;
}

body.capacitor-client #atlas-reader-modal[data-reader-source="admin-user-reader"]:not([data-reader-state="floating"]):not([data-reader-state="minimized"]) .glass-modal-box {
border-radius: 12px 12px 0 0 !important;
}

/* Admin > Kontor: compact service/booking controls in the app. */
body.capacitor-client #box-booking .office-booking-row {
gap: 6px !important;
}

body.capacitor-client #box-booking .office-booking-row > span:first-child {
width: 34px !important;
}

body.capacitor-client #box-prices .office-service-note-btn {
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
min-height: 18px !important;
margin-left: 0 !important;
}

body.capacitor-client #box-prices .office-service-note-btn.has-note {
color: #fff !important;
border-color: var(--accent-primary) !important;
background: var(--accent-primary) !important;
box-shadow:
0 0 0 2px color-mix(in srgb, var(--accent-primary) 24%, transparent),
0 0 12px color-mix(in srgb, var(--accent-primary) 58%, transparent) !important;
}

body.capacitor-client #box-prices .office-service-note-editor {
padding: 9px !important;
border-radius: 10px !important;
}

body.capacitor-client #box-prices .office-service-note-textarea {
min-height: 76px !important;
font-size: 12px !important;
}

body.capacitor-client #view-admin #box-prices .price-row span[data-service-name] {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 55vw !important;
}

body.capacitor-client.atlas-light-theme #box-prices .price-delete-btn,
body.capacitor-client #box-prices .price-delete-btn {
background: rgba(255,69,58,0.10) !important;
border: 1px solid rgba(255,69,58,0.28) !important;
color: #ff453a !important;
}

/* Admin > Kontor mobile: same reader-focus treatment as Personal. */
body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail .detail-header-top {
padding: 8px 12px !important;
gap: 6px !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail .detail-header-top > div:first-child {
display: grid !important;
grid-template-columns: 46px minmax(0, 1fr) !important;
align-items: center !important;
gap: 9px !important;
width: 100% !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail #office-avatar-circle {
width: 44px !important;
height: 44px !important;
border-radius: 10px !important;
font-size: 18px !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail .detail-subject {
font-size: 16px !important;
line-height: 1.12 !important;
max-width: 100% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail .office-mobile-counter-slot {
gap: 5px !important;
margin: 1px 0 0 !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail .office-mobile-counter-slot > div {
gap: 0 !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail .office-mobile-counter-slot span {
font-size: 10px !important;
line-height: 1 !important;
padding: 4px 8px !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail .office-mobile-counter-slot span + div {
display: none !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail .header-pills-row {
gap: 5px !important;
max-height: 38px !important;
overflow: hidden !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail .header-pills-row .pill {
font-size: 10px !important;
line-height: 1 !important;
padding: 5px 8px !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail .header-pills-row .footer-icon-btn,
body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail .header-pills-row .notes-trigger-btn,
body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail .header-pills-row #prislista-trigger,
body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail .header-pills-row button,
body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail .header-pills-row input[type="color"] {
height: 30px !important;
min-height: 30px !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail #office-detail-body {
gap: 12px !important;
padding: 12px !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail #office-top-grid {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
align-items: stretch !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail #box-tickets,
body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail #box-agents {
min-height: 96px !important;
max-height: 230px !important;
padding: 10px !important;
border-radius: 10px !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail #box-tickets .scroll-list,
body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail #box-agents .scroll-list {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
/* #78 F5: keep inner list scrolling, but allow page chaining at list edges. */
overscroll-behavior: auto !important;
}

body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail #box-tickets h4,
body.capacitor-client #view-admin.mobile-detail-open #admin-detail-content .admin-office-detail #box-agents h4 {
font-size: var(--text-badge-min-size) !important;
margin-bottom: 8px !important;
}

body.capacitor-client #atlas-reader-modal[data-reader-source="admin-office-reader"]:not([data-reader-state="floating"]):not([data-reader-state="minimized"]) .glass-modal-box {
border-radius: 12px 12px 0 0 !important;
}