/* Appen Tid. Bygger på designsystemets tokens och fx-klasserna från Fortnox-översikten. */

.tid-top{ display:flex; flex-wrap:wrap; align-items:center; gap:.625rem; margin-bottom:1rem }
.tid-top__fill{ flex:1 }
.tid-seg{ display:inline-flex; padding:3px; border:1px solid var(--line); border-radius:var(--radius-pill); background:var(--surface) }
.tid-seg__b{ font:inherit; font-size:.8125rem; border:0; background:none; color:var(--muted); padding:.3rem .8rem; border-radius:var(--radius-pill); cursor:pointer }
.tid-seg__b.is-on{ background:var(--ink); color:var(--on-ink) }
.tid-select, .tid-sok, .tid-lrad input, .tid-lrad select{
  font:inherit; font-size:.8125rem; padding:.4rem .6rem; border:1px solid var(--line); border-radius:var(--radius-control);
  background:var(--background); color:var(--foreground) }
.tid-kpis{ margin-bottom:1.25rem }
.tid-tom{ padding:2rem 1rem; text-align:center; color:var(--muted); font-size:.875rem; border:1px dashed var(--line); border-radius:var(--radius-card) }

.tid-kund{ border:1px solid var(--line); border-radius:var(--radius-card); background:var(--surface); margin-bottom:1rem; overflow:hidden }
.tid-kund__h{ display:flex; align-items:center; gap:.625rem; padding:.75rem 1rem; border-bottom:1px solid var(--line) }
.tid-kund__namn{ font-weight:600 }
.tid-kund__nr{ font-size:.75rem; color:var(--muted); font-weight:400 }
.tid-sum{ margin-left:auto; font-size:.8125rem; color:var(--muted); white-space:nowrap }
.tid-proj__h{ display:flex; padding:.5rem 1rem .25rem 2.6rem; font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--muted) }
.tid-rad{ display:grid; grid-template-columns:1.6rem 6.5rem 1fr auto auto; gap:.625rem; align-items:start; padding:.55rem 1rem; border-top:1px solid var(--line) }
.tid-proj .tid-rad:first-of-type{ border-top:0 }
.tid-rad.is-last{ opacity:.7 }
.tid-rad__d{ font-size:.8125rem; color:var(--muted); padding-top:.1rem }
.tid-rad__text{ font:inherit; font-size:.875rem; text-align:left; background:none; border:0; padding:0; color:var(--foreground); cursor:pointer }
.tid-rad__text:hover{ text-decoration:underline }
.tid-rad__meta{ display:block; font-size:.75rem; color:var(--muted); margin-top:.15rem }
.tid-rad__h{ font-size:.8125rem; white-space:nowrap; text-align:right; min-width:4.5rem }
.tid-rad__kr{ font-size:.8125rem; white-space:nowrap; text-align:right; min-width:6rem; color:var(--muted) }
.tid-check{ display:flex; align-items:center; padding-top:.15rem }
.tid-check input{ width:1rem; height:1rem; accent-color:var(--ink) }

.tid-bar{ position:sticky; bottom:0; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:1rem; padding:.75rem 1rem;
  background:var(--background); border:1px solid var(--line); border-radius:var(--radius-card); box-shadow:var(--shadow-card) }
.tid-bar__info{ flex:1; font-size:.8125rem; min-width:12rem }

.tid-form__rad{ display:grid; grid-template-columns:repeat(auto-fit, minmax(9rem, 1fr)); gap:.75rem }
.tid-preview{ margin:1rem 0 .25rem; max-height:18rem; overflow:auto }
.tid-prev{ border:1px solid var(--line); border-radius:var(--radius-card-sm) }
.tid-prev__r{ display:flex; justify-content:space-between; gap:1rem; padding:.4rem .7rem; font-size:.8125rem; border-top:1px solid var(--line) }
.tid-prev__r:first-child{ border-top:0 }
.tid-prev__r.is-text{ color:var(--muted); padding-top:0; border-top:0 }
.tid-prev__sum{ display:flex; justify-content:space-between; padding:.6rem .7rem 0; font-size:.875rem }

.tid-inst{ display:grid; grid-template-columns:1fr 1fr auto; gap:.75rem; align-items:end; margin-bottom:.5rem }
.tid-sok{ width:100%; margin:.25rem 0 .75rem }
.tid-lista{ display:grid; gap:.375rem }
.tid-lrad{ display:grid; grid-template-columns:1fr 6.5rem 6.5rem auto; gap:.5rem; align-items:center; padding:.45rem .6rem;
  border:1px solid var(--line); border-radius:var(--radius-card-sm); background:var(--surface) }
.tid-lrad--proj{ grid-template-columns:1fr 12rem 6.5rem auto }
.tid-lrad__namn{ font-size:.875rem }
.tid-lrad[hidden]{ display:none }

@media (max-width: 640px){
  .tid-rad{ grid-template-columns:1.6rem 1fr auto; }
  .tid-rad__d, .tid-rad__kr{ display:none }
  .tid-inst, .tid-lrad, .tid-lrad--proj{ grid-template-columns:1fr }
}