/* Tid (ägaren 2026-10-16): Tids egen panel glider ut bredvid railen och hela sidan skjuts med. Panelen ligger i skalet
   (base.html) och följer sidans område: html.zimla-area-tid (servern vid laddning, zimlaSyncTidArea efter boostade byten).
   Rörelseklass drill: gamla sidan står orörd tills nästa kommit; under sättningen (zimla-page-landing) hålls panel och
   sida i utgångsläget (tid-enter/tid-leave) och släpps tillsammans när sidan sätter sig (landed). Bara transform/translate. */
.zimla-tid-panel { display: none; }

@media (min-width: 1024px) {
  .zimla-tid-panel {
    position: fixed; top: 0; bottom: 0; left: 4.5rem; z-index: 29;
    display: flex; flex-direction: column; width: 15rem; box-sizing: border-box;
    padding: 0.75rem 0.5rem; background: #0d1812; border-left: 1px solid rgba(217, 245, 224, 0.08);
    transform: translate3d(-100%, 0, 0); visibility: hidden;
    transition: transform 280ms cubic-bezier(0.215, 0.61, 0.355, 1), visibility 0s linear 280ms;
  }
  html.zimla-area-tid .zimla-tid-panel {
    transform: none; visibility: visible;
    transition: transform 280ms cubic-bezier(0.215, 0.61, 0.355, 1), visibility 0s;
  }
  .zimla-tid-panel__title {
    display: flex; align-items: center; height: 54px; margin: 0 0 0.5rem; padding: 0 0.625rem;
    border-bottom: 1px solid rgba(217, 245, 224, 0.08);
    font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: #edf6ef;
  }
  .zimla-tid-panel__list { display: grid; gap: 2px; }
  .zimla-tid-panel__item {
    display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 10px;
    height: 2.375rem; padding: 0 0.625rem; border-radius: 0.6rem;
    font-size: 0.82rem; font-weight: 500; line-height: 1.15; color: #a3b3aa; text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease;
  }
  .zimla-tid-panel__item > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .zimla-tid-panel__item > .material-symbols-outlined {
    font-size: 18px; color: #7d9087; font-variation-settings: "FILL" 0, "wght" 420, "GRAD" 0, "opsz" 20;
    transition: color 160ms ease;
  }
  /* Hover bara med mus (en pekskärm ≥1024 px får ingen kvarhängande hover) och aldrig på aktiv eller kommande rad. */
  @media (hover: hover) {
    .zimla-tid-panel__item:not(.is-active, .is-soon):hover { background: rgba(255, 255, 255, 0.045); color: #eef5f0; }
    .zimla-tid-panel__item:not(.is-active, .is-soon):hover > .material-symbols-outlined { color: #c4d2ca; }
  }
  .zimla-tid-panel__item.is-active { background: #1f2c26; color: #fff; }
  .zimla-tid-panel__item.is-active > .material-symbols-outlined { color: #34d399; }
  .zimla-tid-panel__item:focus-visible { outline: 2px solid #34d399; outline-offset: 2px; }
  /* Det som inte är öppet än: en etikett för hela gruppen, dämpade rader utan hover och utan tryck. */
  .zimla-tid-panel__item-soon-label {
    margin: 0.75rem 0 0.125rem; padding: 0 0.625rem; font-size: 11px; font-weight: 500; line-height: 1.5rem; color: #66756d;
  }
  .zimla-tid-panel__item.is-soon { font-weight: 400; color: #66756d; cursor: default; pointer-events: none; transition: none; }
  .zimla-tid-panel__item.is-soon > .material-symbols-outlined { color: #56645d; }

  /* Sidan får plats bredvid panelen direkt (ingen bredd-tween); förskjutningen syns bara som translate nedan. */
  html.zimla-area-tid :is(.zimla-sidebar-collapsed, .zimla-app-shell.zimla-sidebar-is-collapsed) .zimla-app-main,
  html.zimla-area-tid .zimla-app-main { padding-left: 19.5rem !important; transition: none !important; }
  /* Också på vägen ut: annars tar huvudytans padding-övergång (220 ms) över när zimla-area-tid försvinner. */
  html:is(.zimla-tid-enter, .zimla-tid-leave):is(.zimla-page-landing, .zimla-page-landed) .zimla-app-main { transition: none !important; }

  /* Under sättningen: panelen kvar där den var, sidan kvar där den stod (15rem = panelens bredd). */
  html.zimla-page-landing.zimla-tid-enter .zimla-tid-panel { transform: translate3d(-100%, 0, 0); transition: none; }
  html.zimla-page-landing.zimla-tid-leave .zimla-tid-panel { transform: none; visibility: visible; transition: none; }
  html.zimla-page-landing.zimla-tid-enter #zimla-page-content { translate: -15rem 0; }
  html.zimla-page-landing.zimla-tid-leave #zimla-page-content { translate: 15rem 0; }
  html.zimla-page-landed:is(.zimla-tid-enter, .zimla-tid-leave) #zimla-page-content {
    transition: opacity 200ms cubic-bezier(0.215, 0.61, 0.355, 1), transform 200ms cubic-bezier(0.215, 0.61, 0.355, 1),
      translate 280ms cubic-bezier(0.215, 0.61, 0.355, 1) !important;
  }
  /* Sidan utanför högerkanten när man lämnar Tid: ingen vågrät rullist som blinkar till (clip, så sticky fungerar). */
  html:is(.zimla-tid-enter, .zimla-tid-leave):is(.zimla-page-landing, .zimla-page-landed) .zimla-app-main { overflow-x: clip; }
}

@media (prefers-reduced-motion: reduce) {
  .zimla-tid-panel, html.zimla-area-tid .zimla-tid-panel, .zimla-tid-panel__item,
  .zimla-tid-panel__item > .material-symbols-outlined { transition: none; }
  html.zimla-page-landing:is(.zimla-tid-enter, .zimla-tid-leave) #zimla-page-content { translate: none; }
}

/* Sidorna (platshållare tills loop-personal/loop-tid fyller dem). Tomläget säger vad sidan ska visa – inga siffror. */
.tid-page { height: auto; }
.tid-empty { max-width: 520px; }
.tid-empty > .material-symbols-outlined { font-size: 20px; color: #8a918c; }
.tid-empty b { font-size: 15px; font-weight: 500; color: #1d2420; }
.tid-empty p { margin: 0; font-size: 13px; color: #6b736e; }
.tid-empty a { font-size: 13px; font-weight: 500; color: #1f6b4f; text-decoration: underline; text-underline-offset: 3px; }

/* Telefonen: ingen panel – Tids sidor är en flikrad överst (byts med sidan, aktiv flik scrollas in i bild). */
.tid-tabs { display: none; }
@media (max-width: 1023.98px) {
  .tid-page { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .tid-tabs {
    display: flex; gap: 6px; margin: 0 -16px; padding: 0 16px; overflow-x: auto;
    scrollbar-width: none; scroll-padding-inline: 16px; overscroll-behavior-x: contain;
  }
  .tid-tabs::-webkit-scrollbar { display: none; }
  .tid-tab {
    flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
    border: 1px solid #e3e6e1; border-radius: 999px; background: #fff;
    font-size: 14px; font-weight: 500; color: #3d4540; text-decoration: none;
  }
  .tid-tab > .material-symbols-outlined { font-size: 18px; }
  .tid-tab.is-active { background: #12382b; border-color: #12382b; color: #fff; }
  /* Kommer snart: etiketten en gång efter Personal, sedan dämpade namn utan ram och ikon – inget att trycka på. */
  .tid-tab-soon-label {
    flex: none; align-self: center; display: inline-flex; align-items: center; height: 24px; margin-left: 4px; padding: 0 2px 0 12px;
    border-left: 1px solid #dfe3de; font-size: 12px; font-weight: 500; color: #6b736e;
  }
  .tid-tab.is-soon { padding: 0 7px; border-color: transparent; background: none; font-size: 13px; font-weight: 400; color: #9aa19c; cursor: default; }
  .tid-tab.is-soon > .material-symbols-outlined { display: none; }
}

/* Personal på kundsidan (loop-personal uppgift 6). Rader, inte kort; avvikelser som ett diskret ord, aldrig larm.
   Hela raden fälls ut (passen de senaste 14 dagarna, länken, Ta bort). kl-*-variablerna kommer från zimla-kundlage.css. */
.tp-rows { display: grid; }
.tp-row { border-top: 1px solid var(--kl-line2, #eef0ec); }
.tp-row:first-child { border-top: 0; }
.tp-row > summary {
  list-style: none; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 16px; align-items: center; gap: 10px;
  min-height: 52px; padding: 6px 2px; cursor: pointer;
}
.tp-row > summary::-webkit-details-marker { display: none; }
.tp-row > summary:hover { background: #fafbf9; }
.tp-av {
  width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--kl-gbg, #e6f1ea); color: var(--kl-g, #1f6b4f); font-size: 10.5px; font-weight: 500; letter-spacing: 0.02em;
}
.tp-main { display: grid; gap: 2px; min-width: 0; }
.tp-name { font-size: 14px; color: var(--kl-fg, #1d2420); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-name > a:first-child { color: inherit; text-decoration: none; font-weight: 500; }
.tp-name > a:first-child:hover { text-decoration: underline; text-underline-offset: 3px; }
.tp-kind { color: var(--kl-mut, #6b736e); font-size: 12px; }
.tp-tel { margin-left: 6px; color: var(--kl-mut, #6b736e); font-size: 12px; text-decoration: none; font-variant-numeric: tabular-nums; }
.tp-tel:hover { color: var(--kl-g, #1f6b4f); }
.tp-line { font-size: 12.5px; color: var(--kl-mut, #6b736e); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-dot { display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; border-radius: 50%; background: #3a8874; }
.tp-row.is-outside .tp-dot { background: #b7791f; }
.tp-row.is-outside .tp-line, .tp-row.is-forgotten .tp-line { color: #8a5a00; }
.tp-count { color: var(--kl-mut2, #8a918c); }
.tp-act { display: flex; align-items: center; gap: 8px; }
.tp-note { font-size: 12.5px; color: var(--kl-mut, #6b736e); text-decoration: none; white-space: nowrap; }
a.tp-note:hover { color: var(--kl-g, #1f6b4f); }
.tp-next { font-size: 13px; font-weight: 500; color: var(--kl-g, #1f6b4f); text-decoration: none; white-space: nowrap; }
.tp-chev { font-size: 16px; color: var(--kl-mut2, #8a918c); transition: transform 200ms cubic-bezier(0.215, 0.61, 0.355, 1); }
.tp-row[open] .tp-chev { transform: rotate(180deg); }
.tp-row[open] > summary { background: #fbfcfb; }
.tp-more { display: grid; gap: 10px; padding: 4px 2px 14px 40px; animation: tp-more-in 200ms cubic-bezier(0.215, 0.61, 0.355, 1); }
@keyframes tp-more-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.tp-pass { list-style: none; margin: 0; padding: 0; display: grid; }
.tp-pass li {
  display: grid; grid-template-columns: 7.5rem 1fr auto; column-gap: 12px; align-items: baseline; min-height: 28px;
  padding: 4px 0; border-top: 1px solid var(--kl-line2, #eef0ec); font-size: 12.5px; color: var(--kl-fg2, #4e5751);
}
.tp-pass li:first-child { border-top: 0; }
.tp-pass li > span:first-child { color: var(--kl-mut, #6b736e); }
.tp-pass li > span:nth-child(3) { text-align: right; white-space: nowrap; }
.tp-pass small { grid-column: 2 / -1; font-size: 11.5px; color: var(--kl-mut, #6b736e); }
.tp-pass em { font-style: normal; color: #8a5a00; }
.tnum { font-variant-numeric: tabular-nums; }
.tp-link form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.tp-link form > p { flex-basis: 100%; }
.tp-ok { margin: 0; font-size: 13px; color: var(--kl-g, #1f6b4f); }
.tp-err { margin: 0; font-size: 13px; color: #8a5a00; }
.tp-copy { display: flex; gap: 8px; }
.tp-copy input { flex: 1; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--kl-line, #e4e7e2); border-radius: 9px; font: 13px Inter, sans-serif; color: var(--kl-fg2, #4e5751); background: #fafbf9; }
.tp-remove { margin: 0; }
.tp-del { border: 0; background: none; padding: 4px 0; font: 12.5px Inter, sans-serif; color: var(--kl-mut2, #8a918c); cursor: pointer; }
.tp-del:hover { color: #b91c1c; }

@media (max-width: 1023.98px) {
  .tp-row > summary { min-height: 56px; }
  .tp-tel { display: none; }  /* numret syns som ring-knapp i den utfällda raden på telefon */
  .tp-more { padding-left: 2px; }
  .tp-del { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .tp-more { animation: none; }
  .tp-chev { transition: none; }
}
.tp-call { display: none; justify-self: start; }
@media (max-width: 1023.98px) { .tp-call { display: inline-flex; } }

/* Väntar på svar: raden man tryckt på syns som pågående direkt (CLAUDE.md: rader markeras innan svaret kommer). */
.tp-remove.htmx-request { opacity: 0.5; pointer-events: none; }
@media (max-width: 1023.98px) { .tp-del { padding: 0 12px; } }

/* Teamet i Notiser (loop-personal 15c): företagets val vid tilldelning, radioversionen av chan-seg. */
.st-team__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 0 10px; }
.st-team__label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-team__label b { font-size: 14px; font-weight: 500; }
.st-team__label small, .st-team__sub { font-size: 12.5px; font-weight: 400; color: var(--zm-muted, #6b736e); }
.st-team__seg label { min-height: 32px; font-size: 13px; }
.st-team__seg input { position: absolute; opacity: 0; pointer-events: none; }
.st-team__seg label:has(input:focus-visible) { outline: 2px solid #1f6b4f; outline-offset: 1px; }
.st-team__note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--zm-muted, #6b736e); }
.st-team__note span { display: block; margin-top: 2px; }
@media (max-width: 639px) {
  .st-team__row { flex-direction: column; align-items: stretch; gap: 10px; }
  .st-team__seg { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .st-team__seg label { justify-content: center; min-height: 44px; font-size: 14px; }
}

/* Teams personpanel › Jobb (loop-personal 16): hela raden är länken, vanlig vikt, ellips, ingen hover-lyft. */
a.tm-job { color: inherit; text-decoration: none; border-radius: 8px; min-height: 44px; align-items: center; padding: 8px 6px; }
a.tm-job:hover { background: #f6f7f4; }
.tm-job-t { display: flex; flex-direction: column; min-width: 0; }
.tm-job-t > span, .tm-job-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-job-t > span { font-size: 13.5px; font-weight: 400; }
a.tm-job .tm-li-d { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
a.tm-job .tm-li-d .material-symbols-outlined { font-size: 16px; color: var(--ku-mut, #6b736e); }
.tm-job-dot { width: 7px; height: 7px; border-radius: 50%; background: #1f6b4f; display: inline-block; }
.tm-more summary { cursor: pointer; list-style: none; padding: 6px 0; font-size: 12.5px; }
.tm-more summary::-webkit-details-marker { display: none; }

/* Ny underentreprenör i Personal-väljaren (loop-personal 18): formuläret tar hela arket när det är öppet. */

/* Idag (loop-team 5): en rad per person, ingen fetstil i brödtexten, avvikelser som ett diskret ord. */
.ti-page { max-width: 880px; }
.ti-sum { margin: 0 0 10px; font-size: 13.5px; color: #4e5751; font-variant-numeric: tabular-nums; }
.ti-rows { display: grid; background: rgba(255, 255, 255, 0.94); border-radius: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
.ti-row { display: flex; align-items: center; gap: 10px; border-top: 1px solid #eef0ec; padding-right: 10px; }
.ti-row:first-child { border-top: 0; }
.ti-line { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 12px; color: inherit; text-decoration: none; cursor: pointer; list-style: none; }
.ti-line::-webkit-details-marker { display: none; }
a.ti-line:hover, summary.ti-line:hover { background: #fafbf9; }
.ti-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ti-t b { font-size: 14px; font-weight: 500; color: #1d2420; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ti-t small { font-size: 12px; color: #6b736e; }
.ti-text { font-size: 13px; color: #4e5751; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ti-row.is-outside .ti-text, .ti-row.is-forgotten .ti-text, .ti-row.is-missing .ti-text { color: #8a5a00; }
.ti-fixed { margin: 0 0 10px; font-size: 13px; color: #1f6b4f; font-variant-numeric: tabular-nums; }
details.ti-row { display: block; padding-right: 0; }
details.ti-row > summary { padding-right: 10px; }
.ti-fix { display: grid; gap: 8px; padding: 0 12px 12px 50px; }
.ti-q { margin: 0; font-size: 13px; color: #4e5751; }
.ti-times { display: flex; flex-wrap: wrap; gap: 6px; }
.ti-other { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #6b736e; }
.ti-other input { height: 32px; padding: 0 8px; border: 1px solid #e3e6e1; border-radius: 8px; font: 14px Inter, sans-serif; }
.ti-empty { margin: 4px 0 12px; font-size: 13.5px; color: #6b736e; }
.ti-empty a { color: #1f6b4f; }
.ti-free { margin-top: 14px; }
.ti-free > summary { cursor: pointer; font-size: 12.5px; color: #6b736e; padding: 6px 2px; list-style: none; }
.ti-free > summary::-webkit-details-marker { display: none; }
@media (max-width: 1023.98px) {
  .ti-line { min-height: 56px; }
  .ti-times .kl-btn, .ti-other input, .ti-other .kl-btn { min-height: 44px; }
  .ti-fix { padding-left: 12px; }
}

/* Personal-listans kolumn Läge (loop-team 5): samma läge som Idag, diskret – bara avvikelser får färg. */
.tm-chip.tm-live { background: #f0f1ee; color: #3d4540; font-variant-numeric: tabular-nums; }
.tm-chip.tm-live.is-in { background: #e7f2ec; color: #1f6b4f; }
.tm-chip.tm-live:is(.is-outside, .is-forgotten, .is-missing) { background: #fbf3e0; color: #7a5200; }
.tm-chip.tm-live.is-free { background: none; color: #8a918c; padding-left: 0; }
.ti-rows > *, .ti-row, .ti-line { min-width: 0; }
.ti-row > .ti-line { overflow: hidden; }

/* Pass (loop-team 6): en rad per pass, tabulära siffror, rättning fälls ut på raden. */
.tpx-page { max-width: 1120px; }
.tpx-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.tpx-filter select { height: 34px; padding: 0 10px; border: 1px solid #e3e6e1; border-radius: 9px; background: #fff; font: 13px Inter, sans-serif; color: #1d2420; max-width: 240px; }
.tpx-seg label input { position: absolute; opacity: 0; pointer-events: none; }
.tpx-rows { display: grid; background: rgba(255, 255, 255, 0.94); border-radius: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
.tpx-head, .tpx-line { display: grid; grid-template-columns: 104px minmax(0, 1.2fr) minmax(0, 1fr) 56px 56px 96px minmax(0, 1fr); align-items: center; gap: 10px; padding: 0 14px; }
.tpx-head { min-height: 34px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #8a918c; }
.tpx-row { border-top: 1px solid #eef0ec; }
.tpx-line { min-height: 48px; font-size: 13px; color: #1d2420; font-variant-numeric: tabular-nums; cursor: pointer; list-style: none; }
.tpx-line::-webkit-details-marker { display: none; }
summary.tpx-line:hover { background: #fafbf9; }
.tpx-line > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpx-m { display: none; }
.tpx-who small, .tpx-state small, .tpx-ed { display: block; font-size: 11.5px; color: #8a918c; }
.tpx-row.is-warn .tpx-state, .tpx-ro.is-warn .tpx-len { color: #8a5a00; }
.tpx-edit { display: grid; gap: 8px; padding: 2px 14px 12px 128px; }
.tpx-edit form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tpx-k { font-size: 12.5px; color: #6b736e; min-width: 120px; }
.tpx-edit input[type=time], .tpx-add input, .tpx-add select { height: 32px; padding: 0 8px; border: 1px solid #e3e6e1; border-radius: 8px; font: 13px Inter, sans-serif; background: #fff; }
.tpx-add { margin: 0 0 12px; }
.tpx-add > summary { list-style: none; display: inline-flex; }
.tpx-add > summary::-webkit-details-marker { display: none; }
.tpx-add form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 10px; padding: 12px 14px; background: rgba(255, 255, 255, 0.94); border-radius: 14px; }
.tpx-add label { display: grid; gap: 3px; font-size: 11.5px; color: #6b736e; }
/* I personens panel: en kompakt rad (dag, tid, längd, var). */
.tpx-ro { display: grid; grid-template-columns: 76px 92px 1fr; grid-template-areas: "day span len" "where where where"; padding: 6px 0; border-top: 1px solid #f0f1ee; min-height: 0; cursor: default; gap: 2px 8px; }
.tpx-ro .tpx-day { grid-area: day; } .tpx-ro .tpx-span { grid-area: span; } .tpx-ro .tpx-len { grid-area: len; color: #4e5751; }
.tpx-ro .tpx-where { grid-area: where; font-size: 12px; color: #6b736e; } .tpx-ro .tpx-ed { grid-column: 1 / -1; }
@media (max-width: 1023.98px) {
  .tpx-head { display: none; }
  .tpx-line:not(.tpx-ro) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "day len" "m state"; gap: 2px 10px; padding: 8px 14px; min-height: 56px; }
  .tpx-line:not(.tpx-ro) .tpx-day { grid-area: day; } .tpx-line:not(.tpx-ro) .tpx-len { grid-area: len; }
  .tpx-line:not(.tpx-ro) .tpx-m { display: block; grid-area: m; font-size: 12.5px; color: #4e5751; }
  .tpx-line:not(.tpx-ro) .tpx-state { grid-area: state; text-align: right; font-size: 12.5px; }
  .tpx-line:not(.tpx-ro) :is(.tpx-who, .tpx-where, .tpx-t) { display: none; }
  .tpx-edit { padding-left: 14px; }
  .tpx-edit .kb-btn, .tpx-edit input[type=time] { min-height: 44px; }
  .tpx-filter select { flex: 1; max-width: none; }
}

/* Timmar (loop-team 7): en tabell, tabulära siffror, summor i vanlig vikt. Telefonen visar namn och summa. */
.th-page { max-width: 1120px; }
.th-note { margin: 0 0 10px; font-size: 12.5px; color: #6b736e; }
.th-note a { color: #1f6b4f; }
.th-wrap { background: rgba(255, 255, 255, 0.94); border-radius: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); overflow-x: auto; }
.th-t { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.th-t th { height: 34px; padding: 0 12px; text-align: right; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #8a918c; }
.th-t th:first-child, .th-t td:first-child { text-align: left; }
.th-t td { height: 44px; padding: 0 12px; text-align: right; border-top: 1px solid #eef0ec; color: #1d2420; white-space: nowrap; }
.th-t td a { color: inherit; text-decoration: none; }
.th-t td a:hover { color: #1f6b4f; text-decoration: underline; text-underline-offset: 3px; }
.th-grp td { height: 32px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #8a918c; }
.th-name td { height: 34px; font-size: 12.5px; color: #6b736e; border-top-style: dashed; }
.th-name td:first-child { padding-left: 26px; }
.th-t tfoot td { border-top: 1px solid #e3e6e1; color: #4e5751; }
@media (max-width: 1023.98px) {
  .th-t th:not(:first-child):not(:last-child), .th-t td:not(:first-child):not(:last-child) { display: none; }
  .th-t td { height: 48px; }
}
.th-person { margin: 0; font-size: 13px; color: #1d2420; font-variant-numeric: tabular-nums; }

/* Ta bort från företaget (Team-panelen): två steg – knappen fäller ut vad som händer och den riktiga knappen. */
.tm-leave > summary { list-style: none; cursor: pointer; display: inline-block; }
.tm-leave > summary::-webkit-details-marker { display: none; }
.tm-leave[open] > summary { margin-bottom: 6px; }
.tm-leave .tm-muted { margin: 0 0 8px; }
.tm-leave-go { color: #b91c1c; border-color: #f0c9c9; }

/* Idag, Pass och Timmar på datorn (Simon 2026-10-16: "kan gärna likna Personal"): samma bredd, samma vita yta, samma
   kolumnrubriker och radhöjd som Personal (.ku-t/.tm-t). Telefonen är oförändrad: .ti-card faller bort, texten står kvar. */
.ti-act { flex: none; display: flex; align-items: center; }
.ti-act:empty { display: none; }
.ti-who { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.ti-empty b { display: block; font-weight: 500; color: #1d2420; }
.ti-empty p { margin: 8px 0 0; }
@media (min-width: 1024px) {
  .tid-page.tpx-page, .tid-page.th-page { max-width: 1640px; min-height: 100dvh; padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  .tpx-rows, .th-wrap { background: rgba(255, 255, 255, 0.94); border-radius: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); overflow: hidden; }
  .tpx-head, .th-t th { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #6b736e; font-weight: 500; }
  .tpx-rows .ti-empty, .th-wrap .ti-empty { margin: 0; padding: 40px 16px; text-align: center; font-size: 13px; color: #6b736e; }
  .tpx-rows .ti-empty b, .th-wrap .ti-empty b { font-size: 15px; }
  /* Pass: rubrikrad och rader som Personal. */
  .tpx-head { min-height: 0; padding: 14px 16px 10px; border-bottom: 1px solid #eceee9; }
  .tpx-head, .tpx-line { padding-left: 16px; padding-right: 16px; gap: 12px; }
  .tpx-head .r, .tpx-line .tpx-t, .tpx-line .tpx-len { text-align: right; }
  .tpx-row { border-top: 0; border-bottom: 1px solid #f0f1ee; }
  .tpx-row:last-child { border-bottom: 0; }
  .tpx-line { min-height: 52px; }
  summary.tpx-line:hover { background: #f3f8f4; }
  .tpx-who { font-weight: 500; }
  .tpx-who small { font-weight: 400; }
  .tpx-row.is-warn .tpx-state { color: #7a5200; }
  .tpx-filter select { height: 32px; }
  /* Timmar: tabellen som Personal, notisen först i ytan. */
  .th-wrap { overflow-x: auto; }
  .th-note { margin: 0; padding: 12px 16px; border-bottom: 1px solid #eceee9; color: #6b736e; }
  .th-t th { height: auto; padding: 14px 16px 10px; border-bottom: 1px solid #eceee9; }
  .th-t td { height: 48px; padding: 0 16px; border-top: 0; border-bottom: 1px solid #f0f1ee; }
  .th-t td:first-child a { font-weight: 500; }
  .th-t tbody tr:not(.th-grp):hover td { background: #f3f8f4; }
  .th-grp td { height: 34px; background: #fafbf9; font-size: 11px; letter-spacing: 0.1em; font-weight: 500; color: #6b736e; }
  .th-name td { height: 36px; border-bottom-style: dashed; }
  .th-t tfoot td { font-weight: 500; border-bottom: 0; border-top: 1px solid #eceee9; }
}

/* Kartan i Idag: plattorna dämpas så att markörerna bär färgen. */
.tk-map { background: #e9ebe5; z-index: 0; }
.tk-map .tk-tiles { filter: saturate(0.35) brightness(1.04) contrast(0.95); }
.tk-map .leaflet-control-attribution { font: 10.5px Inter, sans-serif; background: rgba(255, 255, 255, 0.8); }
.tk-map .leaflet-bar a { width: 34px; height: 34px; line-height: 34px; color: #1d2420; }
.tk-map .leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: 0 10px 30px -12px rgba(20, 30, 25, 0.35); }
.tk-map .leaflet-popup-content { margin: 10px 12px; font: 13px/1.45 Inter, sans-serif; color: #1d2420; }
.tk-map .leaflet-popup-content a { color: #1f6b4f; font-weight: 500; }
.tk-map .leaflet-tooltip { font: 12px Inter, sans-serif; border-radius: 8px; }
.tk-pinw { background: none; border: 0; }

/* Idag med karta (ägarens prototyp 2026-10-16): listan i en vit kolumn, kartan kant i kant bredvid. */
.ti-split .ti-top { display: flex; flex-direction: column; gap: 4px; }
.ti-kick { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #6b736e; font-weight: 500; font-variant-numeric: tabular-nums; }
.ti-top h1 { margin: 0; font-family: Newsreader, ui-serif, Georgia, serif; font-weight: 400; font-size: 34px; line-height: 1.1; color: #1d2420; }
.ti-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ti-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: #f0f1ee; color: #3d4540; font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ti-chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ti-chip.is-in { background: #e7f2ec; color: #1f5c45; }
.ti-chip.is-outside { background: #fbeae7; color: #a5332a; }
.ti-chip.is-warn { background: #fbf3e0; color: #7a5200; }
.ti-split .ti-rows { display: block; background: none; border-radius: 0; box-shadow: none; }
.ti-split .ti-row { display: flex; align-items: center; gap: 8px; padding-right: 12px; border-top: 0; border-bottom: 1px solid #f0f1ee; }
.ti-split details.ti-row { display: block; padding-right: 0; }
.ti-split details.ti-row > summary { padding-right: 12px; }
.ti-split .ti-line { gap: 10px; min-height: 58px; padding: 8px 4px 8px 16px; }
.ti-split .ti-row.is-picked { background: #eef6f1; box-shadow: inset 3px 0 0 #1f6b4f; }
.ti-split .ti-line { cursor: default; }
.ti-split .ti-row.is-onmap > .ti-line, .ti-split summary.ti-line { cursor: pointer; }
.ti-split .ti-row.is-onmap > .ti-line:hover, .ti-split summary.ti-line:hover { background: #f6f8f5; }
.ti-split .ti-row.is-picked > .ti-line:hover { background: transparent; }
.ti-split .ti-line:focus-visible { outline: 2px solid #1f6b4f; outline-offset: -2px; }
.ti-av { flex: none; width: 30px; height: 30px; font-size: 11px; background: #1f6b4f; color: #fff; }
.ti-av.is-ue { background: #fff; color: #3d4540; box-shadow: inset 0 0 0 1.5px #cfd4cf; }
.ti-split .ti-row.is-free .ti-av { background: #fff; color: #6b736e; box-shadow: inset 0 0 0 1.5px #dfe3de; }
.ti-split .ti-t b { font-size: 14px; }
.ti-split .ti-t small { font-size: 12.5px; color: #6b736e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ti-split .ti-t small.is-warn { color: #a5332a; }
.ti-pill { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; background: #f0f1ee; color: #4e5751; }
.ti-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ti-pill.is-in { background: #e7f2ec; color: #1f5c45; }
.ti-pill.is-outside { background: #fbeae7; color: #a5332a; }
.ti-pill.is-warn { background: #fbf3e0; color: #7a5200; }
.ti-pill.is-off { background: none; color: #8a918c; font-weight: 400; }
.ti-act { flex: none; }
.ti-quiet { margin: 14px 16px; font-size: 13px; color: #6b736e; }
.ti-quiet a { color: #1f6b4f; }
.ti-mapw { position: relative; min-height: 0; }
.ti-map { position: absolute; inset: 0; border-radius: 0; box-shadow: none; }
.ti-mapnote { position: absolute; left: 12px; top: 12px; z-index: 500; margin: 0; max-width: 340px; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.92); font-size: 12px; color: #4e5751; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); pointer-events: none; }
@media (min-width: 1024px) {
  .ku-page.ti-split { max-width: none; height: 100dvh; padding: 0; gap: 0; display: grid; grid-template-columns: 340px minmax(0, 1fr); }
  .ti-split .ti-pane { min-height: 0; display: flex; flex-direction: column; background: #fff; border-right: 1px solid #eceee9; }
  .ti-split .ti-top { padding: 26px 20px 16px; border-bottom: 1px solid #f0f1ee; }
  .ti-split .ti-listw { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 24px; }
  .ti-split .leaflet-bottom.leaflet-left { bottom: 104px; }  /* över chattfältet */
}
@media (max-width: 1023.98px) {
  /* Telefonen: rubriken, kartan som ett band, sedan listan (packen, tumme). Raden öppnar Personal som förut. */
  .ti-split .ti-pane { display: contents; }
  .ti-split .ti-top { order: 1; }
  .ti-split .ti-mapw { order: 2; height: 40dvh; border-radius: 16px; overflow: hidden; }
  .ti-split .ti-listw { order: 3; background: rgba(255, 255, 255, 0.94); border-radius: 16px; overflow: hidden; }
  .ti-mapnote { display: none; }
  .ti-split .ti-line { min-height: 60px; }
}

/* Kartans markörer (Idag och Karta): fyllda prickar = in, ringar = ut, röd ring med initialer = utanför radien. */
.tk-dot { display: block; width: 14px; height: 14px; margin: 4px; box-sizing: border-box; border-radius: 50%; background: var(--c, #1f5c45); border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(20, 30, 25, 0.4); }
.tk-dot.is-out { background: #fff; border-color: var(--c, #1f5c45); }
.tk-dot.is-outside { background: #c0392b; }
.tk-dot.is-uncertain { background: #6b736e; }
.tk-out-pin { display: grid; place-items: center; width: 30px; height: 30px; box-sizing: border-box; border-radius: 50%; background: #fff; border: 2.5px solid #c0392b; color: #c0392b; font: 700 10.5px Inter, sans-serif; box-shadow: 0 2px 8px -2px rgba(20, 30, 25, 0.45); }
.tk-lblw { pointer-events: none; }
.tk-lbl { position: absolute; transform: translate(-50%, calc(-100% - 36px)); white-space: nowrap; font: 600 12px Inter, sans-serif; color: #1d2420; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 6px #fff; }
.tk-dist { position: absolute; transform: translate(-50%, -50%); padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.92); font: 600 11px Inter, sans-serif; color: #c0392b; white-space: nowrap; }
.tk-legend { display: flex; align-items: center; gap: 12px; padding: 7px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); font: 12px Inter, sans-serif; color: #3d4540; }
.tk-legend span { display: inline-flex; align-items: center; gap: 5px; }
.tk-legend .tk-dot { width: 11px; height: 11px; margin: 0; border-width: 2px; box-shadow: none; }
.tk-legend .tk-dot.is-in { border-color: var(--c); }
.tk-map .leaflet-control-scale-line { border-color: #6b736e; color: #3d4540; font: 11px Inter, sans-serif; background: rgba(255, 255, 255, 0.85); }
.tk-fit { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; background: #fff; color: #1d2420; cursor: pointer; }
.tk-fit .material-symbols-outlined { font-size: 19px; }
.tk-pc { font: 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: #4e5751; }
/* Snabbstatus för dagen (rader utan markör): fälls ut under raden – ingen ruta i hörnet. */
.ti-split .ti-row.is-free > .ti-line, .ti-split .ti-row.is-missing > .ti-line { cursor: pointer; }
.ti-split .ti-row.is-free > .ti-line:hover, .ti-split .ti-row.is-missing > .ti-line:hover { background: #f6f8f5; }
.ti-split .ti-row.is-asking { flex-wrap: wrap; background: #f7f9f6; }
.ti-quick { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 12px 12px 56px; animation: fo-in 150ms ease both; }
.ti-quick > span { font-size: 12.5px; color: #6b736e; margin-right: 2px; }
.ti-quick .kb-btn.is-on { background: #1d2420; border-color: #1d2420; color: #fff; }
.ti-quick .ti-qclear { color: #6b736e; }
.ti-pill.is-away { background: #eef0f6; color: #3f4a6b; }
@keyframes fo-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ti-quick { animation: none; } }
@media (max-width: 1023.98px) { .ti-quick { padding-left: 16px; } .ti-quick .kb-btn { min-height: 44px; } }

/* Pass förenklad (Simon 2026-10-16: "simpel, väldigt lite saker som får en att tappa fokus"): tunn verktygsrad med tre
   ikoner, en tabell. Ikonen betyder bara position: ✓ på plats, ! utanför radien, tom = utan säker position. */
.tpx-bar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 10px; padding: 4px 0; border-top: 1px solid #e3e6e1; border-bottom: 1px solid #e3e6e1; }
.tpx-tool { display: contents; }
.tpx-tool > summary { list-style: none; }
.tpx-tool > summary::-webkit-details-marker { display: none; }
.tpx-ico { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: none; color: #1d2420; cursor: pointer; }
.tpx-ico:hover, .tpx-tool[open] > .tpx-ico { background: #eef0ec; }
.tpx-ico .material-symbols-outlined { font-size: 21px; }
.tpx-dot { position: absolute; top: 8px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: #1f6b4f; }
.tpx-tool[open] > form { order: 10; flex-basis: 100%; margin: 6px 0 4px; }
.tpx-simple .tpx-add form { margin-top: 6px; }
.tpx-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 6px; }
.tpx-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: #e7f2ec; color: #1f5c45; font-size: 12.5px; text-decoration: none; }
.tpx-chip:hover { background: #d9ecdf; }
.tpx-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; font: 700 12px Inter, sans-serif; color: #fff; }
.tpx-mark.is-ok { background: #1f8a4c; }
.tpx-mark.is-warn { background: #e0a019; }
.tpx-mark.is-none { background: none; }
.tpx-live { font-style: normal; color: #1f6b4f; }
.tpx-forgot { font-style: normal; color: #7a5200; }
.tpx-ed { color: #8a918c; cursor: help; }
.tpx-detail { margin: 0 0 4px; font-size: 12.5px; color: #4e5751; }
.tpx-simple .tpx-head, .tpx-simple .tpx-line { grid-template-columns: 24px minmax(0, 1.3fr) minmax(0, 1fr) 150px 110px 110px; }
.tpx-simple .tpx-head .r, .tpx-simple .tpx-line .tpx-t, .tpx-simple .tpx-line .tpx-len { text-align: left; }
.tpx-simple .tpx-who { font-weight: 400; }
.tpx-simple .tpx-edit { padding-left: 54px; }
@media (max-width: 1023.98px) {
  .tpx-ico { width: 44px; height: 44px; }
  /* Telefonen: "! Ali · Rör AB … 8 h 28 min" och under "tor 15 okt 07:12–15:40 · Storgatan 5" – hela raden trycks. */
  .tpx-simple .tpx-line:not(.tpx-ro) { grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "mark who len" "mark m m"; gap: 2px 10px; padding: 8px 14px; min-height: 56px; }
  .tpx-simple .tpx-line:not(.tpx-ro) .tpx-mark { grid-area: mark; align-self: center; }
  .tpx-simple .tpx-line:not(.tpx-ro) .tpx-who { display: block; grid-area: who; }
  .tpx-simple .tpx-line:not(.tpx-ro) .tpx-len { grid-area: len; }
  .tpx-simple .tpx-line:not(.tpx-ro) .tpx-m { display: block; grid-area: m; font-size: 12.5px; color: #4e5751; }
  .tpx-simple .tpx-line:not(.tpx-ro) :is(.tpx-where, .tpx-t) { display: none; }
  .tpx-simple .tpx-edit { padding-left: 14px; }
}