/* public/portal/timer.css — GT Timer-siden (public/portal/timer.js). Udseendet følger Jakobs egen
   GT Timer-skitse (overdragelsespakken, ui_reference_gt-timer.html): tal-kort med farvet kant, ugelinje,
   dagkolonner med kort og "Forslag"-streg, rapport & faktura og et rettevindue, der glider op nedefra.
   Alt er præfikset med #ti / #ti-vindue, så andre apps ikke rammes. */
#ti, #ti-vindue {
  --ti-bg: #e6e0d3; --ti-panel: #f4f0e8; --ti-panel2: #ece6da; --ti-edge: #cfc7b6; --ti-ink: #2b2a26; --ti-ink2: #6b665b; --ti-muted: #8a8374;
  --ti-accent: #d24e08; --ti-good: #2e7d4f; --ti-bad: #b3261e;
  font: 14px/1.45 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; color: var(--ti-ink);
}
#ti { background: var(--ti-bg); border-radius: 14px; padding: 0 16px 24px; margin-top: 8px; box-sizing: border-box;
  /* Bredere end portalens 980 px, så ugens dage får plads (som i skitsen). */
  position: relative; width: min(1400px, calc(100vw - 32px)); left: 50%; margin-left: calc(-1 * min(700px, 50vw - 16px)); }
#ti button, #ti-vindue button { font-family: inherit; font-size: 14px; line-height: 1.3; cursor: pointer; }
.ti-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 0 10px; }
.ti-top h1 { font-size: 18px; margin: 0; letter-spacing: -.2px; font-family: inherit; }
.ti-sub { color: var(--ti-ink2); font-size: 12px; }
.ti-sp { flex: 1; }
.ti-maaned { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ti-ink2); }
.ti-maaned select { font: inherit; font-size: 14px; color: var(--ti-ink); background: var(--ti-panel); border: 1px solid var(--ti-edge); border-radius: 8px; padding: 7px 10px; }
.ti-svar { background: var(--ti-panel); border: 1px solid var(--ti-edge); border-radius: 10px; padding: 8px 12px; margin: 0 0 8px; font-size: 13px; }
.ti-svar.ti-fejl-svar { border-color: var(--ti-bad); color: var(--ti-bad); }

/* Tal-kort */
.ti-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin: 2px 0 12px; }
.ti-kpi { background: var(--ti-panel); border: 1px solid var(--ti-edge); border-left: 4px solid var(--ti-muted); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.ti-kpi .l { font-size: 11px; color: var(--ti-ink2); text-transform: uppercase; letter-spacing: .05em; }
.ti-kpi .v { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.ti-kpi .s { font-size: 11px; color: var(--ti-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.ti-bar2 { height: 6px; border-radius: 4px; background: var(--ti-edge); overflow: hidden; margin-top: 7px; }
.ti-bar2 i { display: block; height: 100%; border-radius: 4px; }
.ti-ukpi { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; background: var(--ti-panel2); border: 1px solid var(--ti-edge); border-radius: 10px; padding: 8px 12px; margin: 0 0 4px; font-size: 12.5px; color: var(--ti-ink2); font-variant-numeric: tabular-nums; }
.ti-ukpi b { color: var(--ti-ink); }
.ti-mulig { background: var(--ti-panel); border: 1px dashed var(--ti-accent); border-radius: 10px; padding: 9px 12px; margin: 0 0 4px; font-size: 12.5px; line-height: 1.5; color: var(--ti-ink2); }
.ti-mulig b { color: var(--ti-ink); }

/* Uger og visninger */
.ti-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 12px; }
.ti-tab { border: 1px solid var(--ti-edge); background: var(--ti-panel2); color: var(--ti-ink2); border-radius: 8px; padding: 6px 14px; }
.ti-tab[aria-pressed="true"] { background: var(--ti-panel); color: var(--ti-ink); font-weight: 600; border-color: var(--ti-accent); }
.ti-week { display: grid; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.ti-day { background: var(--ti-panel2); border: 1px solid var(--ti-edge); border-radius: 10px; padding: 8px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ti-day.ti-idag { border-color: var(--ti-accent); }
.ti-day h3 { margin: 0 0 2px; font-size: 12px; color: var(--ti-ink2); text-transform: uppercase; letter-spacing: .04em; display: flex; justify-content: space-between; align-items: center; font-family: inherit; }
.ti-day h3 b { color: var(--ti-ink); font-variant-numeric: tabular-nums; }
.ti-add { font-size: 14px; line-height: 1; font-weight: 700; border: 1px solid var(--ti-edge); background: var(--ti-panel); color: var(--ti-ink2); border-radius: 6px; padding: 1px 7px; margin-left: 6px; }
.ti-add:hover { color: var(--ti-accent); border-color: var(--ti-accent); }
.ti-fdiv { font-size: 10px; color: var(--ti-muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 6px; border-top: 1px dashed var(--ti-edge); padding-top: 5px; }
.ti-ingen { font-size: 12.5px; color: var(--ti-ink2); }

/* Kortene */
#ti .ti-card, .ti-card { display: block; width: 100%; text-align: left; border: none; border-left: 4px solid var(--ti-farve, var(--ti-muted)); background: var(--ti-panel); border-radius: 6px; padding: 6px 8px; min-width: 0; color: var(--ti-ink); }
.ti-card:focus-visible { outline: 2px solid var(--ti-ink); outline-offset: 1px; }
.ti-card .t { font-size: 12.5px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; margin: -6px -8px 5px; padding: 5px 8px; border-bottom: 1px solid var(--ti-edge); border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--ti-farve, var(--ti-muted)) 13%, var(--ti-panel)); }
.ti-card .d { font-size: 12.5px; margin-top: 2px; overflow-wrap: anywhere; }
.ti-card.ti-usikker .d::after { content: " ⚠"; color: var(--ti-accent); }
.ti-card.ti-godkendt { outline: 2px solid var(--ti-good); }
.ti-card.ti-faktureret { opacity: .62; }
.ti-card.ti-faktureret .t { background: transparent; color: var(--ti-ink2); }
.ti-why { font-size: 11px; line-height: 1.35; color: var(--ti-muted); margin-top: 3px; }
.ti-why b { color: var(--ti-ink2); font-weight: 600; }
.ti-chip { display: inline-block; font-size: 10px; border-radius: 4px; padding: 0 5px; margin: 4px 4px 0 0; color: #fff; font-weight: 600; background: var(--ti-farve, var(--ti-muted)); }
.ti-chip.ti-revit { background: var(--ti-accent); }
.ti-prob { font-size: 10px; font-weight: 700; border-radius: 4px; padding: 0 5px; border: 1px solid currentColor; flex: none; }
.ti-pill { display: inline-block; font-size: 11px; border-radius: 999px; padding: 1px 9px; border: 1px solid var(--ti-edge); background: var(--ti-panel2); color: var(--ti-ink2); margin-top: 5px; }
.ti-pill.ti-gk { color: var(--ti-good); border-color: var(--ti-good); background: var(--ti-bg); }
.ti-fod { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; }
.ti-ok, #ti .ti-ok { font-size: 12px; font-weight: 700; border: 1px solid var(--ti-good); color: #fff; background: var(--ti-good); border-radius: 7px; padding: 3px 12px; margin-top: 5px; }
.ti-ok:hover { filter: brightness(1.1); }
.ti-wrap { display: flex; flex-direction: column; gap: 0; }

/* Knapper og bundlinje */
.ti-btn { font-weight: 600; border: 1px solid var(--ti-edge); background: var(--ti-panel2); color: var(--ti-ink); border-radius: 8px; padding: 9px 16px; }
.ti-btn.ti-p { background: var(--ti-accent); border-color: var(--ti-accent); color: #fff; }
.ti-btn.ti-slet { color: var(--ti-bad); }
.ti-btn:disabled { opacity: .5; cursor: default; }
.ti-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 14px 0; padding: 12px; background: var(--ti-panel); border: 1px solid var(--ti-edge); border-radius: 10px; }
.ti-note { font-size: 12.5px; color: var(--ti-ink2); }
.ti-tom-boks { padding: 40px; text-align: center; color: var(--ti-ink2); }

/* Rapport & faktura */
.ti-fx { margin-top: 8px; background: var(--ti-panel); border: 1px solid var(--ti-edge); border-radius: 10px; padding: 12px; }
.ti-fx h2 { margin: 0 0 6px; font-size: 13px; color: var(--ti-ink2); text-transform: uppercase; letter-spacing: .05em; font-family: inherit; }
.ti-fr { display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--ti-edge); padding: 7px 2px 7px 8px; min-width: 0; border-left: 4px solid var(--ti-farve, transparent); }
.ti-fr .bs { flex: 1; font-size: 13.5px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.ti-fr .tid, .ti-fr .tm { font-variant-numeric: tabular-nums; font-size: 13.5px; flex: none; text-align: right; }
.ti-fr .tm { width: 110px; }
.ti-fr.ti-sum { border-top: 2px solid var(--ti-edge); border-left-color: transparent; }
.ti-fr.ti-sum .bs { font-weight: 400; }

/* Rettevinduet: glider op nedefra */
.ti-ov { position: fixed; inset: 0; overscroll-behavior: contain; background: rgba(20, 18, 14, .45); display: flex; align-items: flex-end; justify-content: center; z-index: 50; }
.ti-ov[hidden] { display: none; }
.ti-ed { background: var(--ti-panel); border: 1px solid var(--ti-edge); border-radius: 14px 14px 0 0; padding: 16px; width: min(560px, 100%); box-sizing: border-box; display: grid; gap: 10px; max-height: 85vh; max-height: 85dvh; overflow: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.ti-ed-top { display: flex; justify-content: space-between; align-items: center; }
.ti-ed-top .ti-btn { padding: 5px 12px; }
.ti-ed label { font-size: 11px; color: var(--ti-ink2); display: grid; gap: 3px; }
.ti-ed input, .ti-ed select, .ti-ed textarea { font: inherit; font-size: 16px; color: var(--ti-ink); background: var(--ti-panel2); border: 1px solid var(--ti-edge); border-radius: 6px; padding: 7px 9px; min-width: 0; }
.ti-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.ti-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.ti-acts [hidden] { display: none; }
.ti-fejl { color: var(--ti-bad); font-size: 13px; margin: 0; }
.ti-ktx { display: grid; gap: 8px; border-top: 1px solid var(--ti-edge); padding-top: 10px; }
.ti-ktx[hidden] { display: none; }
.ti-kh { font-size: 11px; color: var(--ti-ink2); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.ti-ki { background: var(--ti-panel2); border: 1px solid var(--ti-edge); border-left: 3px solid var(--ti-accent); border-radius: 8px; padding: 8px 10px; min-width: 0; }
.ti-ki .km { font-size: 11px; color: var(--ti-muted); font-variant-numeric: tabular-nums; }
.ti-ki .ke { font-size: 12.5px; font-weight: 600; margin-top: 2px; overflow-wrap: anywhere; }
.ti-ki .kr { font-size: 12.5px; color: var(--ti-ink2); margin-top: 3px; line-height: 1.45; }
.ti-ki ul { margin: 5px 0 0; padding-left: 16px; font-size: 12px; color: var(--ti-ink2); }
.ti-ki li b { color: var(--ti-ink); font-weight: 600; text-transform: capitalize; }

@media (max-width: 700px) {
  #ti { padding: 0 10px 20px; border-radius: 10px; }
  .ti-week { display: flex; flex-direction: column; }
  .ti-row { grid-template-columns: 1fr 1fr; }
  .ti-maaned { flex: 1; }
  .ti-maaned select { flex: 1; }
  .ti-fr .tm { width: 90px; }
}
@media print {
  .ti-bar, .ti-add, .ti-ok, #ti-ny, #ti-vindue, .ti-tabs { display: none !important; }
  #ti { background: none; }
}