/* Typsnitt som ligger på sajten. Licens: SIL Open Font License. */
@font-face {font-family: 'Work Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/work-sans-cea7c2e8.woff2) format('woff2')}
@font-face {font-family: 'Work Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/work-sans-cea7c2e8.woff2) format('woff2')}
@font-face {font-family: 'Work Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/work-sans-cea7c2e8.woff2) format('woff2')}

* { box-sizing: border-box; }
body { margin: 0; }
.site {
  --ink: #14213D;
  --muted: #566074;
  --rule: #D5DAE3;
  --navy: #14213D;
  --tint: #F1F4F9;
  --sun: #FFE9A3;
  --good: #1E7A46;
  --good-bg: #E2F3E8;
  --warn-bg: #FFF1C9;
  --bad: #B3261E;
  --bad-bg: #FBE4E2;
  background: #fff;
  color: var(--ink);
  font-family: "Work Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.45;
}
.site a { color: inherit; text-underline-offset: 3px; }
.site button, .site select { font: inherit; color: inherit; }
.site a:focus-visible, .site button:focus-visible, .site select:focus-visible, .site [tabindex]:focus-visible { outline: 3px solid #2F6FDB; outline-offset: 2px; }
.inner { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
.site h1, .site h2, .site h3 { margin: 0; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.site p { margin: 0 0 0.75rem; }
.site [hidden] { display: none !important; }

.top { background: var(--navy); color: #fff; }
.top .inner { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.2rem 2rem; padding-top: 0.75rem; padding-bottom: 0.75rem; }
.site .name { font-family: inherit; font-weight: 700; font-size: 1.125rem; line-height: inherit; letter-spacing: 0; margin: 0; }
.who { color: #C5CEDF; font-size: 0.9375rem; }

.lead { padding: 1.25rem 0 0; }
.lead .rf-aside { max-width: none; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: baseline; justify-content: space-between; }
.lead .rf-aside button { font: inherit; background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Läget just nu, före detaljerna */
.sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; margin: 1.25rem 0 0; padding: 0; }
.sum div { min-width: 0; }
.sum dt { color: var(--muted); font-size: 0.875rem; }
.sum dd { margin: 0.1rem 0 0; font-weight: 700; font-size: 1.25rem; line-height: 1.25; font-variant-numeric: tabular-nums; }
.sum dd small { display: block; font-weight: 400; font-size: 0.875rem; color: var(--muted); }

.tabs { display: flex; flex-wrap: wrap; gap: 0.25rem 0.4rem; margin: 1.5rem 0 0; border-bottom: 2px solid var(--navy); }
.tabs button { background: transparent; border: 0; border-radius: 4px 4px 0 0; padding: 0.55rem 0.85rem; font-weight: 500; cursor: pointer; }
.tabs button[aria-pressed="true"] { background: var(--navy); color: #fff; font-weight: 700; }
.tabs .n { display: inline-block; min-width: 1.4rem; margin-left: 0.35rem; padding: 0 0.3rem; border-radius: 999px; background: var(--sun); color: var(--ink); font-size: 0.8125rem; font-weight: 700; text-align: center; }
.pane { padding: 1.5rem 0 3rem; }
.pane h2 { font-size: 1.375rem; margin-bottom: 0.35rem; }
.pane .hint { color: var(--muted); max-width: 62ch; margin-bottom: 1.1rem; }
.btn { background: var(--navy); color: #fff !important; border: 1.5px solid var(--navy); border-radius: 4px; padding: 0.4rem 0.85rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.btn:hover { background: #22345C; }
.btn.quiet { background: #fff; color: var(--ink) !important; border-color: #7C879A; font-weight: 500; }
.btn.quiet:hover { background: var(--tint); }
.btn.small { font-size: 0.875rem; padding: 0.2rem 0.55rem; }
.chip { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; white-space: nowrap; }
.chip.ny { background: var(--sun); }
.chip.ok { background: var(--good-bg); color: var(--good); }
.chip.wait { background: var(--warn-bg); }
.chip.bad { background: var(--bad-bg); color: var(--bad); }
.chip.off { background: var(--tint); color: var(--muted); }
.empty { color: var(--muted); padding: 0.75rem 0; }

/* Förfrågningar */
.rows { list-style: none; margin: 0; padding: 0; }
.rows > li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem 1.5rem; padding: 0.9rem 0; border-top: 1px solid var(--rule); }
.rows > li:last-child { border-bottom: 1px solid var(--rule); }
.rows h3 { font-size: 1.0625rem; letter-spacing: 0; }
.rows p { margin: 0; }
.rows .meta { color: var(--muted); font-size: 0.9375rem; }
.rows .side { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.kr { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Veckan */
.tray { background: var(--tint); border-radius: 4px; padding: 0.75rem 0.9rem; margin-bottom: 1.25rem; }
.tray h3 { font-size: 1rem; margin-bottom: 0.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; justify-content: space-between; }
.tray ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.team { margin-bottom: 1.75rem; }
.team > h3 { font-size: 1.0625rem; margin-bottom: 0.6rem; }
.team > h3 small { font-weight: 400; color: var(--muted); font-size: 0.9375rem; }
.days { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
.cell { border: 1px solid var(--rule); border-radius: 4px; padding: 0.6rem; min-width: 0; display: flex; flex-direction: column; }
.cell.today { border-color: var(--navy); border-width: 2px; }
.cell.over { border-color: var(--bad); }
.cell.drop { background: var(--tint); }
.cell h4 { margin: 0 0 0.4rem; font-size: 0.9375rem; font-weight: 700; display: flex; justify-content: space-between; gap: 0.5rem; }
.cell h4 span { font-weight: 400; color: var(--muted); }
.bar { height: 0.45rem; background: var(--tint); border-radius: 999px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--navy); }
.cell.over .bar i { background: var(--bad); }
.load { margin: 0.3rem 0 0.5rem !important; font-size: 0.8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.cell.over .load { color: var(--bad); font-weight: 700; }
.jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; flex: 1 1 auto; align-content: start; min-height: 1.5rem; }
.job { background: var(--tint); border-radius: 4px; padding: 0.45rem 0.55rem; font-size: 0.875rem; line-height: 1.35; }
.job[draggable="true"] { cursor: grab; }
.job.klar { background: var(--good-bg); }
.job.plats { background: var(--sun); }
.job b { font-weight: 700; }
.job .t { font-variant-numeric: tabular-nums; }
.job .m { color: var(--muted); display: block; }
.job select { margin-top: 0.3rem; width: 100%; font-size: 0.8125rem; padding: 0.15rem 0.25rem; border: 1px solid #9AA4B5; border-radius: 3px; background: #fff; }
.cellfoot { margin-top: 0.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; font-size: 0.8125rem; color: var(--muted); }
.saved { color: var(--good); font-weight: 700; }

/* Dagens jobb, som putsarna ser det i mobilen */
.pick { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.pick label { display: grid; gap: 0.2rem; font-size: 0.875rem; color: var(--muted); }
.pick select { padding: 0.4rem 0.5rem; border: 1px solid #7C879A; border-radius: 4px; background: #fff; }
.phone { max-width: 23rem; border: 1px solid var(--rule); border-radius: 14px; padding: 0.9rem; }
.phone h3 { font-size: 1.0625rem; margin-bottom: 0.15rem; }
.phone .sub { color: var(--muted); font-size: 0.875rem; margin-bottom: 0.75rem; }
.stops { list-style: none; margin: 0; padding: 0; }
.stops li { border-top: 1px solid var(--rule); padding: 0.65rem 0; }
.stops .go { color: var(--muted); font-size: 0.8125rem; }
.stops .head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; }
.stops .what { margin: 0.15rem 0 0.4rem; font-size: 0.9375rem; }

/* Fakturaunderlag */
.scroll { overflow-x: auto; }
table.inv { width: 100%; border-collapse: collapse; min-width: 38rem; }
.inv th, .inv td { text-align: left; padding: 0.5rem 0.6rem 0.5rem 0; border-top: 1px solid var(--rule); vertical-align: top; }
.inv th { font-weight: 500; color: var(--muted); font-size: 0.875rem; border-top: 0; }
.inv .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv tfoot td { font-weight: 700; border-top: 2px solid var(--navy); }
.inv tr.pay td.total { background: var(--sun); }
.invfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 1rem; }

.log { list-style: none; margin: 0; padding: 0; max-width: 54rem; }
.log li { border-top: 1px solid var(--rule); padding: 0.55rem 0; }
.log li:last-child { border-bottom: 1px solid var(--rule); }
.log b { font-weight: 700; }

@media (min-width: 40rem) {
  .sum { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rows > li { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .rows .side { justify-content: flex-end; }
}
@media (min-width: 60rem) {
  .days { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; }
}