/* DELAD UR mobile.css (KAN-388 CSS-2): rad 3399-3970, byte-exakt; admin forms, panels and mobile detail layouts. Laddas direkt efter föregående del i index.html. */
/* ================================================================
MOBILFIX 28 — MAILMALLAR + ADMINFORMULÄR
IRL 2026-06-13:
- ny mailmall måste öppna samma single-panel editor som befintlig mall
- Quill-toolbar i Mailmallar/Kundchatt-svar ska hålla en rad
- admin-configkort var för höga och RAG-beskrivningar doldes på mobil
- ljusa teman behövde tydligare kortkontrast i Tjänster & Paket
================================================================ */

body.capacitor-client #view-templates #template-header-row {
  grid-template-columns: minmax(0, 1fr) minmax(126px, 0.58fr) !important;
  gap: 8px !important;
  padding: 10px 12px 8px !important;
}

body.capacitor-client #view-templates #template-title-input,
body.capacitor-client #view-templates #template-group-input,
body.capacitor-client #ctpl-title,
body.capacitor-client #ctpl-subgroup {
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--bg-dark-secondary) 92%, var(--accent-primary) 8%) !important;
  border: 1px solid color-mix(in srgb, var(--border-color) 82%, var(--accent-primary) 18%) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

body.capacitor-client.atlas-light-theme #view-templates #template-title-input,
body.capacitor-client.atlas-light-theme #view-templates #template-group-input,
body.capacitor-client.atlas-light-theme #ctpl-title,
body.capacitor-client.atlas-light-theme #ctpl-subgroup {
  background: color-mix(in srgb, var(--bg-dark-secondary) 86%, #ffffff 14%) !important;
  border-color: color-mix(in srgb, var(--border-color) 86%, var(--accent-primary) 14%) !important;
}

body.capacitor-client #view-templates #template-editor-form .ql-toolbar.ql-snow,
body.capacitor-client #ctpl-editor .ql-toolbar.ql-snow {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 1px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding: 4px 5px !important;
  min-height: 34px !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

body.capacitor-client #view-templates #template-editor-form .ql-toolbar.ql-snow::-webkit-scrollbar,
body.capacitor-client #ctpl-editor .ql-toolbar.ql-snow::-webkit-scrollbar {
  display: none !important;
}

body.capacitor-client #view-templates #template-editor-form .ql-toolbar.ql-snow .ql-formats,
body.capacitor-client #ctpl-editor .ql-toolbar.ql-snow .ql-formats {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  gap: 1px !important;
  margin-right: 1px !important;
}

body.capacitor-client #view-templates #template-editor-form .ql-toolbar.ql-snow button,
body.capacitor-client #ctpl-editor .ql-toolbar.ql-snow button {
  width: 23px !important;
  height: 23px !important;
  padding: 2px !important;
}

body.capacitor-client #view-templates #template-editor-form .ql-toolbar.ql-snow .ql-picker,
body.capacitor-client #ctpl-editor .ql-toolbar.ql-snow .ql-picker {
  position: relative !important;
  height: 24px !important;
  line-height: 24px !important;
}

body.capacitor-client #view-admin .ql-toolbar.ql-snow .ql-picker.ql-icon-picker,
body.capacitor-client #view-admin .ql-toolbar.ql-snow .ql-picker.ql-color-picker {
  background: transparent !important;
  border: 0 !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.capacitor-client #view-templates #template-editor-form .ql-toolbar.ql-snow .ql-picker-label,
body.capacitor-client #ctpl-editor .ql-toolbar.ql-snow .ql-picker-label {
  height: 24px !important;
  min-height: 0 !important;
  padding: 0 13px 0 4px !important;
}

body.capacitor-client #view-admin .ql-toolbar.ql-snow .ql-picker.ql-icon-picker .ql-picker-label,
body.capacitor-client #view-admin .ql-toolbar.ql-snow .ql-picker.ql-color-picker .ql-picker-label {
  width: 100% !important;
  height: 24px !important;
  min-height: 0 !important;
  padding: 2px 4px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.capacitor-client #view-templates #template-editor-form .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options,
body.capacitor-client #ctpl-editor .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 90 !important;
  max-height: 180px !important;
  overflow-y: auto !important;
  background: var(--bg-frosty-content) !important;
  border: 1px solid color-mix(in srgb, var(--border-color) 72%, var(--accent-primary) 28%) !important;
  border-radius: 8px !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28) !important;
}

body.capacitor-client #view-templates #template-editor-form .ql-toolbar.ql-snow .ql-picker.ql-align.ql-expanded .ql-picker-options,
body.capacitor-client #ctpl-editor .ql-toolbar.ql-snow .ql-picker.ql-align.ql-expanded .ql-picker-options {
  width: 42px !important;
  min-width: 42px !important;
}

body.capacitor-client #view-templates #template-editor-form .ql-toolbar.ql-snow .ql-picker.ql-color.ql-expanded .ql-picker-options,
body.capacitor-client #ctpl-editor .ql-toolbar.ql-snow .ql-picker.ql-color.ql-expanded .ql-picker-options {
  width: 152px !important;
  max-width: 152px !important;
}

body.capacitor-client #ctpl-editor,
body.capacitor-client #ctpl-quill,
body.capacitor-client #view-templates #quill-editor {
  overflow: visible !important;
}

/* Mobilwebb: samma kompakta Quill-rad som Capacitor, utan att ändra
   Capacitor-selektorernas beräknade utseende. */
body:not(.capacitor-client) #view-templates #template-editor-form .ql-toolbar.ql-snow {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 1px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding: 4px 5px !important;
  min-height: 34px !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

body:not(.capacitor-client) #view-templates #template-editor-form .ql-toolbar.ql-snow::-webkit-scrollbar {
  display: none !important;
}

body:not(.capacitor-client) #view-templates #template-editor-form .ql-toolbar.ql-snow .ql-formats {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  gap: 1px !important;
  margin-right: 1px !important;
}

body:not(.capacitor-client) #view-templates #template-editor-form .ql-toolbar.ql-snow button {
  width: 23px !important;
  height: 23px !important;
  padding: 2px !important;
}

body:not(.capacitor-client) #view-templates #template-editor-form .ql-toolbar.ql-snow .ql-picker {
  position: relative !important;
  height: 24px !important;
  line-height: 24px !important;
}

body:not(.capacitor-client) #view-templates #template-editor-form .ql-toolbar.ql-snow .ql-picker-label {
  height: 24px !important;
  min-height: 0 !important;
  padding: 0 13px 0 4px !important;
}

body:not(.capacitor-client) #view-templates #template-editor-form .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 90 !important;
  max-height: 180px !important;
  overflow-y: auto !important;
  background: var(--bg-frosty-content) !important;
  border: 1px solid color-mix(in srgb, var(--border-color) 72%, var(--accent-primary) 28%) !important;
  border-radius: 8px !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28) !important;
}

body:not(.capacitor-client) #view-templates #template-editor-form .ql-toolbar.ql-snow .ql-picker.ql-align.ql-expanded .ql-picker-options {
  width: 42px !important;
  min-width: 42px !important;
}

body:not(.capacitor-client) #view-templates #template-editor-form .ql-toolbar.ql-snow .ql-picker.ql-color.ql-expanded .ql-picker-options {
  width: 152px !important;
  max-width: 152px !important;
}

body:not(.capacitor-client) #view-templates #quill-editor {
  overflow: visible !important;
}

#view-admin .admin-config-row:not([style*="display:grid"]) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto auto !important;
  align-items: center !important;
  gap: 8px 10px !important;
  padding: 12px 14px !important;
  margin-bottom: 10px !important;
  border-radius: 10px !important;
}

#view-admin .admin-config-row:not([style*="display:grid"]) > label {
  grid-column: 1 / -1 !important;
  width: auto !important;
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

#view-admin .admin-config-row:not([style*="display:grid"]) > .admin-config-field,
#view-admin .admin-config-row:not([style*="display:grid"]) > input.admin-config-field,
#view-admin .admin-config-row:not([style*="display:grid"]) > select.admin-config-field,
#view-admin .admin-config-row:not([style*="display:grid"]) > span[id^="writeonly-mask-"] {
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* KAN-147: input och mask delar cell men visar olika lägen. KAN-145:s
   display:flex !important gjorde annars båda synliga trots inline-display:none. */
#view-admin .admin-config-row:not([style*="display:grid"]) > input.admin-config-field[style*="display: none"],
#view-admin .admin-config-row:not([style*="display:grid"]) > input.admin-config-field[style*="display:none"],
#view-admin .admin-config-row:not([style*="display:grid"]) > span[id^="writeonly-mask-"][style*="display: none"],
#view-admin .admin-config-row:not([style*="display:grid"]) > span[id^="writeonly-mask-"][style*="display:none"] {
  display: none !important;
}

#view-admin .admin-config-row:not([style*="display:grid"]) > .admin-config-test-btn {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

#view-admin .admin-config-row:not([style*="display:grid"]) > .admin-lock-btn {
  grid-column: 2 !important;
  grid-row: 2 !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 12px !important;
  justify-self: end !important;
}

#view-admin .admin-config-row:not([style*="display:grid"]):has(> .admin-config-test-btn) > .admin-lock-btn {
  grid-column: 3 !important;
}

#view-admin .admin-config-row:not([style*="display:grid"]) > .admin-cancel-icon-btn {
  grid-column: 3 !important;
  grid-row: 2 !important;
}

#view-admin .admin-config-row:not([style*="display:grid"]) > .admin-save-icon-btn,
#view-admin .admin-config-row:not([style*="display:grid"]) > .config-save-btn {
  grid-column: 4 !important;
  grid-row: 2 !important;
  width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
}

#view-admin .admin-config-row:not([style*="display:grid"]):not(:has(> .admin-config-test-btn)):not(:has(> .admin-cancel-icon-btn)) > .admin-save-icon-btn,
#view-admin .admin-config-row:not([style*="display:grid"]):not(:has(> .admin-config-test-btn)):not(:has(> .admin-cancel-icon-btn)) > .config-save-btn {
  grid-column: 3 !important;
}

/* Checkboxrader har inget synligt textfält. Etikett, pill och åtgärder ryms på
   samma rad; låsta och upplåsta lägen använder samma explicita celler. */
#view-admin .admin-config-row:not([style*="display:grid"]):has(> .admin-config-checkbox-pill) {
  grid-template-columns: minmax(0, 1fr) auto auto auto auto !important;
}

#view-admin .admin-config-row:not([style*="display:grid"]):has(> .admin-config-checkbox-pill) > label {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

#view-admin .admin-config-row:not([style*="display:grid"]) > .admin-config-checkbox-pill {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

#view-admin .admin-config-row:not([style*="display:grid"]):has(> .admin-config-checkbox-pill) > .admin-lock-btn {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

#view-admin .admin-config-row:not([style*="display:grid"]):has(> .admin-config-checkbox-pill) > .admin-cancel-icon-btn {
  grid-column: 4 !important;
  grid-row: 1 !important;
}

#view-admin .admin-config-row:not([style*="display:grid"]):has(> .admin-config-checkbox-pill) > .admin-save-icon-btn {
  grid-column: 5 !important;
  grid-row: 1 !important;
}

#view-admin .admin-config-row:not([style*="display:grid"]) > div {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
}

/* Ett rent PÅ/AV-omslag är en kontroll, inte förklaringstext. Rader som också
   bär .admin-effective-reason behåller den avsiktliga tvåradslayouten. */
#view-admin .admin-config-row:not([style*="display:grid"]):has(> div .status-pill):not(:has(> div .admin-effective-reason)) > label {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

#view-admin .admin-config-row:not([style*="display:grid"]):has(> div .status-pill):not(:has(> div .admin-effective-reason)) > div {
  grid-column: 2 / -1 !important;
  grid-row: 1 !important;
  width: auto !important;
  justify-self: end !important;
}

#view-admin .admin-config-row:not([style*="display:grid"]) > div > .admin-lock-btn {
  margin-left: auto !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 12px !important;
}

#view-admin .admin-config-row:not([style*="display:grid"]) + p {
  margin: -4px 0 12px 0 !important;
  line-height: 1.42 !important;
}

/* KAN-145 följdfix (Claude, oberoende verifiering 2026-08-22).
   Reglerna ovan breddades från `body.capacitor-client` till att gälla hela mobilen.
   `display: grid !important` vinner då även över webbläsarens egen regel som döljer
   innehållet i ett hopfällt <details>, så raderna renderades utanför sin sektion och
   ovanpå omgivande text.

   Mätt på E-postkonfiguration, 390px: <details> "Inkommande konto skiljer sig?" var
   stängd med boxen t=1910-1950 men läckte `row-IMAP_USER` (t=1939) och `row-IMAP_PASS`
   (t=2036); <details> "Avancerat: Brevo-fallback" var stängd med boxen t=2022-2062 men
   läckte `row-EMAIL_USER` (t=2108) och `row-EMAIL_PASS` (t=2205). Följden blev fyra
   nya OVERLAP-fynd där maskerade lösenordsfält lades ovanpå grannsektionens etiketter.

   Spärren återställer webbläsarens beteende utan att röra öppna sektioner. */
#view-admin details:not([open]) .admin-config-row:not([style*="display:grid"]) {
  display: none !important;
}

/* KAN-145: öppettidsraden ska hålla label, båda tiderna och statuspillret på
   en rad även vid 390px. Pillret behåller sin 74px tryckyta; tidsfälten delar
   i stället på det flexibla utrymmet. */
#view-admin [id^="chat-hours-row-"] {
  display: grid !important;
  grid-template-columns: minmax(52px, 1fr) minmax(0, 1fr) 6px minmax(0, 1fr) 74px;
  gap: 6px !important;
}

#view-admin [id^="chat-hours-row-"] > input[type="time"] {
  width: 100% !important;
  min-width: 0 !important;
}

#view-admin [id^="chat-hours-row-"] > div {
  min-width: 74px;
  margin-left: 0 !important;
  justify-self: end;
}

body.capacitor-client #view-admin .admin-config-row[style*="minmax(170px"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto auto !important;
  gap: 7px 10px !important;
  padding: 12px 14px !important;
  margin-bottom: 10px !important;
  border-radius: 10px !important;
}

body.capacitor-client #view-admin .admin-config-row[style*="minmax(170px"] > label {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}

body.capacitor-client #view-admin .admin-config-row[style*="minmax(170px"] > div {
  display: block !important;
  grid-column: 1 / -1 !important;
  margin: -2px 0 2px 0 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  opacity: 0.72 !important;
}

body.capacitor-client #view-admin .admin-config-row[style*="minmax(170px"] > input.admin-config-field {
  grid-column: 1 !important;
  width: 100% !important;
  max-width: none !important;
  height: 38px !important;
  min-height: 38px !important;
}

body.capacitor-client #view-admin .admin-config-row[style*="minmax(170px"] > .admin-lock-btn {
  grid-column: 2 !important;
  justify-self: end !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 12px !important;
}

body.capacitor-client #view-admin .admin-config-row[style*="minmax(170px"] > .admin-save-icon-btn {
  grid-column: 3 !important;
  width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
}

body.capacitor-client #view-admin .admin-config-row[style*="minmax(170px"] > button[id^="rag-reset-"] {
  grid-column: 4 !important;
  height: 38px !important;
  min-height: 38px !important;
}

body.capacitor-client #view-admin .catalog-guide-grid {
  grid-template-columns: 1fr !important;
  gap: 9px !important;
}

body.capacitor-client .catalog-guide-card {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 3px 10px !important;
  padding: 12px 13px !important;
  background: color-mix(in srgb, var(--accent-primary) 7%, var(--bg-dark-secondary)) !important;
  border-color: color-mix(in srgb, var(--accent-primary) 25%, var(--border-color)) !important;
}

body.capacitor-client .catalog-guide-card strong {
  grid-column: 2 !important;
  margin: 0 !important;
}

body.capacitor-client .catalog-guide-card p {
  grid-column: 2 !important;
  opacity: 0.82 !important;
}

body.capacitor-client .catalog-guide-card::before {
  content: attr(data-step);
  grid-row: 1 / span 2;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent-primary) 16%, transparent);
  color: var(--accent-primary);
  font-weight: 800;
  font-size: 12px;
}

body.capacitor-client .catalog-guide-card:nth-child(1)::before { content: "1"; }
body.capacitor-client .catalog-guide-card:nth-child(2)::before { content: "2"; }
body.capacitor-client .catalog-guide-card:nth-child(3)::before { content: "3"; }

body.capacitor-client.atlas-light-theme .catalog-guide-card,
body.capacitor-client.atlas-light-theme .catalog-active-vehicles-panel,
body.capacitor-client.atlas-light-theme #ctpl-editor {
  background: color-mix(in srgb, var(--accent-primary) 8%, #ffffff 72%) !important;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 26%, rgba(0, 0, 0, 0.16)) !important;
}

/* ================================================================
MOBILFIX 29 — TJÄNSTEKATALOG FORMULÄR I LJUSA TEMAN
IRL 2026-06-14:
- Nordic Dawn: svag sektionskontrast i Tjänster & Paket
- Spara/avbryt hamnade under rubriktexten i stället för uppe till höger
- katalogens select-fält ärvde mörk admin-select trots ljust tema
================================================================ */

body.capacitor-client.atlas-light-theme #view-admin .catalog-main-panel,
body.capacitor-client.atlas-light-theme #view-admin .catalog-chain-panel,
body.capacitor-client.atlas-light-theme #view-admin .catalog-components-panel,
body.capacitor-client.atlas-light-theme #view-admin .catalog-kb-section-panel,
body.capacitor-client.atlas-light-theme #view-admin .catalog-new-service-guide {
  background: color-mix(in srgb, var(--accent-primary) 9%, #ffffff 74%) !important;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 30%, rgba(0, 0, 0, 0.16)) !important;
  border-left: 3px solid color-mix(in srgb, var(--accent-primary) 72%, transparent) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 66%, transparent) !important;
}

body.capacitor-client.atlas-light-theme #view-admin .catalog-new-service-guide li {
  background: color-mix(in srgb, var(--accent-primary) 5%, #ffffff 80%) !important;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 20%, rgba(0, 0, 0, 0.13)) !important;
}

body.capacitor-client.atlas-light-theme #view-admin .catalog-new-service-guide .catalog-section-heading h4 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

body.capacitor-client.atlas-light-theme #view-admin .catalog-new-service-guide .catalog-title-help {
  margin-left: 0 !important;
}

body.capacitor-client.atlas-light-theme #view-admin .catalog-main-panel > .catalog-section-heading {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 8px 12px !important;
  margin-bottom: 14px !important;
}

body.capacitor-client.atlas-light-theme #view-admin .catalog-main-panel > .catalog-section-heading > div:first-child {
  min-width: 0 !important;
}

body.capacitor-client.atlas-light-theme #view-admin .catalog-main-panel .catalog-heading-actions,
body.capacitor-client.atlas-light-theme #view-admin .catalog-main-panel .catalog-form-actions {
  justify-self: end !important;
  align-self: start !important;
  margin-left: auto !important;
}

body.capacitor-client.atlas-light-theme #view-admin .catalog-main-panel .catalog-form-actions > .btn-glass-icon {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
}

body.capacitor-client.atlas-light-theme #view-admin #admin-detail-content .catalog-main-panel input.filter-input,
body.capacitor-client.atlas-light-theme #view-admin #admin-detail-content .catalog-main-panel textarea.filter-input,
body.capacitor-client.atlas-light-theme #view-admin #admin-detail-content .catalog-main-panel select.filter-input,
body.capacitor-client.atlas-light-theme #view-admin #admin-detail-content .catalog-main-panel #catalog-vehicle,
body.capacitor-client.atlas-light-theme #view-admin #admin-detail-content .catalog-main-panel #catalog-type {
  background: color-mix(in srgb, var(--accent-primary) 5%, #ffffff 86%) !important;
  border-color: color-mix(in srgb, var(--accent-primary) 24%, rgba(0, 0, 0, 0.18)) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}