/* Kunder (/kunder/) – prototypen 8bay (kb-*). Inga intoningar, ingen hover-lyft, ingen oskärpa (ägarbeslut: inga
   övergångar; blur hackar i Firefox). Kolumnernas färger kommer från --kc per steg. */
.ku-page { --ku-ink: #1d2420; --ku-mut: #6b736e; --ku-line: #e3e6e1; max-width: 1640px; margin: 0 auto; padding: 22px 28px 28px; display: flex; flex-direction: column; gap: 14px; height: 100dvh; box-sizing: border-box; color: var(--ku-ink); }
.ku-page[data-view="tabell"] { height: auto; min-height: 100dvh; }
.ku-page [hidden] { display: none !important; }
.ku-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ku-title { flex: 1; min-width: 220px; }
.ku-title h1 { margin: 0; font-family: Newsreader, ui-serif, Georgia, serif; font-weight: 400; font-size: 36px; line-height: 1.1; letter-spacing: -0.01em; }
.ku-title p { margin: 2px 0 0; font-size: 13px; color: var(--ku-mut); }
.kb-seg { display: flex; background: #e6e8e3; border-radius: 10px; padding: 3px; gap: 2px; }
.kb-seg button { border: none; border-radius: 8px; padding: 7px 16px; font: 500 12.5px Inter, sans-serif; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; background: transparent; color: #4e5751; }
.kb-seg button .material-symbols-outlined { font-size: 17px; }
.kb-seg button[aria-pressed="true"] { background: #fff; color: var(--ku-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.ku-search { display: flex; align-items: center; gap: 8px; width: 300px; max-width: 100%; height: 40px; padding: 0 10px 0 12px; border: 1px solid #dfe2dd; border-radius: 10px; background: rgba(255, 255, 255, 0.94); }
.ku-search:focus-within { border-color: #1f6b4f; box-shadow: 0 0 0 3px rgba(31, 107, 79, 0.12); }
.ku-search .material-symbols-outlined { font-size: 18px; color: var(--ku-mut); }
.ku-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: 13.5px Inter, sans-serif; color: var(--ku-ink); outline: none; }
.ku-search input::-webkit-search-cancel-button { cursor: pointer; }
.ku-search kbd { font: 500 10.5px Inter, sans-serif; border: 1px solid #dfe2dd; border-radius: 5px; padding: 1px 5px; color: #4e5751; background: #fff; }
.ku-new { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 10px; background: #1f6b4f; color: #fff; font: 600 13.5px Inter, sans-serif; text-decoration: none; white-space: nowrap; }
.ku-new:hover { background: #15543d; }
.ku-new .material-symbols-outlined { font-size: 18px; }

.kb-stats { background: rgba(247, 247, 244, 0.92); border-radius: 18px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.kb-statrow { display: flex; align-items: stretch; }
.kb-stat { flex: 1 1 0; min-width: 0; padding: 2px 18px; border-left: 1px solid var(--ku-line); display: flex; flex-direction: column; gap: 2px; }
.kb-stat:first-child { border-left: none; padding-left: 2px; }
.kb-stat .l, .kb-attbtn .l { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ku-mut); font-weight: 500; white-space: nowrap; }
.kb-stat .v, .kb-attbtn .v { font-family: Newsreader, ui-serif, Georgia, serif; font-size: 24px; line-height: 1.15; color: var(--ku-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kb-stat .s, .kb-attbtn .s { font-size: 12px; color: var(--ku-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-attbtn { flex: 0 0 220px; border: none; cursor: pointer; text-align: left; font-family: Inter, sans-serif; border-radius: 12px; padding: 8px 14px; margin-left: 10px; display: flex; flex-direction: column; gap: 2px; background: #e8f3ec; }
.kb-attbtn.is-some { background: #fbf0d9; }
.kb-attbtn.is-some .l, .kb-attbtn.is-some .s { color: #8a5a00; }
.kb-attbtn.is-on { background: #1d2420; }
.kb-attbtn.is-on .l, .kb-attbtn.is-on .v, .kb-attbtn.is-on .s { color: #fff; }
.kb-bar { display: flex; height: 6px; border-radius: 999px; overflow: hidden; gap: 2px; background: #eceee9; }
.kb-bar span { height: 100%; }
.kb-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--ku-mut); }
.kb-legend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }
.kb-priced { margin-left: auto; }

.kb-tools { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-height: 22px; margin: -4px 0; }
.kb-filter { margin-right: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ku-ink); background: #fff; border: 1px solid #dfe2dd; border-radius: 999px; padding: 3px 4px 3px 12px; }
.kb-filter button { border: 0; background: #eceee9; border-radius: 999px; padding: 3px 10px; font: 500 12px Inter, sans-serif; cursor: pointer; }
.kb-tip { font-size: 11.5px; color: var(--ku-mut); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.kb-tip kbd { font: 500 10.5px Inter, sans-serif; border: 1px solid #dfe2dd; border-bottom-width: 2px; border-radius: 5px; padding: 1px 5px; background: #fff; color: #4e5751; }

.kb-board { flex: 1; min-height: 0; display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 14px; scrollbar-width: thin; }
.kb-col { flex: 1 1 0; min-width: 236px; max-width: 360px; display: flex; flex-direction: column; min-height: 0; border-radius: 16px; background: rgba(236, 239, 234, 0.72); box-shadow: inset 0 0 0 1px rgba(29, 36, 32, 0.05); }
.kb-col[hidden] { display: none; }
.kb-col.is-over { background: rgba(226, 239, 231, 0.9); box-shadow: inset 0 0 0 2px var(--kc); }
.kb-col.is-bad { opacity: 0.42; }
.kb-col.is-forlorad { max-width: 300px; }
.kb-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px 14px; }
.kb-head .dot, .kb-colmin .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.kb-head .nm { font-size: 13px; font-weight: 600; white-space: nowrap; }
.kb-head .n, .kb-colmin .n { min-width: 20px; height: 20px; border-radius: 999px; background: rgba(29, 36, 32, 0.07); color: #4e5751; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; box-sizing: border-box; }
.kb-head .sum { margin-left: auto; font-size: 12px; color: #4e5751; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kb-head .ib { border: none; background: transparent; cursor: pointer; width: 24px; height: 24px; border-radius: 7px; color: #4e5751; padding: 0; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.kb-head .ib .material-symbols-outlined { font-size: 17px; }
.kb-head .ib:hover { background: rgba(29, 36, 32, 0.08); color: var(--ku-ink); }
.kb-hint { margin: 0 10px 8px; border-radius: 9px; padding: 6px 10px; font-size: 11.5px; font-weight: 500; color: var(--kink, #1f6b4f); background: rgba(255, 255, 255, 0.7); }
.kb-hint.is-bad { color: #9a3a2e; background: #f7e4e1; }
.kb-list { flex: 1; min-height: 40px; overflow-y: auto; overflow-x: hidden; padding: 2px 10px 10px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin; }
.kb-empty { margin: 0; border: 1.5px dashed rgba(29, 36, 32, 0.12); border-radius: 12px; padding: 18px 12px; text-align: center; font-size: 12px; color: #8a918c; line-height: 1.45; }
.kb-add, .kb-older { margin: 0 10px 10px; border-radius: 10px; padding: 8px 10px; font: 500 12.5px Inter, sans-serif; color: #4e5751; text-decoration: none; }
.kb-add:hover, .kb-older:hover { background: rgba(29, 36, 32, 0.06); color: #1f6b4f; }
.kb-colmin { flex: 0 0 46px; border: none; cursor: pointer; border-radius: 16px; background: rgba(236, 239, 234, 0.72); box-shadow: inset 0 0 0 1px rgba(29, 36, 32, 0.05); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 0; color: #9a3a2e; }
.kb-colmin[hidden] { display: none; }
.kb-colmin:hover { background: rgba(226, 230, 224, 0.95); }
.kb-colmin .vt { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12.5px; font-weight: 600; white-space: nowrap; }

.kb-card { position: relative; flex: none; background: #fff; border-radius: 12px; padding: 11px 12px 10px 13px; display: flex; flex-direction: column; gap: 8px; cursor: grab; box-shadow: 0 1px 2px rgba(20, 30, 25, 0.06), 0 0 0 1px rgba(29, 36, 32, 0.05); outline: none; }
.kb-card[hidden] { display: none; }
.kb-card:hover { box-shadow: 0 8px 20px -14px rgba(20, 40, 30, 0.45), 0 0 0 1px rgba(29, 36, 32, 0.09); }
.kb-card:focus-visible { box-shadow: 0 0 0 2px #1f6b4f; }
.kb-card.is-att::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: #e0a33a; }
.kb-card.is-src { opacity: 0.38; }
.kb-card.is-pend { cursor: default; box-shadow: 0 0 0 2px var(--kc, #1f6b4f), 0 18px 36px -18px rgba(20, 40, 30, 0.55); }
.kb-card.is-flash::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px #2fbf71; opacity: 0; animation: kuFlash 1.1s ease-out; pointer-events: none; }
/* Offertläget: versionen som nyss skickades (?skickad=) markeras när man landar. */
.kund-row.is-flash { position: relative; }
.kund-row.is-flash::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px #2fbf71; opacity: 0; animation: kuFlash 1.6s ease-out .2s; pointer-events: none; }
.kb-card.is-shake { animation: kuShake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes kuFlash { 0%, 40% { opacity: 1; } 100% { opacity: 0; } }
@keyframes kuShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@media (prefers-reduced-motion: reduce) { .kb-card.is-flash::after, .kb-card.is-shake, .kund-row.is-flash::after { animation: none; } }
.kb-ghost { position: fixed !important; left: 0; top: 0; margin: 0 !important; z-index: 1000; pointer-events: none; cursor: grabbing; will-change: transform; box-shadow: 0 28px 50px -18px rgba(20, 40, 30, 0.45), 0 0 0 1px rgba(29, 36, 32, 0.08); }
.kb-ghost.is-bad { box-shadow: 0 28px 50px -18px rgba(90, 30, 20, 0.35), 0 0 0 2px #e39a9a !important; }
.kb-ghost .kb-more, .kb-ghost .kb-menu, .kb-ghost .kb-confirm { display: none; }
body.kb-dragging, body.kb-dragging * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }
.kb-top { display: flex; align-items: flex-start; gap: 10px; }
.kb-av { flex: none; width: 28px; height: 28px; border-radius: 50%; font-size: 10.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; box-sizing: border-box; background: #2f6f5c; color: #fff; }
.kb-av.is-org { background: #3d4540; }
.kb-av.is-none { background: #fff; color: #b7791f; border: 1.5px dashed #e0a33a; }
.kb-nm { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.kb-nm b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.kb-nm b.is-missing, .ku-who a.is-missing { color: #8a5a00; }
.kb-nm span { display: block; font-size: 12px; color: var(--ku-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
/* Utkast utan kund: jobbets ämne i stället för "Kund saknas" – vanlig vikt (ett ämne, inte ett namn), två rader. */
.kb-nm b.is-topic { font-size: 13px; font-weight: 400; white-space: normal; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-right: 4px; }
.kb-more { list-style: none; width: 26px; height: 26px; margin: -3px -5px 0 0; border-radius: 8px; color: #4e5751; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; }
.kb-more::-webkit-details-marker { display: none; }
.kb-more .material-symbols-outlined { font-size: 18px; }
.kb-more:hover { background: #f1f2ef; color: var(--ku-ink); }
.kb-card:hover .kb-more, .kb-card:focus-within .kb-more, .kb-more:has(+ .kb-menu.is-open) { opacity: 1; }
.kb-more:has(+ .kb-menu:popover-open) { opacity: 1; } /* egen regel: Safari före 17 slänger hela regeln vid :popover-open */
/* Tabellens rad har samma ⋯-meny (kunder/_job_menu.html) längst till höger. */
.ku-acts { width: 36px; text-align: right; }
.ku-acts .kb-more { margin: 0 0 0 auto; }
/* Markeringen: kryss längst till höger, hela cellen är träffytan; markerad rad har egen ton (inte hover). */
.ku-t .ku-pick { width: 44px; padding: 0 14px 0 4px; text-align: center; }
.ku-t .ku-pick label { display: flex; align-items: center; justify-content: center; height: 58px; cursor: pointer; }
.ku-t .ku-pick input { width: 16px; height: 16px; margin: 0; accent-color: #1f6b4f; cursor: pointer; }
.ku-t tr.is-picked td, .ku-t tr.is-picked:hover td { background: #eef5f0; }
.ku-ttools[data-picking] { position: sticky; top: 0; z-index: 5; padding: 8px 0; background: rgba(246, 248, 245, 0.94); backdrop-filter: blur(8px); }
.ku-ttools[data-picking] .ku-chips { display: none; }
.ku-bulk { display: flex; align-items: center; gap: 10px; margin-right: auto; font-size: 13px; }
.ku-bulk .kb-btn { height: 34px; }
.ku-bulk-note { color: var(--ku-mut); font-size: 12.5px; }
[data-ku-row]:hover .kb-more, [data-ku-row]:focus-within .kb-more { opacity: 1; }
.kb-more { flex: none; border: 0; background: transparent; padding: 0; }
/* Kortets meny är en popover i top layer, placerad av kunder-board.js. Stängd är den dold i alla webbläsare; öppen
   visas den med :popover-open, eller med .is-open där popover saknas (Safari före 17, kunder-board.js). Reglerna står
   var för sig: en okänd selektor i en lista slänger hela regeln i Safari 16 – då stod alla kortens menyer öppna. */
.kb-menu[popover] { position: fixed; inset: auto; right: auto; margin: 0; color: var(--ku-ink); display: none; }
.kb-menu[popover].is-open { display: flex; }
.kb-menu[popover]:popover-open { display: flex; }
@media (hover: none) { .kb-more { opacity: 1; } }
.kb-menu { position: absolute; right: -6px; top: calc(100% + 4px); z-index: 70; min-width: 236px; background: #fff; border: 1px solid #e1e3de; border-radius: 12px; box-shadow: 0 22px 48px -16px rgba(20, 30, 25, 0.42); padding: 6px; display: flex; flex-direction: column; }
.kb-menu > a, .kb-menu > button, .kb-menu form > button { border: none; background: transparent; cursor: pointer; text-align: left; border-radius: 8px; padding: 8px 10px; font: 13px Inter, sans-serif; color: var(--ku-ink); display: flex; align-items: center; gap: 9px; white-space: nowrap; text-decoration: none; width: 100%; }
.kb-menu .material-symbols-outlined { font-size: 17px; color: #4e5751; }
.kb-menu > a:hover, .kb-menu > button:hover, .kb-menu form > button:hover { background: #f1f5f2; }
.kb-menu form { margin: 0; }
.kb-menu .is-lost, .kb-menu .is-lost .material-symbols-outlined { color: #9a3a2e; }
.kb-menu .sep { height: 1px; background: #eceee9; margin: 4px 6px; }
.kb-menu .cap { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #8a918c; padding: 6px 10px 3px; margin: 4px 0 0; border-top: 1px solid #eceee9; }
.kb-menu .dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; }
.dot.is-utkast { background: #d08a00; } .dot.is-skickad { background: #3b6ea8; } .dot.is-godkand { background: #1f6b4f; } .dot.is-pagar { background: #2fa36a; } .dot.is-klart { background: #6b736e; } .dot.is-forlorad { background: #c86b5d; }
.kb-next { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 12px; line-height: 1.4; color: #1f5c45; text-decoration: none; }
.kb-next > .material-symbols-outlined { flex: none; font-size: 15px; margin-top: 1px; }
.kb-next > span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kb-next.is-warn { color: #7a5200; } .kb-next.is-wait { color: #2c5585; } .kb-next.is-plan { color: #3d4540; } .kb-next.is-ok { color: #1f6b4f; } .kb-next.is-muted { color: #6b736e; } .kb-next.is-money { color: #2c5585; }
/* Variant B (ägaren 2026-10-28): tiden som chip uppe till höger, statusen som kort rubrik + varför – bara "gör något" (warn)
   och "väntar" (wait) får tonad ruta, resten är en rad – och åldersstapeln i foten mot kolumnens normaltid. Ingen rörelse. */
.kb-status { display: flex; flex-direction: column; gap: 1px; margin: 0; font-size: 12px; line-height: 1.4; color: #3d4540; }
.kb-status b { font-size: 12.5px; font-weight: 600; }
.kb-status span { color: #6b736e; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kb-status.is-box { padding: 7px 9px; border-radius: 9px; }
.kb-status.is-warn.is-box { background: #fbf3e2; } .kb-status.is-warn, .kb-status.is-warn.is-box span { color: #7a5200; }
.kb-status.is-wait.is-box { background: #eaf1fa; } .kb-status.is-wait, .kb-status.is-wait.is-box span { color: #2c5585; }
.kb-status.is-ok b { color: #1f6b4f; } .kb-status.is-you b { color: #1f5c45; } .kb-status.is-money b { color: #2c5585; } .kb-status.is-muted b { color: #6b736e; }
.kb-foot .kb-act, .kb-foot .kl-closef { flex: none; }
.kb-time { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #6b736e; font-variant-numeric: tabular-nums; }
.kb-track { flex: 1; height: 4px; border-radius: 999px; background: #edf0ec; overflow: hidden; }
.kb-track i { display: block; height: 100%; border-radius: inherit; background: #b9c4bc; }
.kb-time.is-plan .kb-track i { background: #5fb98a; }
.kb-time.is-warn { color: #8a5a00; font-weight: 500; }
.kb-time.is-warn .kb-track { background: #f6ead2; }
.kb-time.is-warn .kb-track i { background: #e0a33a; }
.kb-tl { flex: none; white-space: nowrap; }
.kb-act { align-self: flex-start; border: none; cursor: pointer; height: 28px; border-radius: 8px; background: #1f6b4f; color: #fff; font: 600 12px Inter, sans-serif; padding: 0 11px; white-space: nowrap; display: inline-flex; align-items: center; text-decoration: none; }
.kb-act:hover { background: #15543d; }
.kb-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 20px; }
.kb-metas { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 3px 10px; }
.kb-meta { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; white-space: nowrap; color: #6b736e; }
.kb-meta .material-symbols-outlined { font-size: 14px; }
.kb-meta:has(.material-symbols-outlined:first-child) { }
.kb-age.is-long { color: #b7791f; }
.kb-val { flex: none; margin-left: auto; font-family: Newsreader, ui-serif, Georgia, serif; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kb-confirm { margin: 2px -12px -10px -13px; padding: 11px 12px 12px 13px; border-top: 1px solid #eceee9; background: linear-gradient(180deg, #fbfcfa, #f5f8f5); border-radius: 0 0 12px 12px; display: flex; flex-direction: column; gap: 8px; cursor: default; }
.kb-confirm .t { margin: 0; font-size: 13px; font-weight: 600; }
.kb-confirm .b { margin: 0; font-size: 12px; color: #4e5751; line-height: 1.45; }
.kb-confirm .row { display: flex; gap: 6px; flex-wrap: wrap; }
.kb-sending { display: flex; align-items: center; gap: 8px; }
.kb-btn { border: 1px solid #cfd4cf; background: #fff; color: var(--ku-ink); cursor: pointer; height: 30px; border-radius: 8px; font: 500 12px Inter, sans-serif; padding: 0 11px; white-space: nowrap; display: inline-flex; align-items: center; text-decoration: none; }
.kb-btn:hover { border-color: #1f6b4f; }
.kb-btn.p { background: #1f6b4f; border-color: #1f6b4f; color: #fff; font-weight: 600; }
.kb-btn.p:hover { background: #15543d; }
.kb-btn.r { border-color: #e9c6c0; color: #9a3a2e; }
.kb-btn.r:hover { background: #f7e4e1; }
.kb-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.chan-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chan-l { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ku-mut); }
.chan-seg { display: inline-flex; background: #f0f1ee; border-radius: 8px; padding: 2px; gap: 2px; }
.chan-seg button { border: none; border-radius: 6px; padding: 5px 10px; font: 500 12px Inter, sans-serif; cursor: pointer; background: transparent; color: #4e5751; }
.chan-seg button[aria-checked="true"] { background: #fff; color: var(--ku-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.chan-seg button:disabled { opacity: 0.4; cursor: not-allowed; }
/* Påminn: en kanal utan kontakt går att trycka på – den öppnar fältet "Simon har ingen e-post." (kunder-board.js). */
.npd .chan-seg button[aria-disabled="true"] { color: #9aa29c; cursor: pointer; }
.chan-to { margin: 0; font-size: 11.5px; color: var(--ku-mut); }

/* Vyerna: tavlan eller tabellen (samma data, klientläge). */
.ku-page[data-view="tabell"] [data-ku-kanban-only], .ku-page:not([data-view="tabell"]) [data-ku-table-only] { display: none !important; }
.ku-main { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.ku-ttools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ku-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-right: auto; }
.ku-chips button { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 14px; border: 1px solid #dfe2dd; border-radius: 999px; background: rgba(255, 255, 255, 0.94); font: 500 13px Inter, sans-serif; cursor: pointer; color: var(--ku-ink); }
.ku-chips button span { min-width: 20px; height: 20px; border-radius: 999px; background: #eceee9; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.ku-chips button[aria-pressed="true"] { background: #1d2420; border-color: #1d2420; color: #fff; }
.ku-chips button[aria-pressed="true"] span { background: rgba(255, 255, 255, 0.16); }
.ku-tsum { font-size: 12.5px; color: var(--ku-mut); }
.ku-sort { position: relative; }
.ku-sort summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid #dfe2dd; border-radius: 10px; background: #fff; font: 500 13px Inter, sans-serif; cursor: pointer; }
.ku-sort summary::-webkit-details-marker { display: none; }
.ku-sort summary .material-symbols-outlined { font-size: 17px; }
.ku-sort .kb-menu { right: 0; min-width: 180px; }
.ku-sort .kb-menu button[aria-checked="true"]::after { content: '✓'; margin-left: auto; color: #1f6b4f; }
.ku-t { width: 100%; border-collapse: collapse; background: rgba(255, 255, 255, 0.94); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); font-size: 13px; }
.ku-t th { text-align: left; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ku-mut); font-weight: 500; padding: 14px 16px 10px; border-bottom: 1px solid #eceee9; }
.ku-t td { padding: 0 16px; height: 58px; border-bottom: 1px solid #f0f1ee; vertical-align: middle; }
.ku-t tr[data-ku-row] { cursor: pointer; }
.ku-t tr[data-ku-row]:hover td { background: #f3f8f4; }
.ku-t td:first-child { display: flex; align-items: center; gap: 12px; min-width: 240px; }
.ku-t td:first-child .kb-av { width: 36px; height: 36px; font-size: 12px; }
.ku-who { display: flex; flex-direction: column; min-width: 0; }
.ku-who a { color: var(--ku-ink); font-weight: 500; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ku-who small { color: var(--ku-mut); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.ku-job { color: var(--ku-ink); text-decoration: none; display: inline-block; max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.ku-more { font-size: 11px; color: #4e5751; background: #eceee9; border-radius: 999px; padding: 2px 7px; white-space: nowrap; }
.ku-st { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; white-space: nowrap; color: var(--kc); }
.ku-st i { width: 7px; height: 7px; border-radius: 50%; background: var(--kc); }
.ku-st em { font-style: normal; font-weight: 400; color: var(--ku-mut); }
.ku-t .r { text-align: right; }
.ku-val { font-family: Newsreader, ui-serif, Georgia, serif; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ku-chev { font-size: 18px; color: #9aa19c; }
.ku-t tbody[hidden] { display: none; }
.ku-tempty { text-align: center; padding: 40px 16px; color: var(--ku-mut); }
.ku-tempty b { display: block; color: var(--ku-ink); font-size: 15px; font-weight: 500; }

/* Meddela kund */
.npd { border: 0; border-radius: 16px; padding: 0; width: min(520px, calc(100vw - 32px)); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.5); }
.npd::backdrop { background: rgba(20, 30, 25, 0.35); }
.npd-f { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }
.npd-f header { display: flex; align-items: center; justify-content: space-between; font-size: 15px; }
.npd-f header b { font-weight: 600; }
.npd-x { border: 0; background: transparent; cursor: pointer; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; }
.npd-to { margin: 0; font-size: 12.5px; color: var(--ku-mut, #6b736e); }
.npd textarea { width: 100%; box-sizing: border-box; border: 1px solid #dfe2dd; border-radius: 10px; padding: 10px 12px; font: 14px/1.5 Inter, sans-serif; resize: vertical; }
.npd-f footer { display: flex; align-items: center; gap: 8px; }
.npd-n { margin-right: auto; font-size: 12px; color: #8a918c; }
.npd-miss { display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; background: #fbf3e2; color: #6b4a00; font-size: 12.5px; }
.npd-miss[hidden], .npd-miss-row[hidden] { display: none; }
.npd-miss p { margin: 0; }
.npd-miss a { color: inherit; font-weight: 500; text-decoration: underline; }
.npd-miss-row { display: flex; gap: 8px; }
.npd-miss-row input { flex: 1; min-width: 0; height: 34px; box-sizing: border-box; border: 1px solid #e4c98a; border-radius: 8px; padding: 0 10px; background: #fff; font: 14px Inter, sans-serif; color: var(--ku-ink, #17211a); }
.npd-miss-row .kb-btn { height: 34px; }
.npd-miss-err { color: #a3302a; }
.npd-miss-err:empty { display: none; }
/* Påminn på telefon: kanalvalet i full bredd, knappar att träffa, 16 px i textfältet (iOS zoomar annars). */
@media (max-width: 1023px) {
  .npd .chan-seg { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .npd .chan-seg button { min-height: 40px; }
  .npd-f footer .kb-btn { height: 44px; }
  .npd textarea { font-size: 16px; }
  .npd-f { max-height: calc(100dvh - 32px); overflow-y: auto; }
  .npd-miss-row input { height: 44px; font-size: 16px; }
  .npd-miss-row .kb-btn { height: 44px; }
}

@media (max-width: 1320px) { .kb-attbtn { flex-basis: 190px; } .kb-col { min-width: 200px; } .kb-val { white-space: nowrap; } }
@media (max-width: 1080px) { .kb-stat:nth-child(2), .kb-tip { display: none; } }

/* Telefon (B17): samma kolumn-DOM som lista, inget drag. */
@media (max-width: 1023px) {
  .ku-page { height: auto; padding: 12px 16px calc(110px + env(safe-area-inset-bottom)); gap: 12px; }
  .ku-head { gap: 10px; }
  .ku-title h1 { font-size: 28px; }
  .ku-head .kb-seg { order: 3; }
  .ku-search { order: 4; width: 100%; height: 44px; }
  .ku-search input { font-size: 16px; }
  .ku-search kbd { display: none; }
  .ku-new { order: 2; height: 40px; padding: 0 12px; }
  .ku-new span:last-child { display: none; }
  /* Telefon: översikten krymper till Väntar på dig; stegen blir sektioner med antal (listor, inte tavla). */
  .kb-stats { padding: 0; background: none; box-shadow: none; gap: 0; }
  .kb-stat, .kb-bar, .kb-legend { display: none; }
  .kb-attbtn { flex: 1 1 100%; margin: 0; flex-direction: row; align-items: center; gap: 10px; min-height: 48px; }
  .kb-attbtn .v { font-size: 20px; order: -1; }
  .kb-attbtn .s { margin-left: auto; }
  .kb-tools, .kb-colmin { display: none !important; }
  .ku-main, .kb-board { flex: none; }
  .kb-board { display: flex; flex-direction: column; overflow: visible; gap: 16px; padding: 0; }
  .kb-col, .kb-col.is-forlorad { flex: none; max-width: none; min-width: 0; background: transparent; box-shadow: none; }
  .ku-page .kb-col[data-kcol="forlorad"][hidden] { display: flex !important; }
  .kb-head { padding: 0 2px 6px; }
  .kb-list { overflow: visible; padding: 0; }
  .kb-card { cursor: pointer; min-height: 64px; }
  .kb-act { min-height: 44px; }
  .ku-t thead, .ku-t td:nth-child(2), .ku-t td:nth-child(3), .ku-t .ku-acts, .ku-t .ku-pick { display: none; }
  .ku-t td { height: auto; padding: 10px 12px; }
  .ku-t td:first-child { min-width: 0; }
  .ku-t tr[data-ku-row] { display: grid; grid-template-columns: 1fr auto; }
  .ku-t tr[data-ku-row][hidden] { display: none; }
  .ku-t td:nth-child(4) { grid-column: 1 / -1; padding-top: 0; }
}

/* ===== Kundsidan (L3) – samma tokens som Kunder; rader, inte kort i kort; ingen rörelse utöver panelens tonning. ===== */
.kund-page { --ku-ink: #1d2420; --ku-mut: #6b736e; --ku-line: #e3e6e1; max-width: 1640px; margin: 0 auto; padding: 18px 28px calc(110px + env(safe-area-inset-bottom)); color: var(--ku-ink); display: flex; flex-direction: column; gap: 14px; }
.kund-page [hidden] { display: none !important; }
.kund-crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ku-mut); min-width: 0; }
.kund-crumbs a { color: var(--ku-mut); text-decoration: none; }
.kund-crumbs a:hover { color: var(--ku-ink); }
.kund-crumbs b { font-weight: 500; color: var(--ku-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.kund-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 500; color: var(--kc); white-space: nowrap; }
.kund-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--kc); }
.kund-reach { margin-left: auto; display: flex; gap: 6px; }
.kund-reach .kb-btn .material-symbols-outlined { font-size: 16px; margin-right: 4px; }
.kund-sms { display: none; }
.kund-page[aria-busy] , #kund-panel[aria-busy] { opacity: 1; }
#kund-panel[aria-busy="true"] .kund-main { opacity: 0.62; transition: opacity 0s 120ms; }
.kund-wrap { display: flex; flex-direction: column; gap: 14px; }
.kund-head { display: flex; gap: 24px; align-items: flex-start; justify-content: space-between; padding: 20px 20px 16px; border-radius: 18px 18px 0 0; background: rgba(247, 247, 244, 0.92); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
.kund-head:not(:has(+ .kund-bar)) { border-radius: 18px; }
.kund-who { display: flex; gap: 20px; min-width: 0; }
/* Prototypen: jobbets bild med kundens initialer som märke i hörnet. */
.kund-thumb { position: relative; flex: none; width: 120px; height: 90px; padding: 6px; box-sizing: border-box; border-radius: 12px; background: #e9ece6; }
.kund-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; background: #eef2ed; }
.kund-thumb .kund-av { position: absolute; right: -8px; bottom: -8px; box-shadow: 0 0 0 3px #f7f7f4; }
.kund-thumb:not(:has(img)) { width: 48px; height: 48px; padding: 0; background: none; }
.kund-thumb:not(:has(img)) .kund-av { position: static; box-shadow: none; }
.kund-av { width: 40px; height: 40px; font-size: 13px; font-weight: 600; }
.kund-id { min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 4px; }
.kund-kicker { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #1f6b4f; font-weight: 500; }
.kund-id h1 { margin: 7px 0 9px; font-family: Inter, sans-serif; font-weight: 500; font-size: 22px; letter-spacing: -0.01em; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kund-id h1.is-missing { color: #8a5a00; }
.kund-line { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12.5px; color: var(--ku-mut); min-width: 0; }
.kund-line span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.kund-note { margin: 4px 0 0; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #4e5751; background: #f1f2ef; border-radius: 8px; padding: 4px 9px; max-width: 520px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kund-note .material-symbols-outlined { font-size: 15px; }
.kund-add { font-size: 13px; color: #1f6b4f; text-decoration: none; border-bottom: 1px dashed currentColor; align-self: flex-start; }
.kund-now { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; max-width: 460px; }
.kund-pname { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #4e5751; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kund-value { font-family: Inter, sans-serif; font-weight: 600; font-size: 32px; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kund-now > small { font-size: 12px; color: var(--ku-mut); }
.kund-waiting { display: inline-flex; align-items: center; gap: 4px; color: #8a5a00 !important; }
.kund-waiting .material-symbols-outlined { font-size: 14px; }
.kund-now .kb-next { justify-content: flex-end; margin-top: 4px; }
.kund-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-top: 6px; }
.kund-acts form { margin: 0; }
.kund-acts .kb-btn { height: 36px; font-size: 13px; padding: 0 14px; }
.kund-bar { display: flex; align-items: center; gap: 12px; min-width: 0; margin-top: -14px; padding: 10px 14px 10px 20px; border-top: 1px solid #e6e8e3; border-radius: 0 0 18px 18px; background: rgba(247, 247, 244, 0.92); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); position: relative; z-index: 6; }
.kund-pick { position: relative; flex: none; }
.kund-pick summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.kund-pick-b { display: flex; align-items: center; gap: 7px; max-width: 260px; padding: 8px 12px; border: 1px solid #cfd8d2; border-radius: 9px; background: #fff; }
.kund-pick summary:hover .kund-pick-b { border-color: #1f6b4f; }
.kund-pick-b .material-symbols-outlined { font-size: 16px; color: #6b736e; }
.kund-pick summary::-webkit-details-marker { display: none; }
.kund-pick-k { font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #1f6b4f; white-space: nowrap; }
.kund-pick summary b { font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kund-pick-menu { left: 0; right: auto; min-width: 300px; }
.kund-pick-menu a > span:not(.material-symbols-outlined) { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.kund-pick-menu a b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kund-pick-menu a small { font-size: 11.5px; color: var(--ku-mut); }
.kund-pick-menu a[aria-current] { background: #f1f5f2; }
.kund-tabs { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; border-radius: 10px; background: #fafbf9; border: 1px solid #e6e8e3; min-width: 0; }
.kund-tabs::-webkit-scrollbar { display: none; }
.kund-tabs a { flex: none; display: flex; flex-direction: column; gap: 1px; padding: 6px 14px; min-height: 44px; box-sizing: border-box; justify-content: center; text-decoration: none; color: var(--ku-ink); border-left: 1px solid #eef0ec; }
.kund-tabs a:first-child { border-left: 0; }
.kund-tabs a:hover { background: #f3f8f4; }
.kund-tabs a small { font-size: 10.5px; color: var(--ku-mut); }
.kund-tabs a b { font-size: 12.5px; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.kund-tabs a.is-warn { background: #fdf6ec; }
.kund-tabs a[aria-selected="true"] { background: #fff; box-shadow: inset 0 0 0 1.5px #1f6b4f; border-radius: 10px; }
.kund-dot { width: 7px; height: 7px; border-radius: 50%; background: #c9cec8; }
.kund-dot.is-ok { background: #2fa36a; } .kund-dot.is-warn { background: #d08a00; } .kund-dot.is-sent { background: #3b6ea8; } .kund-dot.is-bad { background: #c86b5d; }
.kund-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.kund-main { min-width: 0; padding: 18px 20px; border-radius: 18px; background: rgba(250, 251, 249, 0.94); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
.kund-aside { padding: 16px 18px; border-radius: 18px; background: rgba(250, 251, 249, 0.94); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
.kund-aside-h { display: block; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ku-mut); font-weight: 500; margin-bottom: 10px; }
.kund-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.kund-events li { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 0 0 12px 18px; font-size: 13px; }
.kund-events li i { position: absolute; left: 0; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: #1f6b4f; }
.kund-events li::before { content: ''; position: absolute; left: 3.5px; top: 14px; bottom: 0; width: 1px; background: #dfe3dd; }
.kund-events li:last-child::before { display: none; }
.kund-events small { font-size: 11.5px; color: var(--ku-mut); }
.kund-more { font-size: 12.5px; color: #1f6b4f; text-decoration: none; }
.kund-sec { display: flex; flex-direction: column; gap: 12px; }
.kund-sech { display: flex; flex-direction: column; gap: 3px; }
.kund-kick { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ku-mut); font-weight: 500; }
.kund-sech h2 { margin: 0; font-family: Newsreader, ui-serif, Georgia, serif; font-weight: 400; font-size: 22px; }
.kund-sech p { margin: 0; font-size: 13px; color: #4e5751; }
.kund-rows { list-style: none; margin: 0; padding: 0; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #eceee9; }
.kund-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: 'v main val' '. acts acts'; gap: 12px 12px; padding: 16px 16px; border-top: 1px solid #f0f1ee; align-items: center; }
.kund-row:first-child { border-top: 0; }
.kund-row.is-superseded { opacity: 0.72; }
.kund-rv { grid-area: v; align-self: start; line-height: 1.2; font-family: Newsreader, ui-serif, Georgia, serif; font-weight: 400; font-size: 20px; }
.kund-rmain { grid-area: main; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.kund-rtop { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; min-width: 0; }
.kund-rtop small { margin-left: 4px; }
.kund-rmain small { font-size: 12.5px; color: var(--ku-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kund-rmain small .is-warn { color: #8a5a00; }
.kund-rval { grid-area: val; align-self: start; font-family: Newsreader, ui-serif, Georgia, serif; font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kund-racts { grid-area: acts; display: flex; gap: 6px; flex-wrap: wrap; }
.kund-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500; background: #eceee9; color: #4e5751; white-space: nowrap; }
.kund-chip.is-draft { background: #fbf0d9; color: #8a5a00; } .kund-chip.is-sent { background: #e6eef8; color: #2c5585; } .kund-chip.is-accepted { background: #e3f1e8; color: #1f6b4f; } .kund-chip.is-rejected { background: #f7e4e1; color: #9a3a2e; } .kund-chip.is-holds { background: #fff; box-shadow: inset 0 0 0 1px #cfe3d6; color: #1f6b4f; }
.kund-eco { margin: 0; max-width: 592px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #eceee9; padding: 4px 16px; }
.kund-eco div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid #f0f1ee; font-size: 13px; }
.kund-eco div:first-child { border-top: 0; }
.kund-eco dt { color: var(--ku-mut); } .kund-eco dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kund-eco .is-total dt, .kund-eco .is-total dd { color: var(--ku-ink); font-weight: 600; }
.kund-lost summary { list-style: none; cursor: pointer; font-size: 13px; color: #9a3a2e; width: max-content; }
.kund-lost summary::-webkit-details-marker { display: none; }
.kund-lost-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; font-size: 12.5px; color: var(--ku-mut); }
/* Material från Beijer (kunder/_kund_material.html): egen sektion överst i Offert-fliken. */
#material, .kund-mat { margin-bottom: 22px; }
.kund-mstate { display: contents; }
.kund-mstate p { margin: 0; font-size: 13px; }
.kund-mrun { display: none; align-items: center; gap: 6px; color: #2c5585; }
.kund-mrun .material-symbols-outlined { font-size: 16px; }
.kund-mat.is-running .kund-mrun { display: flex; }
.kund-mwarn { color: #8a5a00; }
.kund-mat.is-running .kund-mwarn { display: none; }
.kund-macts { display: flex; gap: 8px; }
.kund-mskel { display: none; }
.kund-mat.is-running:not(:has(.kund-mlist)) .kund-mskel { display: block; }
.kund-mlist > li + li { border-top: 1px solid #f0f1ee; }
.kund-mrow summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 44px; padding: 10px 14px; }
.kund-mrow summary::-webkit-details-marker { display: none; }
.kund-mimg { width: 32px; height: 32px; }
.kund-mimg img { width: 32px; height: 32px; object-fit: contain; border-radius: 6px; }
.kund-mmain { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kund-mname { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kund-mname small { color: var(--ku-mut); font-size: 12px; }
.kund-mmain > small { font-size: 12px; color: var(--ku-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kund-mval { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kund-mval small { font-size: 12px; color: var(--ku-mut); }
.kund-mval b { font-size: 13.5px; font-weight: 500; }
.kund-mmore { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 0 14px 12px 58px; font-size: 12.5px; color: #4e5751; }
.kund-mmore p { margin: 0; }
.kund-mwhy { color: var(--ku-mut); }
.kund-msub { margin: 6px 0 0; font-size: 13px; font-weight: 500; color: #4e5751; }
.kund-mmiss { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; }
.kund-mmiss .qlink { font-size: 12.5px; white-space: nowrap; }
.kund-mlabor summary { cursor: pointer; font-size: 13px; color: var(--ku-mut); width: max-content; max-width: 100%; }
.kund-mlabor ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--ku-mut); }
@media (max-width: 1023px) {
  .kund-mat .kb-btn { height: 44px; }
  .kund-macts .kb-btn { flex: 1; justify-content: center; }
  .kund-mrow summary { grid-template-columns: minmax(0, 1fr) auto; }
  .kund-mimg { display: none; }
  .kund-mname { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .kund-mmore { padding-left: 14px; }
  .kund-mmore .kb-btn { height: 44px; }
}
/* Planering på kundsidan (kunder/_kund_plan.html): remsan delas med Planerings kalenderläge (.pl-kstrip). */
/* Jobbets start överst i Planering (bara med godkänd offert): satt, föreslagen eller inte vald än. */
.kund-start { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid #e3e6e1; }
.kund-start.is-open { border-color: #1f6b4f; box-shadow: 0 0 0 3px #e2efe7; }
.kund-starth { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kund-startm { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kund-startm b { font: 600 14px Inter, sans-serif; color: var(--ku-ink); }
.kund-startm small { font-size: 12px; color: #5d6b61; }
.kund-startm .kund-startp { color: #8a5a00; }
.kund-startf { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.kund-startf .kund-fld input { border: 0; outline: 0; background: transparent; font: 600 13px Inter, sans-serif; color: var(--ku-ink); padding: 0; min-width: 0; }
.kund-starta { display: flex; flex-wrap: wrap; gap: 8px; }
.kund-starthint { flex-basis: 100%; font-size: 11.5px; color: #5d6b61; }
.kund-starta .kb-btn { height: 36px; font-size: 12.5px; padding: 0 13px; }
@media (max-width: 1023px) {
  .kund-startf { flex-direction: column; align-items: stretch; }
  .kund-startf .kund-fld input { font-size: 16px; }
  .kund-starta .kb-btn { height: 44px; flex: 1; justify-content: center; }
}
.kund-planh { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kund-planacts { display: flex; gap: 8px; }
.kund-planacts .kb-btn { height: 36px; font-size: 12.5px; padding: 0 13px; }
.kund-planmsg { margin: 0; font-size: 13px; color: #1f5c45; }
.kund-plan .pl-kstrip { box-shadow: inset 0 0 0 1px #eceee9; background: #fff; }
.kund-bookf { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid #1f6b4f; box-shadow: 0 0 0 3px #e2efe7; margin: 0; }
.kund-bookh { display: flex; align-items: center; gap: 10px; }
.kund-bookh b { flex: 1; font-size: 13.5px; font-weight: 600; }
.kund-x { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #f0f1ee; color: #4e5751; font-size: 16px; cursor: pointer; padding: 0; }
.kund-bookf .kund-seg { flex-wrap: wrap; }
.kund-bookg { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.6fr); gap: 8px; }
.kund-fld select { border: 0; outline: 0; background: transparent; font: 600 13px Inter, sans-serif; color: var(--ku-ink); padding: 0; margin-left: -3px; cursor: pointer; min-width: 0; }
.kund-bookn { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kund-bookl { font-size: 12.5px; color: #3d4540; }
.kund-bookto { flex: 1; font-size: 12px; color: #6b736e; min-width: 0; }
.kund-books { list-style: none; margin: 0; padding: 0; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #eceee9; overflow: hidden; }
.kund-book { display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-top: 1px solid #f0f1ee; }
.kund-book:first-child { border-top: 0; }
.kund-book.is-past { opacity: 0.55; }
.kund-book > i { width: 4px; align-self: stretch; border-radius: 2px; flex: none; }
.kund-bookw { width: 110px; flex: none; display: flex; flex-direction: column; }
.kund-bookw b { font-size: 13px; font-weight: 600; } .kund-bookw small { font-size: 12px; color: #6b736e; }
.kund-bookm { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.kund-bookm b { font-size: 13.5px; font-weight: 500; } .kund-bookm small { font-size: 12px; color: #6b736e; }
.kund-cfchip { margin-top: 4px; font-size: 11.5px; font-weight: 500; padding: 2px 8px; border-radius: 999px; text-decoration: none; }
.kund-cfchip.is-ok { background: #e3f1e8; color: #1f5c45; } .kund-cfchip.is-amb { background: #fbf3e0; color: #7a5200; } .kund-cfchip.is-bad { background: #f7e4e1; color: #9a3a2e; }
.kund-booka { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.kund-booka form { margin: 0; }
.kund-bookempty { padding: 18px; font-size: 13px; color: #6b736e; }
@media (max-width: 1023px) {
  .kund-bookg { grid-template-columns: 1fr 1fr; }
  .kund-bookg .kund-fld:last-child { grid-column: 1 / -1; }
  .kund-plan .pl-kstrip { grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 4px; }
  .kund-plan .pl-kd.is-wk { border-left: 0; }
  .kund-book { flex-wrap: wrap; gap: 8px 12px; }
  .kund-bookw { width: 72px; }
  .kund-booka { width: 100%; justify-content: flex-start; padding-left: 16px; }
  .kund-booka .kb-btn, .kund-planacts .kb-btn, .kund-bookn .kb-btn { height: 44px; }
  .kund-bookf .kund-fld select, .kund-bookf .kund-fld input { font-size: 16px; }
  .kund-chat-in input { font-size: 16px; }
  .kund-chat-in button { width: 44px; height: 44px; }
  .kund-chat-foot { scroll-margin-bottom: 140px; }
  .kund-bookn .kb-btn.p { width: 100%; justify-content: center; }
  .kund-bookf .kund-seg { display: grid; grid-template-columns: repeat(3, 1fr); }
  .kund-bookf .chan-seg button { min-height: 40px; }
  .kund-x { width: 40px; height: 40px; }
  .kund-bookf { scroll-margin: 120px 0 140px; }
  .kund-bookto { flex-basis: 100%; overflow-wrap: anywhere; }
  .kund-cfchip { min-height: 32px; display: inline-flex; align-items: center; }
}
/* ÄTA på kundsidan (kunder/_kund_ata.html). */
.kund-atacomb { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; background: #f3f8f4; font-size: 12.5px; color: #3d4540; margin: 0; }
.kund-atat input[type=checkbox] { width: 16px; height: 16px; accent-color: #1f6b4f; margin: 0; }
.kund-ataoff { padding: 14px 16px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #eceee9; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.kund-ataoff p { margin: 0; font-size: 13px; color: #4e5751; }
.kund-atac { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #eceee9; }
.kund-atac.is-draft { box-shadow: inset 0 0 0 1px #e0b566; background: #fffdf8; }
.kund-atac.is-rejected { opacity: 0.72; }
.kund-atat { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.kund-atat b { font-weight: 600; }
.kund-atat > span:not(.kund-chip):not(.kund-atav) { color: #3d4540; }
.kund-atav { margin-left: auto; font-family: Newsreader, ui-serif, Georgia, serif; font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kund-atam { margin: 0; font-size: 12.5px; color: var(--ku-mut); }
.kund-atawhy { margin: 2px 0 0; padding-left: 10px; border-left: 2px solid #e1e3de; font-size: 12.5px; color: #4e5751; }
.kund-ataa { display: flex; gap: 6px; margin-top: 4px; }
.kund-ataa form { margin: 0; }
.kund-inv { max-width: 592px; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 12.5px; color: var(--ku-mut); }
.kund-inv b { font-weight: 500; color: var(--ku-ink); font-variant-numeric: tabular-nums; }
.kund-inv i { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: #eceee9; overflow: hidden; }
.kund-inv s { display: block; height: 100%; background: #2fa36a; }
.kund-tabtools { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 10px; flex-wrap: wrap; }
.kund-app .pgrid { padding: 0; }
/* Appens flikfragment på kundsidan: tillbakaknapparna till den gamla Mer-listan och Översikten hör inte hemma här. */
.kund-app a[hx-get*="/flik/mer/"], .kund-app a[hx-get*="/flik/oversikt/"] { display: none !important; }
.kund-emptytxt { margin: 0; font-size: 13px; color: var(--ku-mut); }
/* Chatten (prototypen): vit tråd, kunden vänster i grå bubbla, Zimla med grön kant, du höger; svarsfältet längst ned. */
.kund-chat { max-width: 760px; display: flex; flex-direction: column; border-radius: 14px; background: #fff; }
.kund-chat-log { display: flex; flex-direction: column; gap: 18px; padding: 20px 18px 12px; font-size: 13px; line-height: 1.55; }
.kund-chat-m { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.kund-chat-m.is-me { align-items: flex-end; }
.kund-chat-who { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.kund-chat-who b { font-weight: 500; }
.kund-chat-who small { font-size: 11px; color: #8a918c; }
.kund-chat-new { padding: 1px 7px; border-radius: 999px; background: #fbf0d9; color: #8a5a00; font-size: 10.5px; font-weight: 600; }
.kund-chat-txt { max-width: 86%; padding: 10px 14px; border-radius: 12px; background: #f1f2ef; white-space: pre-wrap; overflow-wrap: anywhere; }
.kund-chat-m.is-cust .kund-chat-txt { background: #f6f7f4; box-shadow: inset 0 0 0 1px #e6e8e3; }
.kund-chat-m.is-zimla .kund-chat-txt { padding: 0 0 0 14px; border-radius: 0; background: none; border-left: 2px solid #1f6b4f; }
.kund-chat-m.is-pending .kund-chat-txt { opacity: 0.6; }
.kund-chat-foot { margin: 0; padding: 12px 14px 14px; border-top: 1px solid #eceee9; }
.kund-chat-in { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border: 1px solid #e1e3de; border-radius: 10px; }
.kund-chat-in:focus-within { border-color: #1f6b4f; }
.kund-chat-in input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 6px 0; background: transparent; font: 14px Inter, sans-serif; box-shadow: none; }
.kund-chat-in button { flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: #a3aba5; color: #fff; font-size: 16px; cursor: pointer; }
.kund-chat-in:has(input:not(:placeholder-shown)) button { background: #1f6b4f; }
.kund-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.kund-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #eceee9; margin: 0; }
.kund-card form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.kund-cardh { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #6b736e; font-weight: 600; }
/* Fältet som i prototypen: ram runt etikett och värde, etiketten liten överst i rutan. */
.kund-fld { display: flex; flex-direction: column; gap: 1px; padding: 5px 9px; border: 1px solid #e6e8e3; border-radius: 9px; background: #fff; cursor: text; }
.kund-fld:focus-within { border-color: #1f6b4f; box-shadow: 0 0 0 3px rgba(31, 107, 79, 0.12); }
.kund-fld > span { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #4e5751; }
.kund-fld input, .kund-fld textarea { border: 0; outline: 0; padding: 1px 0; background: transparent; font: 500 13px Inter, sans-serif; color: var(--ku-ink); min-width: 0; width: 100%; box-shadow: none; }
.kund-fld textarea { resize: vertical; }
.kund-fld input::placeholder, .kund-fld textarea::placeholder { font-weight: 400; color: #a3aaa5; }
.kund-rotf .kund-fld i { width: 6px; height: 6px; border-radius: 50%; background: #e0a33a; }
.kund-rotf .kund-fld.is-set i { background: #2fa36a; }
.kund-rpill { font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; border-radius: 999px; padding: 3px 9px; }
.kund-rpill.is-miss { background: #fbf0d9; color: #8a5a00; } .kund-rpill.is-ok { background: #e3f1e8; color: #1f6b4f; } .kund-rpill.is-none { background: #f0f1ee; color: #4e5751; }
.kund-rot .kund-cols { align-items: start; }
.kund-rotnone .is-warn { display: block; margin-top: 4px; color: #8a5a00; }
.kund-seg { display: flex; border-radius: 9px; }
.kund-seg button { flex: 1; padding: 7px 8px; border-radius: 7px; font-size: 12.5px; white-space: nowrap; }
.kund-two { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; }
.kund-two > .kund-fld { min-width: 0; }
.kund-hint { font-size: 11.5px; color: #8a918c; line-height: 1.45; }
.kund-err { margin: 0; font-size: 12.5px; color: #9a3a2e; }
.kund-rotf { display: flex; flex-direction: column; gap: 8px; }
.kund-rotnone { margin: 0; font-size: 12.5px; color: #4e5751; line-height: 1.5; }
.kund-notes { margin-top: 4px; }
.kund-newc { max-width: 520px; gap: 10px; }
.kund-newh { font-size: 14px; font-weight: 600; }
.kund-newc p { margin: 0; font-size: 12.5px; color: #6b736e; line-height: 1.5; }
.kund-newc .kb-btn { align-self: flex-start; height: 36px; padding: 0 16px; }
.kund-intake summary { cursor: pointer; font-size: 13px; color: #4e5751; }
.kund-intake dl { margin: 8px 0 0; display: grid; gap: 6px; font-size: 13px; }
.kund-intake dt { color: var(--ku-mut); }
.kund-intake dd { margin: 0; }
.kund-empty { padding: 28px; border-radius: 18px; background: rgba(250, 251, 249, 0.94); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.kund-avslut { margin-top: 6px; }
.kund-flikpick { display: none; position: relative; }
.kund-flikpick summary { list-style: none; display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 48px; padding: 0 12px; border-radius: 12px; background: #fff; border: 1px solid #e1e4df; cursor: pointer; }
.kund-flikpick summary::-webkit-details-marker { display: none; }
.kund-flikpick summary small { font-size: 11px; color: var(--ku-mut); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kund-flikpick summary b { font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; flex: none; white-space: nowrap; }
.kund-flikpick .kb-menu { left: 0; right: 0; }
.kund-flikpick .kb-menu a > span { display: flex; flex-direction: column; }
.kund-flikpick .kb-menu small { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ku-mut); }
.kund-flikpick .kb-menu a { min-height: 44px; }
@media (max-width: 1180px) {
  .kund-grid { grid-template-columns: minmax(0, 1fr); }
  .kund-bar { flex-direction: column; align-items: flex-start; }
  .kund-pick summary { max-width: none; }
}
@media (max-width: 1023px) {
  .kund-page { padding: 10px 16px calc(120px + env(safe-area-inset-bottom)); gap: 10px; }
  .kund-crumbs .kund-pill, .kund-crumbs b { display: none; }
  .kund-reach .kb-btn { height: 44px; padding: 0 12px; }
  .kund-sms { display: inline-flex; }
  .kund-head { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; min-width: 0; }
  .kund-who { width: 100%; }
  .kund-id { flex: 1; }
  .kund-line { flex-direction: column; }
  .kund-page { overflow-x: clip; }
  .kund-id h1 { font-size: 24px; white-space: normal; }
  .kund-now { align-items: stretch; text-align: left; max-width: none; }
  .kund-now .kb-next { justify-content: flex-start; }
  .kund-acts { justify-content: stretch; flex-direction: column-reverse; width: 100%; }
  .kund-acts > * { width: 100%; }
  .kund-rtop .kund-chip.is-holds { display: none; }
  .kund-acts .kb-btn { width: 100%; height: 44px; justify-content: center; }
  .kund-acts form .kb-btn { background: none; border: 0; color: #1f6b4f; height: 36px; }
  .kund-bar { position: sticky; top: 55px; z-index: 5; gap: 8px; flex-direction: row; margin-top: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .kund-head { border-radius: 18px; }
  .kund-pick summary { min-height: 48px; padding: 0 12px; border-radius: 12px; background: #fff; border: 1px solid #e1e4df; }
  .kund-pick-b { border: 0; padding: 0; background: none; max-width: none; min-width: 0; }
  .kund-thumb { width: 48px; height: 48px; padding: 0; background: none; }
  .kund-thumb img { display: none; }
  .kund-thumb .kund-av { position: static; box-shadow: none; width: 48px; height: 48px; }
  .kund-bar > * { flex: 1 1 0; min-width: 0; }
  .kund-tabs { display: none; }
  .kund-flikpick { display: block; }
  .kund-pick summary { min-height: 48px; }
  .kund-pick-k { display: none; }
  .kund-main, .kund-aside { padding: 14px; }
  .kund-rot .kund-cols { gap: 0; }
  .kund-rot .kund-card { background: none; box-shadow: none; padding: 0; }
  .kund-rot .kund-card + .kund-card { margin-top: 16px; padding-top: 16px; border-top: 1px solid #eceee9; }
  .kund-rot .kund-fld { padding: 7px 10px; min-height: 48px; scroll-margin-bottom: 140px; }
  .kund-rot .kund-fld input, .kund-rot .kund-fld textarea { font-size: 16px; }
  .kund-rot .kund-seg button { min-height: 40px; }
  .kund-newc .kb-btn { width: 100%; height: 44px; justify-content: center; }
  .kund-row { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: 'v main val' 'acts acts acts'; }
  .kund-racts .kb-btn { min-height: 40px; }
  .kund-events { max-height: 220px; overflow: hidden; }
}

/* ===== Team (L4) – Kunders skal och tabell; personpanelen dockad till höger (sheet på telefon). ===== */
.tm-page { height: auto; min-height: 100dvh; padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
.tm-statbtn { border: 0; background: transparent; text-align: left; cursor: pointer; font-family: inherit; }
.tm-statbtn:disabled { cursor: default; }
.tm-statbtn:not(:disabled):hover .v { color: #1f6b4f; }
.tm-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tm-seg button span { margin-left: 4px; color: var(--ku-mut); font-size: 11px; }
.tm-t tr.tm-grp td { height: 34px; background: #fafbf9; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ku-mut); font-weight: 500; }
.tm-t tr.tm-row { cursor: pointer; outline: none; }
.tm-t tr.tm-row:hover td, .tm-t tr.tm-row:focus-visible td { background: #f3f8f4; }
.tm-t tr.tm-row.is-sel td { background: #eef6f1; }
.tm-t tr.tm-row.is-sel td:first-child { box-shadow: inset 3px 0 0 #1f6b4f; }
.tm-t tr.tm-row.is-inactive { opacity: 0.6; }
.tm-av { background: #1f6b4f; }
.tm-av.is-ue { background: #fff; color: #3d4540; box-shadow: inset 0 0 0 1.5px #cfd4cf; }
.tm-av.is-owner { background: #1d2420; }
.tm-av.is-off { background: #cfd4cf; color: #fff; box-shadow: none; }
.tm-row .ku-who b { font-weight: 500; }
.tm-away { font-style: normal; color: #8a5a00; }
.tm-trades { white-space: nowrap; }
.tm-trade { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; margin-right: 4px; border-radius: 999px; background: #eef1ec; font-size: 11.5px; color: #3d4540; }
.tm-muted { color: #8a918c; font-size: 12.5px; margin: 0; }
.tm-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 500; background: #f0f1ee; color: #4e5751; white-space: nowrap; }
.tm-chip.is-linked, .tm-chip.is-owner { background: #e3f1e8; color: #1f5c45; }
.tm-chip.is-invited { background: #fbf3e0; color: #7a5200; }
.tm-chip-sub { display: block; font-size: 11.5px; color: var(--ku-mut); margin-top: 2px; }
.tm-next b { display: block; font-weight: 500; }
.tm-next small { font-size: 12px; color: var(--ku-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; display: block; }
.tm-act { text-align: right; white-space: nowrap; }
.tm-inact-toggle { border: 0; background: none; font: inherit; color: var(--ku-mut); cursor: pointer; letter-spacing: 0.1em; text-transform: uppercase; font-size: 11px; }
.tm-side { position: fixed; top: 68px; right: 16px; bottom: 16px; width: 380px; z-index: 40; overflow-y: auto; background: #fff; border-radius: 18px; box-shadow: 0 30px 60px -30px rgba(20, 40, 30, 0.5), 0 0 0 1px rgba(29, 36, 32, 0.06); padding: 18px 18px 110px; animation: tmSideIn 220ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.tm-side[hidden] { display: none; }
@keyframes tmSideIn { from { opacity: 0; transform: translateX(16px); } }
@media (prefers-reduced-motion: reduce) { .tm-side { animation: none; } }
html.tm-side-open .tm-page { padding-right: 396px; }
html.tm-side-open .tm-next-h, html.tm-side-open .tm-next, html.tm-side-open .tm-act { display: none; }
.tm-side-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; display: grid; place-items: center; color: #4e5751; }
.tm-side-x:hover { background: #f1f2ef; }
.tm-panel { display: flex; flex-direction: column; gap: 14px; }
.tm-ph { display: flex; align-items: center; gap: 12px; padding-right: 36px; }
.tm-ph .tm-av { width: 42px; height: 42px; font-size: 14px; }
.tm-ph b { display: block; font-size: 16px; font-weight: 600; }
.tm-ph small { display: block; font-size: 12.5px; color: var(--ku-mut); }
.tm-acct { padding: 12px; border-radius: 12px; background: #f7f8f5; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--ku-mut); }
.tm-acct p { margin: 0; color: #4e5751; }
.tm-acct-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.tm-sec { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.tm-h { display: flex; align-items: center; justify-content: space-between; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ku-mut); font-weight: 500; }
.tm-link { text-transform: none; letter-spacing: 0; font-size: 12px; color: #1f6b4f; text-decoration: none; }
.tm-levels label { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; border: 1px solid #eceee9; cursor: pointer; margin-bottom: 6px; }
.tm-levels label:has(input:checked) { border-color: #1f6b4f; background: #f3f8f4; }
.tm-levels b { display: block; font-size: 13px; font-weight: 500; }
.tm-levels small { display: block; font-size: 12px; color: var(--ku-mut); }
.tm-sees { margin: 0; font-size: 12.5px; }
.tm-sees div { display: grid; grid-template-columns: 64px 1fr; gap: 8px; padding: 4px 0; }
.tm-sees dt { color: var(--ku-mut); } .tm-sees dd { margin: 0; }
.tm-fields label, .tm-add label, .tm-fl { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--ku-mut); position: relative; }
.tm-fields input, .tm-add input:not([type=checkbox]), .tm-fl input, .tm-wo select, .tm-wo input[type=date], .tm-wo textarea, .tm-absrange select, .tm-absrange input { border: 1px solid #dfe2dd; border-radius: 9px; padding: 8px 10px; font: 14px Inter, sans-serif; color: var(--ku-ink); background: #fff; min-width: 0; }
.tm-call { position: absolute; right: 6px; bottom: 5px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: #1f6b4f; }
.tm-cans { display: flex; flex-wrap: wrap; gap: 6px; }
.tm-can { position: relative; }
.tm-can input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tm-can span { display: inline-flex; align-items: center; min-height: 32px; padding: 0 11px; border-radius: 999px; border: 1px solid #dfe2dd; background: #fff; font-size: 12.5px; color: #3d4540; }
.tm-can input:checked + span, .tm-can.is-on span { background: #e8f3ec; border-color: #9cc7ae; color: #1f5c45; }
.tm-can input:focus-visible + span { box-shadow: 0 0 0 2px #1f6b4f; }
.tm-cap { display: flex; align-items: center; gap: 12px; }
.tm-cap button { width: 36px; height: 36px; border-radius: 9px; border: 1px solid #dfe2dd; background: #fff; font-size: 18px; cursor: pointer; }
.tm-cap button:disabled { opacity: 0.4; cursor: default; }
.tm-abs { display: flex; flex-wrap: wrap; gap: 6px; }
.tm-absc { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px 0 10px; border-radius: 999px; background: #fbf3e0; color: #7a5200; font-size: 12.5px; }
.tm-absc button { border: 0; background: none; cursor: pointer; width: 22px; height: 22px; border-radius: 50%; color: inherit; }
.tm-absbtns { display: flex; flex-wrap: wrap; gap: 6px; }
.tm-absmore summary { list-style: none; min-height: 40px; display: flex; align-items: center; cursor: pointer; }
.tm-absl { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: #6b736d; }
.tm-absmore summary::-webkit-details-marker { display: none; }
.tm-absrange { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tm-li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid #f0f1ee; font-size: 13px; }
.tm-li b { font-weight: 500; display: block; }
.tm-li small { font-size: 12px; color: var(--ku-mut); }
.tm-li-a { display: block; color: inherit; text-decoration: none; } .tm-li-a b { display: inline; } .tm-li-a:hover b { text-decoration: underline; }
.tm-li-d { flex: none; font-size: 12px; color: var(--ku-mut); white-space: nowrap; }
.tm-danger { border-top: 1px solid #f0f1ee; padding-top: 12px; }
.tm-inact { align-self: flex-start; border: 0; background: none; color: #9a3a2e; font: 500 13px Inter, sans-serif; cursor: pointer; padding: 0; }
.tm-dlg { width: min(600px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); }
.tm-dlg .npd-f { max-height: calc(100dvh - 48px); overflow-y: auto; }
@media (max-width: 640px) { .tm-dlg { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 18px 18px 0 0; } }
.tm-kind { align-self: flex-start; }
.tm-addf { display: flex; flex-direction: column; gap: 10px; }
.tm-paste input { border-style: dashed !important; }
.tm-dup { margin: 0; padding: 8px 10px; border-radius: 9px; background: #fbf3e0; color: #7a5200; font-size: 13px; }
.tm-seat { margin: 0; font-size: 12.5px; color: #1f5c45; }
.tm-check { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.tm-wo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tm-wo-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--ku-mut); }
.tm-wo-facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 12.5px; }
.tm-wo-facts dt { color: var(--ku-mut); font-size: 11.5px; } .tm-wo-facts dd { margin: 0; }
.tm-todo { list-style: none; margin: 0; padding: 0; }
.tm-todo li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; padding: 6px 0; border-top: 1px solid #f0f1ee; font-size: 13px; }
.tm-todo small { color: var(--ku-mut); }
.tm-qty { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tm-wd-h { display: flex; flex-direction: column; gap: 1px; }
.tm-wd-h small { font-size: 12px; }
.tm-todo li.tm-wd-room { display: block; padding: 8px 0 2px; border-top: 0; font-size: 11.5px; color: var(--ku-mut); }
.tm-todo li.tm-wd-room + li { border-top: 0; }
.tm-wd-ata { padding: 0 5px; border-radius: 5px; background: #fbf3e0; color: #7a5200; font-size: 11px; }
.tm-wd-all { align-self: flex-start; font-size: 13px; color: #1f6b4f; text-decoration: none; }
.tm-wd-all:hover { text-decoration: underline; }
.chan-seg label { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 6px; font-size: 12px; cursor: pointer; }
.chan-seg label:has(input:checked) { background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.chan-seg label input { margin: 0; accent-color: #1f6b4f; }
.chan-seg label:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
.soon-wrap { position: relative; display: inline-flex; }
.soon-badge { position: absolute; right: -8px; bottom: -8px; transform: rotate(-5deg); background: #1d2420; color: #fff; font: 600 8px/1 Inter, sans-serif; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 4px; border-radius: 4px; }
@media (max-width: 1180px) { .tm-next-h, .tm-next { display: none; } }
@media (max-width: 1023px) {
  html.tm-side-open .tm-page { padding-right: 16px; }
  html.tm-side-open [data-zimla-mobile-dock] { visibility: hidden; }
  .tm-side { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 92dvh; border-radius: 18px 18px 0 0; padding: 18px 16px calc(24px + env(safe-area-inset-bottom)); z-index: 60; animation: tmSheetIn 240ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  @keyframes tmSheetIn { from { transform: translateY(24px); opacity: 0; } }
  .tm-t thead, .tm-t td:nth-child(2), .tm-t td:nth-child(3), .tm-t .tm-act { display: none; }
  .tm-t { table-layout: fixed; width: 100%; }
  .tm-t .ku-who { min-width: 0; }
  .tm-t .ku-who :is(b, small) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tm-t tr.tm-row td { height: 64px; }
  .tm-act .kb-btn { min-height: 40px; }
  .tm-tools .tm-seg { width: 100%; overflow-x: auto; }
  /* Mobilloopen varv 19 (D5): urvalet som Kunders chips (36 px, valt fyllt) i stället för datorns segment (25 px). */
  .tm-tools .tm-seg { gap: 6px; margin-bottom: 8px; padding: 0; border-radius: 0; background: transparent; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
  .tm-tools .tm-seg::-webkit-scrollbar { display: none; }
  .tm-tools .tm-seg button { flex: none; height: 36px; padding: 0 12px; border: 1px solid var(--zm-line, #e3e6e1); border-radius: 999px; background: #fff; box-shadow: none; font: 500 13px Inter, sans-serif; color: var(--zm-ink, #1d2420); }
  .tm-tools .tm-seg button span { margin-left: 4px; font-size: 12px; color: var(--zm-muted, #6b736e); }
  .tm-tools .tm-seg button[aria-checked="true"] { border-color: var(--zm-ink, #1d2420); background: var(--zm-ink, #1d2420); color: #fff; box-shadow: none; }
  .tm-tools .tm-seg button[aria-checked="true"] span { color: rgba(255, 255, 255, 0.75); }
  .tm-wo-grid, .tm-wo-facts { grid-template-columns: 1fr; }
}
.tm-acct > .tm-chip { justify-self: start; align-self: flex-start; width: max-content; }
.tm-check input { appearance: auto; width: 16px; height: 16px; margin: 0; accent-color: #1f6b4f; }
.kund-ev-note { display: block; margin-top: 3px; padding-left: 8px; border-left: 2px solid #e1e3de; color: #4e5751; font-size: 12.5px; quotes: none; }
/* Kunder på telefon: stegen som en fast rad chips (ett steg i taget). */
.kb-mchips { display: none; }
@media (max-width: 1023px) {
  .kb-mchips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; position: sticky; top: 55px; z-index: 6; margin: 0 -16px; padding: 6px 16px; background: rgba(246, 249, 247, 0.96); }
  .kb-mchips::-webkit-scrollbar { display: none; }
  .kb-mchips button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid #dfe2dd; border-radius: 999px; background: #fff; font: 500 13px Inter, sans-serif; color: #1d2420; cursor: pointer; }
  .kb-mchips button i { width: 8px; height: 8px; border-radius: 50%; }
  .kb-mchips button b { font-weight: 500; color: #6b736e; font-size: 12px; }
  .kb-mchips button[aria-pressed="true"] { background: #1d2420; border-color: #1d2420; color: #fff; }
  .kb-mchips button[aria-pressed="true"] b { color: rgba(255, 255, 255, 0.75); }
  .ku-page .kb-col.is-mout, .ku-page .kb-col.is-mout[hidden] { display: none !important; }
}

/* Kunder får hela bredden (prototypen: upp till 1640 px) – skalets 1236 px-tak kapade Klart och Förlorad. */
@media (min-width: 1024px) {
  html.zimla-room:not(.zimla-ai-start):not(.zimla-room-covered) #zimla-page-content:has(#kunder, #team, #kund, .tid-page) { max-width: none; padding: 0; }  /* .tid-page: Teams Idag, Pass, Timmar som Personal */
}

/* Telefon: kortets meny är ett bottensheet med stora rader (B17). */
@media (max-width: 1023px) {
  .kb-more { width: 44px; height: 44px; margin: -10px -10px -6px 0; }
  .kb-menu[popover] { left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto; min-width: 0; border-radius: 18px 18px 0 0; padding: 10px 8px calc(12px + env(safe-area-inset-bottom)); }
  .kb-menu[popover]::backdrop { background: rgba(20, 30, 25, 0.28); }
  .kb-menu[popover] > a, .kb-menu[popover] > button, .kb-menu[popover] form > button { min-height: 44px; font-size: 15px; }
  .kb-confirm .kb-btn { min-height: 44px; }
  .kb-confirm .chan-seg button { min-height: 36px; }
  .kb-card { scroll-margin: 70px 0 130px; }
}
/* K2: Kund saknas sägs en gång (namnet dämpat, inte brunt och fett). */
.kb-nm b.is-missing, .ku-who a.is-missing { color: var(--ku-mut); font-weight: 500; }
/* Tabellens stegstapel: fem segment, klara gröna, aktuellt i stegets färg. */
.ku-steps { display: flex; gap: 2px; margin-top: 5px; width: 96px; }
.ku-steps i { flex: 1; height: 3px; border-radius: 2px; background: #e3e6e1; }
.ku-steps i.is-done { background: #1f6b4f; }
.ku-steps i.is-now { background: var(--kc, #1f6b4f); }
.ku-steps.is-lost i.is-now { background: #c86b5d; }
/* K2: tavlan fyller höjden under skalets topprad, listorna scrollar i kolumnerna, composern täcker inget kort. */
@media (min-width: 1024px) {
  .ku-page:not([data-view="tabell"]) { height: calc(100dvh - var(--zimla-app-topbar-block, 2.95rem) - var(--zimla-app-topbar-gap, 0.55rem)); padding-top: 10px; }
  #kunder-main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .kb-list { padding-bottom: calc(var(--composer-zone, 96px) + 16px); }
  .ku-t { margin-bottom: calc(var(--composer-zone, 96px) + 16px); }
}
.kb-barrow { display: flex; align-items: center; gap: 16px; }
.kb-barrow .kb-bar { flex: 1; }
.kb-barrow .kb-legend { flex: none; flex-wrap: nowrap; }
@media (max-width: 1320px) { .kb-tip { display: none; } .kb-barrow .kb-priced { display: none; } }
.kb-col, .kb-colmin { background: rgba(236, 239, 234, 0.94); }
.kb-stats { background: rgba(247, 247, 244, 0.96); }
/* K2 telefon: en rad överst – Väntar på dig som första chip, ingen tabellväxel eller översiktsplatta. */
@media (max-width: 1023px) {
  .ku-head .kb-seg, .ku-page .kb-stats { display: none; }
  .kb-mchips button { height: 40px; }
  .kb-mchips .kb-matt { background: #fbf0d9; border-color: #efd9a8; color: #7a5200; }
  .kb-mchips .kb-matt b { color: #7a5200; font-size: 14px; }
  .kb-mchips .kb-matt[aria-pressed="true"] { background: #7a5200; border-color: #7a5200; color: #fff; }
  .kb-mchips .kb-matt[aria-pressed="true"] b { color: #fff; }
}
@media (min-width: 1024px) { .kb-mchips { display: none !important; } }
/* Kunder och Planering (tidslinje + kalender): prototypens vägg (mintgrön vägg, växter, tavla) skarp, under en
   tunn ljus grönvit slöja (uppmätt i ägarens referens: 84–91 % täckning). Styrs av sidans innehåll (:has), så
   bakgrunden följer med boostad navigering utan att skalet ritas om. */
.zimla-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  background:
    linear-gradient(180deg, rgba(246, 249, 247, 0.89) 0%, rgba(246, 249, 247, 0.84) 40%, rgba(246, 249, 247, 0.91) 100%),
    url("../images/studio/studio-wall.2fce6e6b6d0d.webp?v=1") center / cover no-repeat;
}
/* Bakgrunden glider in och ut vid sidbyte i stället för att hoppa i ljushet. */
html:has(#kunder, #planering, #calendar-shell, #team, .tid-page) .zimla-scene::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .zimla-scene::after { transition: none; } }

/* Bilagor (prototypen): rubrik + Lägg till fil, filterchips + räknare, vit lista med typbricka, namn/källa och brytaren. */
.kund-files__head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kund-files__head h2 { font-size: 27px; letter-spacing: -0.01em; }
.kund-files__add { margin: 0; }
.kund-files__add label { height: 38px; padding: 0 14px; font-size: 12.5px; cursor: pointer; }
.kund-files__add label:focus-within { outline: 2px solid #1f6b4f; outline-offset: 2px; }
.kund-files__err { margin: 0; font-size: 13px; color: #9a3a2e; }
.kund-files__undo { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 12px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #eceee9; font-size: 12.5px; color: #4e5751; }
.kund-files__undo button { border: 0; background: none; padding: 0; font: 600 12.5px Inter, sans-serif; color: #1f6b4f; cursor: pointer; }
.kund-files__bar { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.kund-files__chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.kund-files__chips button { border: 1px solid #dfe3dd; border-radius: 999px; background: #fff; color: var(--ku-ink); padding: 6px 12px; font: 500 12.5px Inter, sans-serif; cursor: pointer; white-space: nowrap; }
.kund-files__chips button[aria-pressed="true"] { background: #1d2420; border-color: #1d2420; color: #fff; }
.kund-files__note { font-size: 12px; color: var(--ku-mut); white-space: nowrap; }
.kund-files__list { list-style: none; margin: 0; padding: 0; border-radius: 14px; background: #fff; overflow: hidden; }
.kund-files__row { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 10px 14px; border-bottom: 1px solid #f0f1ee; }
.kund-files__row:last-child { border-bottom: 0; }
.kund-files__kind { flex: none; width: 38px; height: 28px; border-radius: 7px; background: #eceee9; color: #4e5751; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.kund-files__kind.is-pdf { background: #f7e4e1; color: #9a3a2e; }
.kund-files__kind.is-jpg, .kund-files__kind.is-png, .kund-files__kind.is-heic, .kund-files__kind.is-webp { background: #e6eef8; color: #2c5585; }
.kund-files__name { flex: 1; min-width: 0; color: var(--ku-ink); text-decoration: none; display: flex; flex-direction: column; gap: 1px; }
.kund-files__name:hover b { color: #1f6b4f; }
.kund-files__name b { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kund-files__name small { font-size: 11.5px; color: var(--ku-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kund-files__tog { flex: none; display: flex; align-items: center; gap: 8px; font-size: 12px; color: #4e5751; white-space: nowrap; }
.kund-files__fixed { flex: none; font-size: 11.5px; color: var(--ku-mut); white-space: nowrap; }
.kund-switch { flex: none; position: relative; width: 36px; height: 21px; padding: 0; border: 0; border-radius: 999px; background: #d9ddd8; cursor: pointer; transition: background 160ms ease; }
.kund-switch::before { content: ''; position: absolute; inset: -12px -4px; } /* 44 px träffyta */
.kund-switch i { position: absolute; top: 2.5px; left: 2.5px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform 160ms ease; }
.kund-switch[aria-checked="true"] { background: #1f6b4f; }
.kund-switch[aria-checked="true"] i { transform: translateX(15px); }
.kund-switch:disabled { opacity: 0.5; cursor: not-allowed; }
.kund-switch:focus-visible { outline: 2px solid #1f6b4f; outline-offset: 2px; }
.kund-files__more { flex: none; width: 28px; position: relative; }
.kund-files__more summary { list-style: none; cursor: pointer; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--ku-mut); }
.kund-files__more summary::-webkit-details-marker { display: none; }
.kund-files__more summary:hover { background: #f3f4f1; color: var(--ku-ink); }
.kund-files__more form { position: absolute; right: 0; top: 32px; z-index: 5; margin: 0; padding: 4px; border-radius: 10px; background: #fff; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.2), inset 0 0 0 1px #eceee9; }
.kund-files__more form button { border: 0; background: none; padding: 8px 10px; border-radius: 7px; font: 500 12.5px Inter, sans-serif; color: #9a3a2e; cursor: pointer; white-space: nowrap; }
.kund-files__more form button:hover { background: #f7e4e1; }
.kund-files__empty { margin: 0; padding: 18px; border-radius: 14px; background: #fff; font-size: 13px; color: var(--ku-mut); }
@media (prefers-reduced-motion: reduce) { .kund-switch, .kund-switch i { transition: none; } }
@media (max-width: 640px) {
  .kund-files__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; flex-basis: 100%; }
  .kund-files__note { order: 2; }
  .kund-files__tog [data-tog-label] { display: none; }
}

/* D3 (mobilloopen 2026-10-10): Kunder i Hems formspråk på telefon – variablerna --zm-* (zimla-start.css, M1). Allt
   här gäller bara ≤ 1023 px, sidhuvudet under .ku-page (Kunder, Team – inte Planerings platta) och korten (.kb-card). */
@media (max-width: 1023px) {
  .ku-page { padding-inline: 4px; } /* skalet har 16 px – tillsammans --zm-gutter (20) */
  .ku-page .ku-title { min-width: 0; }
  .ku-page .ku-title h1 { font: var(--zm-title-font); letter-spacing: var(--zm-title-tracking); color: var(--zm-ink); }
  .ku-page .ku-title p { margin-top: 6px; }
  .ku-page .ku-new { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: var(--zm-primary-radius); }
  .ku-page .ku-search { height: 48px; border: 0; border-radius: var(--zm-card-radius); background: var(--zm-card); box-shadow: var(--zm-card-shadow); }
  /* Chipsen är fasta: helt täckande bakgrund kant till kant, annars syns raderna igenom. Uttoningen visar att raden skrollar. */
  .kb-mchips { margin: 0 calc(-1 * var(--zm-gutter)); padding: 6px var(--zm-gutter); background: var(--zm-bg); }
  .kb-mchips::after { content: ''; position: sticky; right: calc(-1 * var(--zm-gutter)); flex: none; width: 28px; margin-left: -28px; pointer-events: none; background: linear-gradient(90deg, rgba(244, 245, 241, 0), var(--zm-bg)); }
  .kb-mchips button { border-color: var(--zm-line); }
  /* Stegen som Hems sektioner: etikett, antal och summa – inget tonat band, inget kort i kort. */
  .kb-col, .kb-col.is-forlorad { background: transparent; box-shadow: none; }
  .kb-board { gap: var(--zm-gap); }
  .kb-head { min-height: 0; padding: 0 0 10px; gap: 8px; }
  .kb-head .nm { font-size: var(--zm-label-size); font-weight: 600; letter-spacing: var(--zm-label-tracking); text-transform: uppercase; color: var(--zm-muted); }
  .kb-head .n { min-width: 0; height: auto; padding: 0; background: none; font-size: var(--zm-label-size); color: var(--zm-faint); }
  .kb-head .sum { font-size: 13px; color: var(--zm-muted); }
  .kb-head .ib, .kb-add { display: none; } /* ett Nytt jobb per sida: rubrikens + */
  /* Tabellvyn (via "N äldre i Tabell") får vyväljaren tillbaka – annars fanns ingen väg till stegen. */
  .ku-page[data-view="tabell"] .ku-head .kb-seg { display: flex; order: 5; width: 100%; }
  .ku-page[data-view="tabell"] .ku-head .kb-seg button { flex: 1; justify-content: center; min-height: 40px; }
  .kb-list { gap: var(--zm-list-gap); }
  .kb-empty { margin: 0; padding: 2px 0 0; border: 0; background: none; font-size: 13px; color: var(--zm-faint); text-align: left; }
  /* Jobbet som en rad som Hems projektrader: avatar | titel + jobb (hela bredden) | ⋯; taggar | belopp; status i full bredd.
     Namnet får plats även på 320 px – beloppet står inte bredvid det. */
  .kb-card { display: grid; grid-template-columns: var(--zm-icon) minmax(0, 1fr) auto 24px; column-gap: 12px; row-gap: 4px; align-items: start;
    min-height: var(--zm-row-min); padding: 12px; border-radius: var(--zm-card-radius); background: var(--zm-card); box-shadow: var(--zm-card-shadow); scroll-margin: 120px 0 130px; }
  .kb-card.is-att::before { display: none; }
  .kb-card:active { background: #f7f8f5; }
  .kb-card .kb-top, .kb-card .kb-foot { display: contents; }
  .kb-card .kb-av { grid-column: 1; grid-row: 1 / span 2; width: var(--zm-icon); height: var(--zm-icon); font-size: 12.5px; }
  .kb-card .kb-nm { grid-column: 2 / 4; grid-row: 1; }
  /* Hela raden är länken (tumme): ⋯, knappen och flyttens bekräftelse ligger ovanpå. */
  .kb-card .kb-nm::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
  .kb-card .kb-act, .kb-card .kb-confirm, .kb-card .kb-more { position: relative; z-index: 1; }
  .kb-card .kb-nm b { font-size: 16px; font-weight: 600; color: var(--zm-ink); line-height: 1.35; }
  .kb-card .kb-nm span { font-size: 13px; color: var(--zm-muted); margin-top: 1px; }
  /* Utan kund: jobbet är titeln – att kunden saknas säger "?"-avataren och statusraden (K2: en gång). */
  .kb-card .kb-nm b.is-missing { display: none; }
  .kb-card .kb-nm b.is-missing + span { font-size: 16px; font-weight: 600; color: var(--zm-ink); line-height: 1.35; margin-top: 0; }
  .kb-card .kb-val { grid-column: 3 / -1; grid-row: 2; align-self: center; font: 600 15px/1.35 Inter, sans-serif; color: var(--zm-ink); white-space: nowrap; }
  .kb-card .kb-more { grid-column: 4; grid-row: 1; width: 44px; height: 44px; margin: -10px -10px -10px; } /* 24 px i griden, 44 px tumme */
  /* Täthet (varv 42): nästa steg i hela kortets bredd (under avataren) – de vanliga raderna ryms på en rad, längre får två. */
  .kb-card .kb-next { grid-column: 1 / -1; grid-row: 3; font-size: 13px; line-height: 1.4; }
  .kb-card .kb-next > span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .kb-card .kb-next .material-symbols-outlined { font-size: 15px; }
  .kb-card .kb-status { grid-column: 1 / -1; grid-row: 3; font-size: 13px; }
  .kb-card .kb-status b { font-size: 13.5px; }
  .kb-card .kb-time { grid-column: 1 / -1; grid-row: 4; font-size: 12px; }
  .kund-now .kb-next > span:last-child { display: block; -webkit-line-clamp: none; overflow: visible; } /* jobbsidan visar hela nästa steg */
  .kb-card .kb-metas { grid-column: 2; grid-row: 2; align-self: center; font-size: 12.5px; color: var(--zm-muted); }
  .kb-card .kb-act { grid-column: 2 / -1; display: none; }
  /* Väntar på dig valt: där är knappen poängen – den syns (en per rad, 44 px). */
  .ku-page:has(.kb-matt[aria-pressed="true"]) .kb-card .kb-act { display: inline-flex; justify-self: start; min-height: 40px; border-radius: var(--zm-primary-radius); font-size: 13px; }
  .kb-card .kb-confirm { grid-column: 1 / -1; margin: 4px -12px -12px; border-radius: 0 0 var(--zm-card-radius) var(--zm-card-radius); }
  .kb-menu[popover]:popover-open { animation: tmSheetIn 240ms cubic-bezier(0.2, 0.8, 0.2, 1); }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) { .kb-menu[popover]:popover-open { animation: none; } }
/* Platta: raderna blir inte en meter breda. */
@media (min-width: 768px) and (max-width: 1023px) { .ku-page#kunder { max-width: 760px; margin-inline: auto; } }

/* D4 (mobilloopen 2026-10-10): kundsidan i Hems formspråk på telefon. Vita kort direkt på den släta bakgrunden (inget
   kort i kort), en etikettstil, Outfit/Inter i stället för Newsreader, en täckande fast rad. Allt under .kund-page och
   ≤ 1023 px – klasserna delas med Kunder-tavlan, Planering och appens fragment. */
@media (max-width: 1023px) {
  .kund-page { padding-inline: 4px; } /* skalets 16 + 4 = --zm-gutter */
  .kund-page .kund-wrap, .kund-page .kund-grid { gap: var(--zm-gap); }
  /* Tillbaka: "‹ Kunder", 44 px, utan hängande snedstreck. */
  .kund-page .kund-crumbs > span[aria-hidden] { display: none; }
  .kund-page .kund-crumbs > a { display: inline-flex; align-items: center; min-height: 44px; padding-right: 8px; font-size: 14px; font-weight: 600; color: var(--zm-green); text-decoration: none; }
  .kund-page .kund-crumbs > a::before { content: 'chevron_left'; font-family: 'Material Symbols Outlined'; font-size: 20px; margin-left: -4px; }
  .kund-page .kund-reach .kb-btn { border-color: var(--zm-line); border-radius: var(--zm-primary-radius); }
  /* Huvudkortet: vitt Hem-kort. */
  .kund-page .kund-head { padding: 16px; background: var(--zm-card); border-radius: var(--zm-card-radius); box-shadow: var(--zm-card-shadow); }
  .kund-page .kund-who { gap: 12px; }
  .kund-page .kund-thumb, .kund-page .kund-thumb .kund-av { width: var(--zm-thumb); height: var(--zm-thumb); }
  .kund-page .kund-id h1 { font: 700 26px/1.15 Outfit, Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: var(--zm-title-tracking); }
  .kund-page .kund-id h1:not(.is-missing) { color: var(--zm-ink); }
  .kund-page .kund-line { font-size: 13px; color: var(--zm-muted); }
  .kund-page .kund-value { font-size: 26px; }
  .kund-page .kund-pname { display: none; } /* jobbet står i den fasta radens väljare */
  /* Utan kund: en väg till Lägg till kund – primärknappen. */
  .kund-page .kund-head:has(.kund-acts .kb-btn.p) .kund-add { display: none; }
  .kund-page .kund-acts .kb-btn { border-radius: var(--zm-primary-radius); }
  /* Formulärknappar i huvudet (Ändra offerten, + Ny ÄTA): sekundär som textlänk – men 44 px; som primär grön. */
  .kund-page .kund-acts form .kb-btn { height: 44px; }
  .kund-page .kund-acts form .kb-btn.p { background: var(--zm-green); border: 1px solid var(--zm-green); color: #fff; }
  /* En etikettstil. */
  .kund-page .kund-kicker, .kund-page .kund-kick, .kund-page .kund-cardh, .kund-page .kund-aside-h {
    font-size: var(--zm-label-size); font-weight: 600; letter-spacing: var(--zm-label-tracking); text-transform: uppercase; color: var(--zm-muted); }
  /* Den fasta raden: helt täckande, väljarna visar alltid sin etikett och kortar värdet. */
  .kund-page .kund-bar { top: 56px; z-index: 6; padding: 6px 0; margin-inline: -4px; padding-inline: 4px; background: var(--zm-bg); }
  .kund-page .kund-pick summary, .kund-page .kund-flikpick summary { min-height: 48px; border: 0; border-radius: var(--zm-card-radius); background: var(--zm-card); box-shadow: var(--zm-card-shadow); }
  /* Etiketten (Projekt / fliken) liten överst, värdet under med ellips, pilen till höger – samma i båda väljarna. */
  .kund-page .kund-pick summary, .kund-page .kund-flikpick summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; column-gap: 6px; row-gap: 1px; padding: 6px 12px; }
  .kund-page .kund-pick-k, .kund-page .kund-flikpick summary small { display: block; grid-column: 1; grid-row: 1; font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--zm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kund-page .kund-pick-b { grid-column: 1 / -1; grid-row: 2; min-width: 0; display: flex; align-items: center; gap: 4px; }
  .kund-page .kund-pick-b b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
  .kund-page .kund-pick-b .material-symbols-outlined { flex: none; }
  .kund-page .kund-flikpick summary b { grid-column: 1; grid-row: 2; min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
  .kund-page .kund-flikpick summary b .kund-dot { display: inline-block; margin-right: 6px; }
  .kund-page .kund-flikpick summary > .material-symbols-outlined { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  /* Projekt- och flikmenyn: ark nedifrån över dockan (raden lyfts medan en meny är öppen), bakgrunden tonas. */
  .kund-page .kund-bar:has(details[open]) { z-index: 60; }
  html:has(#kund .kund-bar details[open]) [data-zimla-mobile-dock] { display: none; } /* som Planeringens ark: dockan viker undan */
  .kund-page .kund-bar details[open]::before { content: ''; position: fixed; inset: 0; z-index: 1; background: rgba(20, 30, 25, 0.28); cursor: pointer; } /* iOS ger bara click på det som ser klickbart ut */
  .kund-page .kund-bar details[open] > .kb-menu { position: fixed; z-index: 2; left: 0; right: 0; top: auto; bottom: 0; width: auto; min-width: 0; max-height: 75dvh; overflow-y: auto;
    border: 0; border-radius: 18px 18px 0 0; padding: 10px 8px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 32px rgba(20, 30, 25, 0.18); animation: tmSheetIn 240ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  .kund-page .kund-bar details[open] > .kb-menu > a { min-height: 48px; font-size: 15px; }
  /* Medan man skriver (chatt, bokning, ROT) släpper raden så att fältet syns över tangentbordet. */
  .kund-page:has(.kund-main :is(input, textarea, select):focus) .kund-bar { position: static; }
  /* Flikens yta: sektionerna står på bakgrunden, deras innehåll är vita Hem-kort. */
  .kund-page .kund-main, .kund-page .kund-aside { padding: 0; background: none; box-shadow: none; border-radius: 0; }
  .kund-page :is(.kund-rows, .kund-eco, .kund-card, .kund-atac, .kund-ataoff, .kund-books, .kund-bookf, .kund-files__list, .kund-files__empty, .kund-chat, .kund-newc, .kund-empty, .kund-plan .pl-kstrip) {
    background: var(--zm-card); border: 0; border-radius: var(--zm-card-radius); box-shadow: var(--zm-card-shadow); }
  .kund-page .kund-atac.is-draft { background: var(--zm-card); box-shadow: var(--zm-card-shadow); } /* utkastet sägs av chippet, inte av en tonad ram */
  .kund-page .kund-rot .kund-cols { gap: var(--zm-list-gap); }
  .kund-page .kund-rot .kund-card { padding: 14px 16px; background: var(--zm-card); box-shadow: var(--zm-card-shadow); }
  .kund-page .kund-rot .kund-card + .kund-card { margin-top: 0; padding-top: 14px; border-top: 0; }
  .kund-page .kund-sech h2, .kund-page .kund-files__head h2 { font: 600 20px/1.25 Inter, sans-serif; letter-spacing: -0.01em; color: var(--zm-ink); }
  .kund-page .kund-rv { font: 600 16px/1.3 Inter, sans-serif; }
  .kund-page .kund-rval, .kund-page .kund-atav { font: 600 15px/1.35 Inter, sans-serif; }
  .kund-page .kund-rmain small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .kund-page .kund-rtop .kund-chip.is-holds { display: inline-flex; } /* vilken version kunden har */
  .kund-page .kund-racts .kb-btn { min-height: 44px; }
  /* Händelser: etiketten, listan som vitt kort, "All aktivitet" som 44 px-länk – och listan kapas mellan rader. */
  .kund-page .kund-aside-h { margin-bottom: 10px; }
  .kund-page .kund-events { max-height: none; padding: 14px 16px 2px; background: var(--zm-card); border-radius: var(--zm-card-radius); box-shadow: var(--zm-card-shadow); }
  .kund-page .kund-events li:nth-child(n+6) { display: none; }
  .kund-page .kund-more { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--zm-green); }
  .kund-page[data-flik="handelser"] .kund-aside, .kund-wrap[data-flik="handelser"] .kund-aside { display: none; }
}
/* Smal telefon: Ring/SMS/Mejla som ikonknappar (texten klipptes av). */
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) { .kund-page .kund-bar details[open] > .kb-menu { animation: none; } }
@media (max-width: 400px) {
  .kund-page .kund-reach .kb-btn { width: 44px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
  .kund-page .kund-reach .kb-btn .material-symbols-outlined { font-size: 20px; }
}
@media (min-width: 768px) and (max-width: 1023px) { .kund-page .kund-wrap { max-width: 760px; margin-inline: auto; width: 100%; } }
/* Täthet T1/T2 (mobilloopen 2026-10-11, ägaren: "inga onödiga mellanrum"): rubriken börjar 8 px under topplisten som
   på Hem – skalets 20 px topp tas bort på Kunder, Team, kundsidan och Planering (ID-avgränsat, rundturen rörs inte). */
@media (max-width: 1023px) {
  #zimla-page-content:has(#kunder, #team, #kund, #planering) { padding-top: 0; }
  #kunder.ku-page, #team.ku-page, #kund.kund-page { padding-top: 8px; }
  /* Tillbaka-raden ("‹ Kunder" + Ring/SMS/Mejla, 44 px) får 8 px till kortet i stället för sektionsavståndet. */
  #kund.kund-page .kund-crumbs { margin-bottom: calc(8px - var(--zm-gap, 22px)); }
  /* Osynliga träffytor (mobilloopen varv 51): ÄTA-flikens knappar (30 px) och bilagornas filter (29 px) når 44. */
  #kund-ata .kb-btn, #kund.kund-page .kund-files__chips button { position: relative; }
  #kund-ata .kb-btn::after, #kund.kund-page .kund-files__chips button::after { content: ""; position: absolute; inset: -9px -2px; } /* från innerkanten (1 px ram) */
  #kund.kund-page .kund-files__chips { padding-block: 9px; margin-block: -9px; } /* raden rullar i sidled – ytan får plats i den */
  /* Medlemsarket (Team, varv 58): fälten i 16 px (annars zoomar iOS), och knapparna/länkarna under 32 px får osynlig 44 px-yta. */
  .tm-side :is(input, select, textarea) { font-size: 16px; }
  .tm-side :is(.kb-btn, .tm-link, .tm-inact) { position: relative; }
  .tm-side .kb-btn::after { content: ""; position: absolute; inset: -9px -2px; }
  .tm-side :is(.tm-link, .tm-inact)::after { content: ""; position: absolute; inset: -14px -4px; }
}

/* Från jobbet (Simon 2026-10-16): hantverkarnas bilder och tråden med kontorets svar, under bokningarna. */
.kund-job { display: grid; gap: 10px; margin-top: 18px; }
.kund-jobh { margin: 0; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #6b736e; font-weight: 600; }
.kund-jobpics { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; }
.kund-jobpics a { display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #eef0ec; }
.kund-jobpics img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kund-jobw { display: grid; gap: 8px; padding: 10px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #eceee9; }
.kund-jobw textarea { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px; border: 1px solid #e3e6e1; border-radius: 10px; font: 14px/1.45 Inter, sans-serif; color: #1d2420; resize: vertical; }
.kund-jobwb { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kund-jobwb small { font-size: 12px; color: #6b736e; }
.kund-jobt { list-style: none; margin: 0; padding: 0 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #eceee9; }
.kund-jobt li { padding: 10px 0; border-top: 1px solid #f0f1ee; }
.kund-jobt li:first-child { border-top: 0; }
.kund-jobt li.is-office { border-left: 3px solid #1f6b4f; margin-left: -14px; padding-left: 11px; }
.kund-jobt small { display: block; font-size: 12px; color: #6b736e; font-variant-numeric: tabular-nums; }
.kund-jobt p { margin: 2px 0 0; font-size: 13.5px; color: #1d2420; overflow-wrap: anywhere; }
.kund-jobe { margin: 0; font-size: 13px; color: #6b736e; }
@media (max-width: 1023px) { .kund-jobw textarea { font-size: 16px; } .kund-jobwb .kb-btn { min-height: 44px; } }
/* Personal: grupperaderna (Egen personal, Underentreprenörer, Inaktiverade) ska täcka hela raden – .ku-t td:first-child är
   flex för avatar + namn, och en flex-cell tappar colspan (bakgrunden slutade efter första kolumnen). */
.tm-t tr.tm-grp td, .tm-t tr.tm-grp td:first-child { display: table-cell; }
.kl-closef { display: contents; }  /* Markera klart: formuläret syns inte i layouten, knappen står där länken stod */
/* Personal-panelen: Position vid incheckning – fyra val som rader. */
.tm-pos { display: grid; gap: 2px; }
.tm-posopt { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 8px; margin: 0 -8px; border-radius: 9px; font-size: 13.5px; color: #1d2420; cursor: pointer; }
.tm-posopt:hover { background: #f3f8f4; }
.tm-posopt input { width: 16px; height: 16px; margin: 0; accent-color: #1f6b4f; flex: none; }
.tm-pos .tm-muted { margin-top: 4px; }
@media (max-width: 1023px) { .tm-posopt { min-height: 48px; } }
/* Personpanelen förenklad (Simon 2026-10-16: "enkel för en 5 åring"): läget, Ring/SMS, det som måste göras, I dag,
   jobben och veckan – resten bakom "Ändra uppgifter". */
.tm-now { margin: -4px 0 0; font-size: 14px; color: #3d4540; font-variant-numeric: tabular-nums; }
.tm-now.is-in { color: #1f5c45; }
.tm-now.is-outside { color: #a5332a; }
.tm-now.is-warn { color: #7a5200; }
.tm-do { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tm-do:not(:has(*)) { display: none; }
.tm-big { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; font-size: 14px; }
.tm-big .material-symbols-outlined { font-size: 19px; }
.tm-need { grid-column: 1 / -1; display: flex; align-items: center; margin: 4px 0 -2px; font-size: 13px; color: #4e5751; }
.tm-need.is-warn { color: #7a5200; }
.tm-need + .kb-btn { grid-column: 1 / -1; justify-self: start; }
.tm-today { display: flex; flex-wrap: wrap; gap: 6px; }
.tm-today .kb-btn { min-height: 40px; }
.tm-today .kb-btn.is-on { background: #1d2420; border-color: #1d2420; color: #fff; }
.tm-week { margin: 0; font-size: 13px; color: #4e5751; }
.tm-edit { border-top: 1px solid #eceee9; padding-top: 4px; }
.tm-editsum { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 44px; font-size: 14px; color: #1d2420; cursor: pointer; }
.tm-editsum::-webkit-details-marker { display: none; }
.tm-editsum .material-symbols-outlined { font-size: 20px; color: #6b736e; }
.tm-edit[open] .tm-editsum .material-symbols-outlined { transform: rotate(180deg); }
.tm-editbody { display: flex; flex-direction: column; gap: 18px; padding: 6px 0 12px; }
.tm-absmore { display: block; }
@media (max-width: 1023px) { .tm-today .kb-btn, .tm-big { min-height: 48px; } }
/* Personal på mobil (ägaren 2026-10-30: namnen syntes inte): grupperaderna spänner över fem kolumner, så i tabellens fasta
   layout fick namncellen en femtedel av bredden (70 px) och namnet krympte till inget. På telefonen är tabellen en lista. */
@media (max-width: 1023px) {
  .tm-t, .tm-t tbody, .tm-t tr { display: block; width: 100%; }
  .tm-t tr.tm-grp td, .tm-t tr.tm-grp td:first-child { display: flex; align-items: center; gap: 8px; }
}
.tm-wnext { display: none; }  /* nästa uppdrag under namnet: bara telefonen (zimla-mobile-forest.css) */