/* DELAD UR mobile.css (KAN-388 CSS-2): rad 2882-3398, byte-exakt; admin light theme overrides and mobile color surfaces. Laddas direkt efter föregående del i index.html. */
/* ================================================================
MOBILFIX 14 — ADMIN-KONFIG RADBRYTNING
Flex-rader (buildConfigRow): label på egen rad, input+knapp på rad 2.
Grid-rader (RAG, bokningslänkar) undantas via :not([style*="display:grid"])
så deras inline grid-template-columns och item-stilar inte skrivs över.
================================================================ */
body.capacitor-client .admin-config-row:not([style*="display:grid"]) {
  min-width: 0 !important;
  flex-wrap: wrap !important;
}
body.capacitor-client .admin-config-row:not([style*="display:grid"]) > label {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-bottom: 4px !important;
}
body.capacitor-client .admin-config-row:not([style*="display:grid"]) > .admin-config-field,
body.capacitor-client .admin-config-row:not([style*="display:grid"]) > select.admin-config-field,
body.capacitor-client .admin-config-row:not([style*="display:grid"]) > input.admin-config-field {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 60px !important;
}
body.capacitor-client .admin-config-row > span {
  display: block !important;
  width: 100% !important;
  margin-top: 6px !important;
  line-height: 1.4 !important;
}
body.capacitor-client .admin-config-row > div {
  min-width: 0 !important;
  flex-wrap: wrap !important;
}

/* ================================================================
MOBILFIX 15 — ADMIN-CONFIG-FIELD TEXT I ANDROID WEBVIEW
Android WebView ignorerar color på disabled inputs — webkit-text-fill-color krävs.
================================================================ */
body.capacitor-client .admin-config-field {
  -webkit-text-fill-color: var(--text-primary) !important;
  color: var(--text-primary) !important;
}
body.capacitor-client .admin-config-field:disabled {
  -webkit-text-fill-color: color-mix(in srgb, var(--text-primary) 55%, transparent) !important;
  opacity: 1 !important;
}

/* ================================================================
MOBILFIX 16 — ADMIN GRID-RADER PÅ MOBIL
6-kolumns RAG-rader och 4-kolumns bokningslänk/TS-URL-rader trillar
utanför mobilskärmen (~360 px). Konverteras till flex-wrap-layout:
  rad 1: label / titel (full bredd)
  rad 2: input + låsknapp sida vid sida
Hint-texten i RAG-rader döljs (info finns i tooltip på label).
================================================================ */

/* RAG-poängsättning: minmax(170px, 0.75fr) minmax(260px, 1.5fr) 120px auto auto auto */
body.capacitor-client .admin-config-row[style*="minmax(170px"] {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px 8px !important;
  margin-bottom: 12px !important;
}
body.capacitor-client .admin-config-row[style*="minmax(170px"] > label {
  flex: 0 0 100% !important;
  width: 100% !important;
  margin: 0 0 4px 0 !important;
  font-size: 12px !important;
}
body.capacitor-client .admin-config-row[style*="minmax(170px"] > div {
  display: none !important;
}
body.capacitor-client .admin-config-row[style*="minmax(170px"] > input.admin-config-field {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 80px !important;
  max-width: 140px !important;
}

/* Bokningslänkar + TS-URLs: en explicit två-radsgrid i appen.
   Den äldre flex-wrap-raden var implicit och mättes som 24 brutna rader;
   en enradig 220px-grid gjorde samtidigt URL-fältet oanvändbart smalt. */
body.capacitor-client .admin-config-row[style*="220px 1fr"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 5px 8px !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  margin-bottom: 6px !important;
}
body.capacitor-client .admin-config-row[style*="220px 1fr"] > div:first-child {
  grid-column: 1 / -1 !important;
  width: auto !important;
  min-width: 0 !important;
}
body.capacitor-client .admin-config-row[style*="220px 1fr"] > input.admin-config-field {
  grid-column: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
}
body.capacitor-client .admin-config-row[style*="220px 1fr"] > .admin-lock-btn {
  grid-column: 2 !important;
}
body.capacitor-client .admin-config-row[style*="220px 1fr"] > .admin-save-icon-btn {
  grid-column: 3 !important;
}

/* ================================================================
MOBILFIX 17 — KUNSKAPSLUCKOR-KORT I LJUSA TEMAN
Datum-texten (opacity:0.4) och RAG-badge (rgba-border) har för låg kontrast
mot den ljusgrå bakgrunden i Nordic Dawn / apple-light.
Scoped till .atlas-light-theme (sätts av changeTheme i modals.js).
================================================================ */
body.capacitor-client.atlas-light-theme .admin-mini-card[id^="gap-card-"] {
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

body.capacitor-client.atlas-light-theme .admin-mini-card[id^="gap-card-"] > div:first-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
  padding-bottom: 5px !important;
  margin-bottom: 3px !important;
}

body.capacitor-client.atlas-light-theme .admin-mini-card[id^="gap-card-"] > div:first-child > span[style*="opacity:0.4"],
body.capacitor-client.atlas-light-theme .admin-mini-card[id^="gap-card-"] > div:first-child > span[style*="opacity: 0.4"] {
  opacity: 0.65 !important;
  color: var(--text-primary) !important;
}

body.capacitor-client.atlas-light-theme .admin-mini-card[id^="gap-card-"] > div:first-child > span[style*="#636366"] {
  color: #374151 !important;
  background: rgba(0, 0, 0, 0.07) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

/* ================================================================
MOBILFIX 18 — KUNSKAPSBANK KB-SEKTIONER
.kw-pill-pills wrappas utan gap och sektionsgränser saknar separator.
================================================================ */
body.capacitor-client .admin-kb-keywords {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 8px !important;
}

body.capacitor-client .kw-pill {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

body.capacitor-client .admin-kb-section-card {
  border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08)) !important;
  padding-bottom: 10px !important;
  margin-bottom: 10px !important;
}

body.capacitor-client .admin-kb-title-field {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* MOBILFIX 19 — HEM TODO WORD-BREAK: se .hw-todo-text-regeln ovan (MF7-blocket). */

/* ================================================================
MOBILFIX 20 — KUNSKAPSIMPORT PANEL-HEADERS BLIR TOMMA GRÅ RUTOR
@media (max-width:768px) i style-admin.css ställer .ki-panel-header
i kolumn (rubrik ovanpå undertext) — på 448px mobilbredd blir den
gråblå gradient-bakgrunden då ~43px hög med mest tomt utrymme.
Behåll radlayouten (rubrik vänster, undertext höger) som på desktop.
================================================================ */
body.capacitor-client .ki-panel-header {
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

/* ================================================================
MOBILFIX 21 — F-UX-8 TOUCH :ACTIVE FEEDBACK
-webkit-tap-highlight-color: transparent (rad 14) raderar webbläsarens
inbyggda tryck-effekt. Utan explicit :active ser interaktiva element
helt orörda ut vid tryckning. Kräver pointer:coarse för att inte
aktiveras på mus på smal fönsterstorlek (t.ex. DevTools narrow).
================================================================ */
@media (pointer: coarse) {
  .menu-item:active {
    opacity: 0.65 !important;
    background: rgba(255, 255, 255, 0.06) !important;
  }

  .team-ticket-card:active,
  .archive-card:active {
    opacity: 0.82 !important;
    transform: scale(0.99) !important;
  }

  .filter-btn:active,
  .filter-chip:active,
  .action-btn:active,
  .icon-btn:active,
  .pill-btn:active,
  .tab-btn:active,
  .header-tab:active {
    opacity: 0.65 !important;
    transform: scale(0.97) !important;
  }

  button:not([class]):active,
  [role="button"]:active {
    opacity: 0.7 !important;
  }
}

/* ================================================================
MOBILFIX 23 — TJÄNSTEKATALOG FORDONSKATEGORIER I LJUSA TEMAN
.catalog-vehicle-group har ingen bakgrund — osynlig mot ljusgrå sida.
Varje fordonsgrupp (BIL, MC, AM, SLÄP, LASTBIL) får kort-utseende.
Interna tjänstekort (.catalog-list-card) får tydligare kontrast.
================================================================ */
body.capacitor-client.atlas-light-theme .catalog-vehicle-group {
  background: color-mix(in srgb, var(--accent-primary) 9%, #ffffff 72%);
  border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, rgba(0, 0, 0, 0.14));
  border-radius: 10px;
  margin-bottom: 8px;
}

body.capacitor-client.atlas-light-theme .catalog-vehicle-heading {
  color: var(--text-primary);
}

body.capacitor-client.atlas-light-theme .catalog-vehicle-heading > span,
body.capacitor-client.atlas-light-theme .catalog-vehicle-tools > span {
  opacity: 0.65 !important;
}

body.capacitor-client.atlas-light-theme .catalog-list-card {
  background: rgba(248, 250, 249, 0.92) !important;
  border-color: rgba(34, 52, 45, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}
body.capacitor-client.atlas-light-theme .catalog-list-card.active {
  background: rgba(244, 248, 246, 0.96) !important;
  border-color: color-mix(in srgb, var(--accent-primary) 42%, rgba(34, 52, 45, 0.14)) !important;
}
body.capacitor-client.atlas-light-theme .catalog-list-card .svc-type-pill {
  background: rgba(255, 255, 255, 0.54) !important;
  border-color: rgba(70, 98, 84, 0.18) !important;
  color: color-mix(in srgb, var(--text-primary) 72%, var(--text-secondary) 28%) !important;
  font-weight: 700 !important;
}
body.capacitor-client.atlas-light-theme .catalog-list-card .svc-type-pill.is-package {
  background: color-mix(in srgb, var(--accent-primary) 12%, #ffffff 62%) !important;
  border-color: color-mix(in srgb, var(--accent-primary) 48%, rgba(0, 0, 0, 0.12)) !important;
  color: color-mix(in srgb, var(--accent-primary) 78%, var(--text-primary) 22%) !important;
}
body.capacitor-client.atlas-light-theme .catalog-list-card .svc-type-pill.svc-type-kurs {
  background: color-mix(in srgb, #a78bfa 16%, #ffffff 64%) !important;
  border-color: rgba(124, 58, 237, 0.28) !important;
  color: #6d28d9 !important;
}
body.capacitor-client.atlas-light-theme .catalog-list-card .svc-type-pill.svc-type-lesson {
  background: color-mix(in srgb, #60a5fa 15%, #ffffff 66%) !important;
  border-color: rgba(37, 99, 235, 0.24) !important;
  color: #1d4ed8 !important;
}

/* ================================================================
MOBILFIX 24 — ADMIN-FLIKAR + KNAPPAR I LJUSA TEMAN
Fyra elementtyper som använder rgba(255,255,255,…) — osynliga mot
ljus bakgrund på Apple Light Green / Nordic Dawn:
  1. admin-sysconfig-nav-item  (Systemkonfig + Kundchatt nav-lista)
  2. btn-glass-tiny             (liten glasknapp, texten rgba 55% vit)
  3. report-preset-btn          (Rapporter AI — förinst. rapporter)
  4. ki-section-card            (Kunskapsimport — fynds-kort)
Active-state på nav-item använder accent-primary → synlig → orörd.
Ki-kort: state-vänster-border (grön/gul/röd) återproclameras explicit
         efter att border-color-overriden annars dödar den.
================================================================ */

/* 1 — Systemkonfig + Kundchatt navigeringsobjekt */
body.capacitor-client.atlas-light-theme #view-admin .admin-sysconfig-nav-item {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}
body.capacitor-client.atlas-light-theme #view-admin .admin-sysconfig-nav-item:hover {
  background: rgba(0, 0, 0, 0.09) !important;
  border-color: rgba(0, 0, 0, 0.18) !important;
}

/* 2 — btn-glass-tiny: text och form osynliga i ljust läge */
body.capacitor-client.atlas-light-theme .btn-glass-tiny {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: var(--text-primary) !important;
}
body.capacitor-client.atlas-light-theme .btn-glass-tiny:hover {
  background: rgba(0, 0, 0, 0.09) !important;
  color: var(--text-primary) !important;
}

/* 3 — Rapporter AI: förinställda rapportknappar + åtgärdsknappar */
body.capacitor-client.atlas-light-theme .report-preset-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}
body.capacitor-client.atlas-light-theme .report-preset-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(0, 0, 0, 0.18) !important;
}
body.capacitor-client.atlas-light-theme .report-action-btn {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}

/* 4 — Kunskapsimport: fyndskort — återproklamera state-vänster-border */
body.capacitor-client.atlas-light-theme .ki-section-card {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}
body.capacitor-client.atlas-light-theme .ki-section-card.ki-sc--new {
  background: rgba(74, 222, 128, 0.12) !important;
  border-left-color: rgba(74, 222, 128, 0.65) !important;
}
body.capacitor-client.atlas-light-theme .ki-section-card.ki-sc--similar {
  background: rgba(251, 191, 36, 0.12) !important;
  border-left-color: rgba(251, 191, 36, 0.6) !important;
}
body.capacitor-client.atlas-light-theme .ki-section-card.ki-sc--uncertain {
  background: rgba(239, 68, 68, 0.1) !important;
  border-left-color: rgba(239, 68, 68, 0.45) !important;
}

/* ================================================================
MOBILFIX 25 — PERSONAL + KONTOR KORT I LJUSA TEMAN
admin-mini-card har rgba(255,255,255,0.03) bakgrund — osynlig på
ljusgrå/ljusgrön yta. Varje kort färgläggs subtilt med sin
--agent-color (satt inline per kort). gap-card- exkluderas
(hanteras av MOBILFIX 17).
Katalog-flik: heading inner border-left "skär av" inuti MOBILFIX 23-
kortets ram — statusfärg flyttas till grupp-kortets vänstra kant
via CSS :has() (Chrome 105+, modern Android).
================================================================ */

/* Personal + Kontor mini-kort */
body.capacitor-client.atlas-light-theme #view-admin .admin-mini-card:not([id^="gap-card-"]) {
  background: color-mix(in srgb, var(--agent-color, var(--accent-primary)) 10%, var(--bg-dark-secondary)) !important;
  border: 1px solid color-mix(in srgb, var(--agent-color, var(--accent-primary)) 22%, var(--border-color)) !important;
}
body.capacitor-client.atlas-light-theme #view-admin .admin-mini-card:not([id^="gap-card-"]):hover {
  background: color-mix(in srgb, var(--agent-color, var(--accent-primary)) 18%, var(--bg-dark-secondary)) !important;
}
body.capacitor-client.atlas-light-theme #view-admin .admin-mini-card.active:not([id^="gap-card-"]) {
  background: color-mix(in srgb, var(--agent-color, var(--accent-primary)) 26%, var(--bg-dark-secondary)) !important;
  border-color: color-mix(in srgb, var(--agent-color, var(--accent-primary)) 45%, var(--border-color)) !important;
}

/* Tjänstekatalog: ta bort heading inner border-left (klipps av inuti kortet) */
body.capacitor-client.atlas-light-theme .catalog-vehicle-heading.is-active,
body.capacitor-client.atlas-light-theme .catalog-vehicle-heading.is-inactive {
  border-left: none !important;
  padding-left: 0 !important;
}
/* Statusfärg på grupp-kortets vänstra kant i stället */
body.capacitor-client.atlas-light-theme .catalog-vehicle-group:has(.catalog-vehicle-heading.is-active) {
  border-left: 3px solid rgba(52, 199, 89, 0.7) !important;
}
body.capacitor-client.atlas-light-theme .catalog-vehicle-group:has(.catalog-vehicle-heading.is-inactive) {
  border-left: 3px solid rgba(255, 59, 48, 0.6) !important;
}

/* Katalogtjänster ska läsa som neutrala kort inuti grön fordonsgrupp. */
body.capacitor-client.atlas-light-theme #view-admin .catalog-vehicle-group .catalog-list-card {
  background: rgba(248, 250, 249, 0.92) !important;
  border-color: rgba(34, 52, 45, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}
body.capacitor-client.atlas-light-theme #view-admin .catalog-vehicle-group .catalog-list-card.active {
  background: rgba(244, 248, 246, 0.96) !important;
  border-color: color-mix(in srgb, var(--accent-primary) 42%, rgba(34, 52, 45, 0.14)) !important;
}

/* ================================================================
MOBILFIX 26 — GUIDE-KORT I LJUSA TEMAN (Tjänster & Paket-flik)
catalog-guide-card har rgba(255,255,255,0.08) border + 0.025 bg —
båda osynliga på ljusgrå/ljusgrön yta. Mer synlig kant + bakgrund.
================================================================ */
body.capacitor-client.atlas-light-theme .catalog-guide-card {
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
}
body.capacitor-client.atlas-light-theme .catalog-guide-card p {
  opacity: 0.75 !important;
}
body.capacitor-client.atlas-light-theme .catalog-active-vehicles-panel {
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
}
body.capacitor-client.atlas-light-theme .catalog-active-vehicles-grid .catalog-active-vehicle-card.is-active {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.075)) !important;
  border-color: rgba(34, 197, 94, 0.42) !important;
}
body.capacitor-client.atlas-light-theme .catalog-active-vehicles-grid .catalog-active-vehicle-card.is-inactive {
  background: rgba(239, 68, 68, 0.045) !important;
  border-color: rgba(239, 68, 68, 0.18) !important;
}

/* ================================================================
MOBILFIX 27 — SKAPA AGENT/KONTOR FORMULÄR MOBILANPASSNING
Outer 2-kol-grids spiller utanför viewporten på mobil.
Klassen admin-create-outer-grid sätts i admin-forms.js på de yttre
grid-wrapparna. Overflow-x döljs på containern så inget horisontellt
scroll möjliggörs.
× öppettider-knappar: synlig cirkel-border i ljusa teman döljs.
================================================================ */
body.capacitor-client #admin-detail-content .admin-create-outer-grid {
  grid-template-columns: 1fr !important;
}
body.capacitor-client.atlas-light-theme .admin-time-del-btn,
body.capacitor-client.atlas-light-theme .price-delete-btn,
body.capacitor-client.atlas-light-theme .hours-remove-btn {
  background: transparent !important;
  border: none !important;
}
body.capacitor-client.atlas-light-theme .no-price-row {
  background: rgba(0, 0, 0, 0.04) !important;
}

/* ================================================================
MOBILFIX 30 — PERSONAL/AGENT-FORMULÄR
IRL 2026-06-14:
- avatargriden hade fem 1fr-kolumner men fasta 36px-ikoner, vilket gav
  stor dödyta mellan ikonerna
- kontorslistan hade egen scroll inuti detaljvyn och skapade döda touchytor
- vybehörighet och footer behövde tajtare, mer temabunden formkänsla
================================================================ */
body.capacitor-client #admin-detail-content .new-agent-form-shell {
  overflow: hidden !important;
}

body.capacitor-client #admin-detail-content .new-agent-form-body {
  padding: 16px 24px 12px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain;
}

body.capacitor-client #admin-detail-content .new-agent-main-grid {
  gap: 14px !important;
  margin-bottom: 16px !important;
}

body.capacitor-client #admin-detail-content .new-agent-lower-grid {
  gap: 14px !important;
}

body.capacitor-client #admin-detail-content .new-agent-fields-panel {
  gap: 12px !important;
}

body.capacitor-client #admin-detail-content .new-agent-profile-controls {
  gap: 14px !important;
  margin-bottom: 0 !important;
}

body.capacitor-client #admin-detail-content #new-agent-avatar-preview-big {
  height: 58px !important;
  width: 58px !important;
}

body.capacitor-client #admin-detail-content .new-agent-avatar-panel {
  margin-top: -2px !important;
}

body.capacitor-client #admin-detail-content #new-agent-avatar-grid {
  grid-template-columns: repeat(5, 40px) !important;
  justify-content: center !important;
  column-gap: 24px !important;
  row-gap: 10px !important;
}

body.capacitor-client #admin-detail-content #new-agent-avatar-grid .new-agent-avatar-opt {
  height: 40px !important;
  width: 40px !important;
}

body.capacitor-client #admin-detail-content .new-agent-office-list {
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
  gap: 6px !important;
}

body.capacitor-client #admin-detail-content .new-agent-office-label {
  min-height: 34px !important;
  padding: 7px 10px !important;
}

body.capacitor-client #admin-detail-content .new-agent-view-panel {
  padding: 12px !important;
  border-radius: 13px !important;
}

body.capacitor-client #admin-detail-content .new-agent-view-panel .na-view-pill {
  font-size: 11px !important;
  line-height: 1.1 !important;
  min-height: 0 !important;
  padding: 6px 10px !important;
}

body.capacitor-client #view-admin #na-form-footer {
  min-height: 58px !important;
  padding: 8px 20px calc(8px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px))) !important;
}