/* Kundsidans överdel på mobil (docs/mobile/ZIMLA_MOBIL_HANDOVER.md 6.9, prototypen s-kund). Bara under 1024 px –
   kundlägets panel och projektets huvud ersätts här; kundlägets kort (Offerten, ÄTA, Arbetsplats och ROT) står kvar. */
.zmc { display: none; }
.zmc-tabs, .kl-vm { display: none; }  /* telefonens flikar och versionsrubrik: bara under 1024 px */
@media (max-width: 1023px) {
  .kl:has(> .zmc) > .kl-panel, .kl:has(> .zmc) .kl-head, .kl:has(> .zmc) .kl-mtop, .kl:has(> .zmc) .kl-back { display: none !important; }
  /* Appens topprad och den korniga bakgrunden som på startsidan (UX-packen 2026-10-30); sidans egen luft bort. */
  .kl:has(> .zmc) { background: transparent !important; }
  #zimla-page-content:has(.zmc) { padding: 0 !important; }
  .zmc { --zmc-deep: #12382b; --zmc-green: #1f6b4f; --zmc-ink: #1d2420; --zmc-mut: #5d6b61; --zmc-soft: #6b746d; --zmc-line2: #eef0ec; --zmc-serif: Newsreader, Georgia, serif;
    display: flex; flex-direction: column; gap: 10px; padding: 0 16px 6px; color: var(--zmc-ink); font: 400 14px/1.4 Inter, ui-sans-serif, system-ui, sans-serif; }
  .zmc-head { display: flex; align-items: center; gap: 8px; margin: 0 -4px; padding: calc(12px + env(safe-area-inset-top, 0px)) 0 2px; }
  .zmc-back, .zmc-new { flex: none; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
  .zmc-back { background: rgba(255, 255, 255, 0.7); color: var(--zmc-deep); }
  .zmc-back .material-symbols-outlined { font-size: 18px; }
  .zmc-new { width: 40px; height: 40px; background: var(--zmc-green); color: #fff; }
  .zmc-new .material-symbols-outlined { font-size: 20px; }
  .zmc-ht { flex: 1; min-width: 0; }
  .zmc-ht b { display: block; font-size: 15px; font-weight: 600; }
  .zmc-ht small { display: block; font-size: 12px; color: var(--zmc-mut); }
  .zmc-card { padding: 4px 14px 10px; border-radius: 18px; background: #fff; border: 1px solid #ebe8e1; }
  .zmc-who { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 6px 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; }
  .zmc-av { flex: none; width: 46px; height: 46px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; }
  .zmc-wt { flex: 1; min-width: 0; }
  .zmc-wt b { display: block; font: 400 22px/1.15 var(--zmc-serif); }
  .zmc-wt small { display: block; font-size: 13px; color: var(--zmc-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .zmc-chev { flex: none; width: 36px; height: 36px; border-radius: 50%; background: #f1f3ef; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.2s ease; }
  .zmc-who[aria-expanded="true"] .zmc-chev { transform: rotate(180deg); }
  .zmc-icons { display: flex; justify-content: space-evenly; padding: 8px 0 4px; border-top: 1px solid var(--zmc-line2); }
  .zmc-ic { position: relative; width: 48px; height: 44px; border-radius: 12px; background: #f1f3ef; color: var(--zmc-deep); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
  .zmc-ic .material-symbols-outlined { font-size: 21px; }
  .zmc-ic.is-miss { color: #8a948d; }
  .zmc-ic.is-miss::after { content: ''; position: absolute; top: 6px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: #e8a33d; box-shadow: 0 0 0 2px #fff; }
  .zmc-fields { display: grid; gap: 2px; padding-top: 6px; border-top: 1px solid var(--zmc-line2); }
  .zmc-fields[hidden] { display: none; }
  .zmc-del { display: flex; align-items: center; gap: 8px; min-height: 48px; margin-top: 6px; padding: 0 2px; border: 0; border-top: 1px solid var(--zmc-line2); background: none; color: #b3261e; font: 500 14px/1 Inter, ui-sans-serif, system-ui, sans-serif; text-align: left; }
  .zmc-del .material-symbols-outlined { font-size: 19px; }
  .zm-sheet.zmc-sheet--danger .zm-btn--primary { background: #b3261e; }
  .zmc-f { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 48px; border-bottom: 1px solid var(--zmc-line2); text-decoration: none; color: inherit; }
  .zmc-f:last-of-type { border-bottom: 0; }
  .zmc-f > span { font-size: 13px; color: var(--zmc-mut); }
  .zmc-f input { min-width: 0; height: 40px; padding: 0 8px; border: 1px solid transparent; border-radius: 10px; background: transparent; font: 16px Inter, ui-sans-serif, system-ui, sans-serif; color: var(--zmc-ink); }
  .zmc-f input:focus { border-color: #cfdcd3; background: #fff; outline: none; }
  .zmc-f input::placeholder { color: #1f6b4f; }
  .zmc-f.is-link b { padding: 0 8px; font-size: 15px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .zmc-warn { margin: 4px 0 0; font-size: 12.5px; color: #8a5a12; }
  .zmc-k { display: flex; align-items: baseline; justify-content: space-between; margin: 8px 2px 0; }
  .zmc-k span { font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--zmc-mut); }
  .zmc-k a { font-size: 13.5px; font-weight: 500; color: var(--zmc-green); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
  .zmc-pick { position: relative; }
  .zmc-pickbtn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 60px; padding: 8px 14px; border: 1px solid #ebe8e1; border-radius: 16px; background: #fff; font: inherit; color: inherit; text-align: left; }
  .zmc-pt { flex: 1; min-width: 0; }
  .zmc-pt b { display: block; font: 400 17px/1.2 var(--zmc-serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .zmc-pt small { display: block; font-size: 12.5px; color: var(--zmc-soft); }
  .zmc-pill { flex: none; padding: 2px 10px; border-radius: 999px; background: #e3f1e8; color: #1f6b4f; font-size: 12px; font-style: normal; font-weight: 600; }
  .zmc-pop { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; padding: 8px; border-radius: 16px; background: #fff; box-shadow: 0 18px 40px -12px rgba(18, 40, 30, 0.35); }
  .zmc-pop[hidden] { display: none; }
  .zmc-search { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: 12px; background: #f4f5f1; color: var(--zmc-soft); }
  .zmc-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: 16px Inter, sans-serif; }
  .zmc-list { max-height: 50dvh; overflow-y: auto; margin-top: 6px; }
  .zmc-opt { display: block; padding: 10px 10px; border-radius: 10px; text-decoration: none; color: inherit; }
  .zmc-opt b { display: block; font-size: 14.5px; font-weight: 600; }
  .zmc-opt small { display: block; font-size: 12.5px; color: var(--zmc-soft); }
  .zmc-opt.is-on { background: #e9f2ec; }
  .zmc-opt[hidden] { display: none; }
  .zmc-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 12px 6px; list-style: none; border-radius: 16px; background: #fff; border: 1px solid #ebe8e1; position: relative; }
  .zmc-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; color: #8a948d; text-align: center; }
  .zmc-steps li::before { content: ''; position: absolute; top: 6px; left: -50%; right: 50%; height: 2px; background: #dfe5df; }
  .zmc-steps li:first-child::before { display: none; }
  .zmc-steps li.is-done::before, .zmc-steps li.is-on::before { background: var(--zmc-green); }
  .zmc-steps i { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%; background: #dfe5df; }
  .zmc-steps li.is-done i { background: var(--zmc-green); }
  .zmc-steps li.is-on i { background: #2fbf71; box-shadow: 0 0 0 4px rgba(47, 191, 113, 0.25); }
  .zmc-steps li:is(.is-done, .is-on) span { color: var(--zmc-ink); font-weight: 500; }
  .zmc-next { padding: 14px 16px 16px; border-radius: 20px; background: var(--zmc-deep); color: #fff; }
  .zmc-next b { display: block; font-size: 17px; font-weight: 600; line-height: 1.3; }
  .zmc-go { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 12px; border: 0; border-radius: 14px; background: #fff; color: var(--zmc-deep); font: 600 15px Inter, sans-serif; text-decoration: none; }
  .zmc-tcard { padding: 2px 12px; border-radius: 16px; background: #fff; border: 1px solid #ebe8e1; }
  .zmc-trow { display: flex; align-items: center; gap: 12px; min-height: 56px; border-top: 1px solid var(--zmc-line2); text-decoration: none; color: inherit; }
  .zmc-trow:first-child { border-top: 0; }
  .zmc-tav { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--zmc-deep); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
  .zmc-trow > span:nth-child(2) { flex: 1; min-width: 0; }
  .zmc-trow b { display: block; font-size: 14.5px; font-weight: 600; }
  .zmc-trow small { display: block; font-size: 12.5px; color: var(--zmc-soft); }
  .zmc-trow > .material-symbols-outlined { color: #9aa29c; }
  @media (prefers-reduced-motion: reduce) { .zmc-chev { transition: none; } }

  /* Offerter i projektet (prototypen): versionerna som kort – v-bricka, "Offert v2" med status, belopp och piller. Menyn,
     Gör ny version och avslutet står kvar. */
  .kl:has(> .zmc) #kl-offert { padding: 0; border: 0; background: none; box-shadow: none; }
  .kl:has(> .zmc) #kl-offert > .kl-ch { margin: 4px 0 8px; padding: 0 4px; }
  .kl:has(> .zmc) #kl-offert > .kl-ch h3 { font-size: 0; }
  .kl:has(> .zmc) #kl-offert > .kl-ch h3::before { content: "Offerter i projektet · exkl. moms"; font: 700 11px/1.3 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #5d6b61; }
  .kl:has(> .zmc) #kl-offert .kl-vt { border: 0; background: none; display: flex; flex-direction: column; gap: 8px; }
  .kl:has(> .zmc) #kl-offert .kl-vr.is-th { display: none !important; }
  .kl:has(> .zmc) #kl-offert .kl-vr { display: grid !important; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 4px; align-items: center;
    min-height: 0; padding: 12px 14px; border: 1px solid #e5e2da; border-radius: 16px; background: #fff; }
  .kl:has(> .zmc) #kl-offert .kl-vr > .kl-f { display: none !important; }
  .kl:has(> .zmc) #kl-offert .kl-vn { grid-column: 1; grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 12px; background: #e6f1ea; color: #1f6b4f; display: inline-flex; align-items: center; justify-content: center; font: 600 15px/1 Newsreader, Georgia, serif; }
  .kl:has(> .zmc) #kl-offert .kl-vn small { display: none; }  /* numret står i rubriken */
  /* Bekräftelsen på telefon: frågan på egen rad, knapparna under med tumträff. */
  .kl:has(> .zmc) #kl-offert .kl-vpill.is-confirm { left: 12px; flex-wrap: wrap; border-radius: 18px; padding: 10px; row-gap: 8px; }
  .kl:has(> .zmc) #kl-offert .kl-vpill.is-confirm .kl-vq { flex-basis: 100%; max-width: none; padding: 2px 4px; }
  .kl:has(> .zmc) #kl-offert .kl-vpill.is-confirm > button { height: 44px; padding: 0 16px; }
  .kl:has(> .zmc) #kl-offert .kl-vm { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; min-width: 0; }
  .kl:has(> .zmc) #kl-offert .kl-vm b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; color: #1d2420; }
  .kl:has(> .zmc) #kl-offert .kl-vm small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: #6b746d; }
  .kl:has(> .zmc) #kl-offert .kl-vsum { grid-column: 3; grid-row: 1; justify-self: end; font: 400 17px/1.2 Newsreader, Georgia, serif; color: #12382b; white-space: nowrap; }
  .kl:has(> .zmc) #kl-offert .kl-st { grid-column: 3; grid-row: 2; justify-self: end; padding: 2px 10px; border-radius: 999px; background: #e6f1ea; font-size: 12px; font-weight: 600; }
  .kl:has(> .zmc) #kl-offert .kl-vr .kl-warn { grid-column: 1 / -1; grid-row: 3; margin: 6px 0 0; font-size: 12.5px; }
  .kl:has(> .zmc) #kl-offert .kl-older > summary { padding: 6px 4px; font-size: 13px; color: #5d6b61; }
  /* Projektets delar i flikar (ägaren 2026-10-14: "så man slipper scrolla"): en del i taget. */
  .kl:has(> .zmc) .zmc-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 14px -16px 10px; padding: 0 16px; }
  .kl:has(> .zmc) .zmc-tabs::-webkit-scrollbar { display: none; }
  .kl:has(> .zmc) .zmc-tabs button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid #e3e6e1; border-radius: 999px; background: #fff;
    font: 500 13.5px/1 Inter, ui-sans-serif, system-ui, sans-serif; color: #2f3a33; }
  .kl:has(> .zmc) .zmc-tabs button i { min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: #fdecc8; color: #8a5a00; font-style: normal; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
  .kl:has(> .zmc) .zmc-tabs button[aria-selected="true"] { border-color: #12382b; background: #12382b; color: #fff; }
  .kl:has(> .zmc) .zmc-tabs button[aria-selected="true"] i { background: rgba(255, 255, 255, .2); color: #fff; }
  .kl:has(> .zmc) .zmc-off { display: none !important; }
  .kl:has(> .zmc) .kl-parts { display: block; }
  .kl:has(> .zmc) .kl-parts > .kl-part, .kl:has(> .zmc) #kl-rot, .kl:has(> .zmc) #kl-dialog { margin: 0; }
  .kl:has(> .zmc) #kl-dialog { position: static !important; transform: none !important; width: auto !important; max-height: none !important; border: 1px solid #e5e2da; border-radius: 18px; background: #fff; overflow: hidden; }
  .kl:has(> .zmc) #kl-dialog [data-kl-dlg-close].kl-dlg-x { display: none !important; }
}