/* TrussQuote — warstwa wyglądu nakładana na Bootstrap 5.3.
   Bootstrap zostaje: wszystkie szablony korzystają z jego siatki i komponentów.
   Ten plik zmienia tokeny kolorów i typografii oraz dokłada szkielet aplikacji
   (lewa szyna nawigacji + pasek górny). Nie zmienia żadnych nazw pól formularzy
   ani identyfikatorów, na których opiera się JavaScript kalkulatora. */

/* ------------------------------------------------------------- tokeny --- */
:root {
  --tq-bg: #eef1ef;
  --tq-surface: #ffffff;
  --tq-surface-2: #f6f8f7;
  --tq-surface-3: #eaeeed;
  --tq-line: #dbe2e0;
  --tq-line-strong: #c3cecb;
  --tq-ink: #121917;
  --tq-ink-2: #4d5a58;
  --tq-ink-3: #798583;
  --tq-accent: #0f504d;
  --tq-accent-hover: #0a3d3b;
  --tq-accent-soft: #e0eceb;
  --tq-accent-line: #bcd6d3;
  --tq-gold: #b06f12;
  --tq-gold-fill: #c2761a;
  --tq-ok: #2f7d5c;
  --tq-ok-soft: #e3f0ea;
  --tq-warn: #b0700f;
  --tq-warn-soft: #f8eeda;
  --tq-bad: #a83329;
  --tq-bad-soft: #f8e6e3;
  --tq-neutral: #67746f;
  --tq-shadow: 0 1px 2px rgba(16,32,30,.05), 0 8px 24px -16px rgba(16,32,30,.35);
  --tq-radius: 10px;
  --tq-radius-sm: 6px;
  --tq-ui: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --tq-display: "Segoe UI Variable Display", "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif;
  --tq-data: "Cascadia Mono", Consolas, ui-monospace, monospace;

  /* Zmienne Bootstrapa — pozwalają przemalować komponenty bez nadpisywania reguł.
     Bootstrap 5.3 składa kolory z wariantów *-rgb (rgba(var(--bs-primary-rgb), …)),
     więc sam --bs-primary czy --bs-link-color to za mało: bez wersji rgb linki
     i .text-primary zostają domyślnie niebieskie. */
  --bs-body-bg: var(--tq-bg);
  --bs-body-color: var(--tq-ink);
  --bs-border-color: var(--tq-line);
  --bs-border-radius: var(--tq-radius-sm);
  --bs-primary: var(--tq-accent);
  --bs-primary-rgb: 15, 80, 77;
  --bs-primary-text-emphasis: var(--tq-accent);
  --bs-primary-bg-subtle: var(--tq-accent-soft);
  --bs-primary-border-subtle: var(--tq-accent-line);
  --bs-link-color: var(--tq-accent);
  --bs-link-color-rgb: 15, 80, 77;
  --bs-link-hover-color: var(--tq-accent-hover);
  --bs-link-hover-color-rgb: 10, 61, 59;
  --bs-font-sans-serif: var(--tq-ui);
  --bs-secondary-color: var(--tq-ink-2);
  --bs-emphasis-color: var(--tq-ink);

  /* Ciemny pasek podsumowania zostaje ciemny w obu motywach — to jego rola. */
  --tq-hero-bg: #0f504d;
  --tq-hero-ink: #dcecea;
  --tq-hero-caption: #a9d3ce;
  --tq-hero-gold: #f0b661;
}

/* --------------------------------------------------------- motyw ciemny ---
   Bootstrap 5.3 przemalowuje własne komponenty po data-bs-theme="dark",
   więc wystarczy podmienić tokeny --tq-* i warianty *-rgb. */
[data-bs-theme="dark"] {
  --tq-bg: #0c100f;
  --tq-surface: #151b1a;
  --tq-surface-2: #1b2221;
  --tq-surface-3: #222b29;
  --tq-line: #28322f;
  --tq-line-strong: #3a4744;
  --tq-ink: #e7eceb;
  --tq-ink-2: #a2afac;
  --tq-ink-3: #7f8c8a;
  --tq-accent: #4fb0a8;
  --tq-accent-hover: #66c2ba;
  --tq-accent-soft: #16332f;
  --tq-accent-line: #245a55;
  --tq-gold: #dda254;
  --tq-gold-fill: #c98a35;
  --tq-ok: #5cb08a;
  --tq-ok-soft: #16281f;
  --tq-warn: #d29a45;
  --tq-warn-soft: #2a2216;
  --tq-bad: #d7736a;
  --tq-bad-soft: #2d1c1a;
  --tq-neutral: #8d9a96;
  --tq-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.7);

  --bs-primary-rgb: 79, 176, 168;
  --bs-link-color-rgb: 79, 176, 168;
  --bs-link-hover-color-rgb: 102, 194, 186;
  --bs-body-bg: var(--tq-bg);
  --bs-body-color: var(--tq-ink);
  --bs-border-color: var(--tq-line);
  --bs-secondary-color: var(--tq-ink-2);
  --bs-emphasis-color: var(--tq-ink);

  --tq-hero-bg: #123f3c;
}
/* Na ciemnym tle akcent jest jasny, więc tekst na przyciskach musi być ciemny. */
[data-bs-theme="dark"] .btn-primary { --bs-btn-color: #06201e; --bs-btn-hover-color: #06201e; }
[data-bs-theme="dark"] .btn-warning { --bs-btn-color: #1b1206; --bs-btn-hover-color: #1b1206; }
[data-bs-theme="dark"] .tq-new .btn-tq-new,
[data-bs-theme="dark"] .tq-new .btn-tq-caret { color: #1b1206; }
[data-bs-theme="dark"] .tq-mark svg { stroke: #06201e; }

body {
  background: var(--tq-bg);
  color: var(--tq-ink);
  font-family: var(--tq-ui);
  font-size: 15px;
}

h1, h2, h3, h4, h5 { font-family: var(--tq-display); }

/* Liczby w kolumnach mają się wyrównywać. */
.tq-num, .cost-value, .total-card .value, td.text-end, th.text-end {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------ szkielet aplikacji --- */
.tq-shell { min-height: 100vh; }

/* Szyna jest przypięta do okna, a nie do siatki — dzięki temu sięga dołu ekranu
   niezależnie od długości treści i nie zostawia pustej kolumny pod spodem. */
.tq-rail {
  background: var(--tq-surface);
  border-right: 1px solid var(--tq-line);
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 12px;
  position: fixed; top: 0; left: 0; bottom: 0; width: 228px;
  overflow-y: auto; z-index: 1030;
}

.tq-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px;
  text-decoration: none; color: var(--tq-ink); }
.tq-brand:hover { text-decoration: none; color: var(--tq-ink); }
.tq-mark {
  width: 30px; height: 30px; border-radius: 8px; background: var(--tq-accent);
  display: grid; place-items: center; flex: none;
}
.tq-brand b { font-family: var(--tq-display); font-size: 16px; letter-spacing: -.02em; color: var(--tq-ink); display: block; line-height: 1.15; }
.tq-brand span { font-size: 10.5px; color: var(--tq-ink-3); letter-spacing: .04em; }

.tq-new { display: flex; margin-bottom: 14px; }
.tq-new .btn-tq-new {
  flex: 1; background: var(--tq-gold-fill); color: #fff; border: 0;
  border-radius: var(--tq-radius-sm) 0 0 var(--tq-radius-sm);
  padding: 10px 12px; font-weight: 650; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.tq-new .btn-tq-caret {
  background: var(--tq-gold-fill); color: #fff; border: 0; padding: 0 10px;
  border-radius: 0 var(--tq-radius-sm) var(--tq-radius-sm) 0; margin-left: 1px;
}
.tq-new .btn-tq-new:hover, .tq-new .btn-tq-caret:hover { filter: brightness(1.06); color: #fff; }
/* Kalkulator nie ma osobnej pozycji w nawigacji, więc stan „jesteś tutaj”
   niesie sam przycisk. */
.tq-new-active { position: relative; }
.tq-new-active::before {
  content: ""; position: absolute; left: -12px; top: 4px; bottom: 4px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--tq-gold-fill);
}
.tq-new-active .btn-tq-new, .tq-new-active .btn-tq-caret { box-shadow: inset 0 0 0 2px rgba(255,255,255,.45); }

.tq-navgroup { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tq-ink-3); padding: 14px 10px 6px; }

.tq-nav { display: flex; flex-direction: column; gap: 2px; }
.tq-nav > a, .tq-nav > .tq-navitem {
  display: flex; align-items: center; gap: 11px;
  font-size: 14px; font-weight: 550; color: var(--tq-ink-2);
  padding: 8px 10px; border-radius: var(--tq-radius-sm);
  text-decoration: none; position: relative;
}
.tq-nav > a:hover { background: var(--tq-surface-2); color: var(--tq-ink); text-decoration: none; }
.tq-nav > a.active { background: var(--tq-accent-soft); color: var(--tq-accent); font-weight: 650; }
.tq-nav > a.active::before {
  content: ""; position: absolute; left: -12px; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--tq-accent);
}
.tq-nav svg { flex: none; opacity: .85; }
.tq-nav .tq-count {
  margin-left: auto; font-family: var(--tq-data); font-size: 11px; font-weight: 700;
  color: var(--tq-ink-3); background: var(--tq-surface-3); border-radius: 99px; padding: 1px 7px;
}
.tq-nav > a.active .tq-count { background: var(--tq-surface); color: var(--tq-accent); }

.tq-subnav { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 2px 27px;
  padding-left: 9px; border-left: 1px solid var(--tq-line); }
.tq-subnav a { font-size: 13px; color: var(--tq-ink-3); padding: 5px 9px;
  border-radius: 5px; text-decoration: none; }
.tq-subnav a:hover { background: var(--tq-surface-2); color: var(--tq-ink); text-decoration: none; }
.tq-subnav a.active { color: var(--tq-accent); font-weight: 650; background: var(--tq-accent-soft); }

.tq-railfoot { margin-top: auto; border-top: 1px solid var(--tq-line); padding-top: 12px;
  display: flex; align-items: center; gap: 10px; }
.tq-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--tq-accent-soft);
  color: var(--tq-accent); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.tq-railfoot b { font-size: 13px; display: block; line-height: 1.2; }
.tq-railfoot span { font-size: 11px; color: var(--tq-ink-3); }

.tq-main { display: flex; flex-direction: column; min-width: 0; margin-left: 228px; }
.tq-topbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 22px; background: var(--tq-surface);
  border-bottom: 1px solid var(--tq-line);
  position: sticky; top: 0; z-index: 1020;
}
.tq-content { padding: 20px 22px 40px; max-width: 1500px; width: 100%; }

.tq-railtoggle { display: none; }

.tq-themetoggle { margin-left: auto; }
.tq-themetoggle .moon { display: none; }
[data-bs-theme="dark"] .tq-themetoggle .sun { display: none; }
[data-bs-theme="dark"] .tq-themetoggle .moon { display: inline; }

/* ------------------------------------------------------- komponenty --- */
.card {
  border: 1px solid var(--tq-line);
  border-radius: var(--tq-radius);
  box-shadow: var(--tq-shadow);
  background: var(--tq-surface);
}
.card-header {
  background: var(--tq-surface);
  font-family: var(--tq-display);
  font-weight: 650; font-size: 14.5px; color: var(--tq-ink);
  border-bottom: 1px solid var(--tq-line);
  padding: 12px 16px;
}

.page-title { font-family: var(--tq-display); font-size: 1.5rem; font-weight: 700;
  letter-spacing: -.02em; color: var(--tq-ink); }
.page-subtitle { color: var(--tq-ink-3); font-size: .92rem; }

.cost-value { font-family: var(--tq-data); font-weight: 650; color: var(--tq-accent); }
.formula-hint { background: var(--tq-accent-soft); color: var(--tq-ink-2);
  border-radius: var(--tq-radius-sm); padding: 10px; font-size: .875rem; }

.total-card { background: var(--tq-hero-bg); color: var(--tq-hero-ink); border-radius: var(--tq-radius); }
.total-card .caption { color: var(--tq-hero-caption); font-size: .7rem; font-weight: 700; letter-spacing: .05em; }
.total-card .value { color: #fff; font-family: var(--tq-data); font-size: 1.15rem;
  font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.total-card .value.gross { color: var(--tq-hero-gold); font-size: 1.5rem; font-weight: 700; }
.total-card .small-value { font-size: .98rem; }

/* Duża kwota na pulpicie: monospace przy tej wielkości rozjeżdża się na spacjach
   tysięcy, więc zwężamy odstępy zamiast powiększać liczbę. */
.total-card .value.gross { letter-spacing: -.035em; }

/* ------------------------------------------------------- pulpit --- */
.tq-eyebrow { font-size: .66rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tq-ink-3); }

.tq-spark { width: 100%; height: 92px; display: block; overflow: visible; }
.tq-grid { stroke: var(--tq-line); stroke-width: .4; vector-effect: non-scaling-stroke; }
.tq-sparkline { fill: none; stroke: var(--tq-accent); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.tq-sparkarea { fill: var(--tq-accent-soft); stroke: none; }
/* Najechanie na tydzień: pionowy znacznik i podpowiedź z liczbami. */
.tq-sparkmark { stroke: var(--tq-accent); stroke-width: 1; opacity: 0;
  vector-effect: non-scaling-stroke; }
.tq-sparkzone:hover .tq-sparkmark { opacity: .55; }

.tq-funnel { display: flex; gap: 2px; height: 34px; border-radius: var(--tq-radius-sm);
  overflow: hidden; margin-bottom: 12px; }
.tq-funnel-part { display: grid; place-items: center; min-width: 30px;
  font-size: .72rem; font-weight: 700; color: #fff; }
.tq-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .82rem; color: var(--tq-ink-2); }
.tq-legend span { display: inline-flex; align-items: center; gap: 7px; }
.tq-legend i { width: 9px; height: 9px; border-radius: 2px; display: block; }

.tq-fill-neutral { background: var(--tq-neutral); }
.tq-fill-gold { background: var(--tq-gold-fill); }
.tq-fill-ok { background: var(--tq-ok); }
.tq-fill-bad { background: var(--tq-bad); }
.tq-fill-accent { background: var(--tq-accent); }
.tq-fill-muted { background: var(--tq-line-strong); }
[data-bs-theme="dark"] .tq-funnel-part { color: #0d1211; }

/* --------------------------------------------------- lista wycen --- */
.tq-filterbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tq-filterbar .form-select { width: auto; min-width: 150px; }
.tq-search { position: relative; flex: 1 1 300px; min-width: 240px; }
.tq-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--tq-ink-3); pointer-events: none; }
.tq-search .form-control { padding-left: 34px; }

/* Druga linia w komórce: miejscowość pod klientem, metraż pod typem dachu. */
.tq-sub { display: block; font-size: .72rem; color: var(--tq-ink-3); font-weight: 400; }
.tq-sub-warn { color: var(--tq-warn); font-weight: 600; }
.tq-tag { display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: 1px 6px; border-radius: 4px; margin-left: 4px;
  background: var(--tq-accent-soft); color: var(--tq-accent); vertical-align: 1px; }

.tq-deviation { display: inline-block; padding: 2px 8px; border-radius: var(--tq-radius-sm);
  font-variant-numeric: tabular-nums; }
.tq-deviation-high { background: var(--tq-bad-soft); color: var(--tq-bad); }
.tq-deviation-high .tq-sub { color: var(--tq-bad); }
.tq-deviation-low { background: var(--tq-accent-soft); color: var(--tq-accent); }
.tq-deviation-low .tq-sub { color: var(--tq-accent); }

/* Menu w wierszu tabeli musi wychodzić poza obszar przewijania. */
.table-responsive:has(.dropdown-menu.show) { overflow: visible; }

/* ----------------------------------------------------- kalkulator --- */
.tq-calc { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.tq-steps { min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.tq-step { background: var(--tq-surface); border: 1px solid var(--tq-line);
  border-radius: var(--tq-radius); box-shadow: var(--tq-shadow); }
.tq-step > summary { display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  cursor: pointer; list-style: none; }
.tq-step > summary::-webkit-details-marker { display: none; }
.tq-step > summary:hover { background: var(--tq-surface-2); border-radius: var(--tq-radius); }
.tq-step[open] > summary { border-bottom: 1px solid var(--tq-line); border-radius: var(--tq-radius) var(--tq-radius) 0 0; }
.tq-step > summary h2 { font-size: .95rem; font-weight: 650; margin: 0; letter-spacing: -.01em; }
.tq-stepno { width: 24px; height: 24px; border-radius: 6px; flex: none; display: grid; place-items: center;
  background: var(--tq-accent-soft); color: var(--tq-accent);
  font-family: var(--tq-data); font-size: .75rem; font-weight: 700; }
.tq-stepno-opt { background: var(--tq-surface-3); color: var(--tq-ink-3); }
.tq-peek { margin-left: auto; font-size: .76rem; color: var(--tq-ink-3); text-align: right; }
.tq-caret { flex: none; color: var(--tq-ink-3); transition: transform .16s ease; }
.tq-step[open] .tq-caret { transform: rotate(90deg); }
.tq-stepbody { padding: 16px; }
.tq-optional { border-style: dashed; }
.tq-optional > summary h2 { color: var(--tq-ink-2); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .tq-caret { transition: none; } }

.tq-rule { margin: 16px 0; border-color: var(--tq-line); opacity: 1; }

.tq-note { display: flex; align-items: flex-start; gap: 9px; font-size: .82rem;
  background: var(--tq-surface-2); border: 1px solid var(--tq-line);
  border-radius: var(--tq-radius-sm); padding: 9px 12px; color: var(--tq-ink-2); }
.tq-note svg { flex: none; margin-top: 1px; color: var(--tq-ink-3); }
.tq-note-warn { background: var(--tq-warn-soft); border-color: var(--tq-warn); color: var(--tq-warn); }

.tq-panel { background: var(--tq-surface-2); border: 1px solid var(--tq-line);
  border-radius: var(--tq-radius-sm); padding: 13px; }

.tq-dropzone { display: flex; align-items: center; gap: 12px; padding: 14px;
  border: 1.5px dashed var(--tq-accent-line); border-radius: var(--tq-radius-sm);
  background: var(--tq-accent-soft); cursor: pointer; }
.tq-dropzone:hover, .tq-dropzone:focus-visible { border-color: var(--tq-accent); }
.tq-dropicon { width: 34px; height: 34px; border-radius: 8px; flex: none; display: grid;
  place-items: center; background: var(--tq-surface); color: var(--tq-accent); }
.tq-dropzone span span { font-size: .8rem; color: var(--tq-ink-2); }

.tq-addons th { font-size: .66rem; }
.tq-addons .tq-col-qty, .tq-addons .tq-col-rate { width: 22%; }
.tq-addons .tq-col-cost { width: 120px; }
.tq-addons tfoot td { background: var(--tq-surface-2); }

.tq-toggle-row { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; padding: 11px 0; border-bottom: 1px solid var(--tq-line); }
.tq-toggle-row:first-child { padding-top: 0; }
.tq-toggle-row:last-child, .tq-toggle-row.border-0 { border-bottom: 0; }

/* Podsumowanie zostaje na ekranie — to jest sedno przebudowy: zmieniasz stawkę
   i od razu widzisz cenę, bez przewijania na dół formularza. */
.tq-summary { position: sticky; top: 74px; display: flex; flex-direction: column; gap: 12px; }
.tq-pricebox { padding: 16px; }
.tq-pricebox .value.gross { font-size: 1.75rem; line-height: 1.15; }
.tq-pricetrio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.16); }
.tq-pricegross { display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.16); }
.tq-breakdown td { padding: 6px 0; border-color: var(--tq-line); }
.tq-breakdown tr:last-child td { border-bottom: 0; }
.tq-breakdown-sum td { font-weight: 650; background: var(--tq-surface-2); padding: 6px 8px; }

.tq-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  position: sticky; bottom: 0; z-index: 3; margin-top: 14px;
  background: var(--tq-surface); border: 1px solid var(--tq-line);
  border-radius: var(--tq-radius); box-shadow: var(--tq-shadow); padding: 12px 16px; }

@media (max-width: 1199.98px) {
  .tq-calc { grid-template-columns: 1fr; }
  .tq-summary { position: static; }
  .tq-peek { display: none; }
}

.btn { font-weight: 600; border-radius: var(--tq-radius-sm); }
.btn-primary {
  --bs-btn-bg: var(--tq-accent); --bs-btn-border-color: var(--tq-accent);
  --bs-btn-hover-bg: var(--tq-accent-hover); --bs-btn-hover-border-color: var(--tq-accent-hover);
  --bs-btn-active-bg: var(--tq-accent-hover); --bs-btn-active-border-color: var(--tq-accent-hover);
  --bs-btn-disabled-bg: var(--tq-accent); --bs-btn-disabled-border-color: var(--tq-accent);
}
.btn-outline-primary {
  --bs-btn-color: var(--tq-accent); --bs-btn-border-color: var(--tq-line-strong);
  --bs-btn-hover-bg: var(--tq-accent); --bs-btn-hover-border-color: var(--tq-accent);
  --bs-btn-active-bg: var(--tq-accent-hover); --bs-btn-active-border-color: var(--tq-accent-hover);
}
.btn-outline-secondary {
  --bs-btn-color: var(--tq-ink-2); --bs-btn-border-color: var(--tq-line-strong);
  --bs-btn-hover-bg: var(--tq-surface-2); --bs-btn-hover-color: var(--tq-ink);
  --bs-btn-hover-border-color: var(--tq-line-strong);
}
.btn-warning {
  --bs-btn-bg: var(--tq-gold-fill); --bs-btn-border-color: var(--tq-gold-fill); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--tq-gold); --bs-btn-hover-border-color: var(--tq-gold); --bs-btn-hover-color: #fff;
}

.form-control, .form-select { border-color: var(--tq-line-strong); border-radius: var(--tq-radius-sm); }
.form-control:focus, .form-select:focus {
  border-color: var(--tq-accent); box-shadow: 0 0 0 3px var(--tq-accent-soft);
}
.form-label { font-size: .78rem; font-weight: 650; color: var(--tq-ink-2); margin-bottom: .25rem; }

/* Pola stojące obok siebie mają mieć ramki w jednej linii, także wtedy gdy
   jedna etykieta mieści się w wierszu, a sąsiednia łamie się na dwa
   ("Połać dachu" obok "Obciążenie pasa górnego [kg/m²]"). Rezerwujemy
   miejsce na dwie linie, więc dolne krawędzie etykiet zawsze się zgadzają. */
.tq-stepbody .row > [class*="col-"] > .form-label,
.tq-formgrid .row > [class*="col-"] > .form-label {
  display: flex; align-items: flex-end; min-height: 3em; margin-bottom: .3rem;
}
/* Wiersz z jednym polem nie potrzebuje rezerwy — nie ma z czym równać. */
.tq-stepbody .row > .col-12:only-child > .form-label { min-height: 0; }
.form-text { font-size: .76rem; color: var(--tq-ink-3); }
.input-group-text { background: var(--tq-surface-2); border-color: var(--tq-line-strong);
  color: var(--tq-ink-3); font-size: .8rem; }
.form-check-input:checked { background-color: var(--tq-accent); border-color: var(--tq-accent); }
.form-control[readonly] { background: var(--tq-surface-2); color: var(--tq-ink-3); }

.table { --bs-table-hover-bg: var(--tq-surface-2); border-color: var(--tq-line); }
/* Kwoty i liczby nie mogą łamać się na kilka linii — "66 557,41 zł" w trzech
   wierszach jest nieczytelne. Wąska tabela przewija się w poziomie wewnątrz
   .table-responsive, co jest mniejszym złem. */
.table td.text-end, .table th.text-end, .table td.text-nowrap { white-space: nowrap; }
.table-primary { --bs-table-bg: var(--tq-accent-soft); --bs-table-color: var(--tq-ink); }
.table > thead > tr > th {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tq-ink-3); background: var(--tq-surface-2);
  border-bottom: 1px solid var(--tq-line); white-space: nowrap;
}
.table > tbody > tr > td { border-color: var(--tq-line); }

.badge { font-weight: 650; letter-spacing: .01em; }
.text-bg-secondary { background: var(--tq-surface-3) !important; color: var(--tq-neutral) !important; }
.text-bg-warning { background: var(--tq-warn-soft) !important; color: var(--tq-warn) !important; }
.text-bg-success { background: var(--tq-ok-soft) !important; color: var(--tq-ok) !important; }
.text-bg-danger { background: var(--tq-bad-soft) !important; color: var(--tq-bad) !important; }
.text-bg-primary { background: var(--tq-accent-soft) !important; color: var(--tq-accent) !important; }
.text-bg-dark { background: var(--tq-surface-3) !important; color: var(--tq-ink-2) !important; }

.alert { border-radius: var(--tq-radius); border-width: 1px; border-left-width: 3px; }
.dropdown-menu { border-color: var(--tq-line-strong); border-radius: var(--tq-radius-sm);
  box-shadow: var(--tq-shadow); font-size: .9rem; }
.modal-content { border-radius: var(--tq-radius); border-color: var(--tq-line-strong); }

a:focus-visible, button:focus-visible, .btn:focus-visible,
.form-control:focus-visible, .form-select:focus-visible {
  outline: 2px solid var(--tq-accent); outline-offset: 2px;
}

/* ---------------------------------------------------- karta oferty --- */
.tq-num { font-family: var(--tq-data); }

.tq-quotefoot { display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 14px 24px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--tq-line); }

/* Ścieżka statusu: jeden formularz, a każdy krok to przycisk wysyłający.
   Dzięki temu zmiana statusu to jedno kliknięcie, bez listy i „Zapisz”. */
.tq-pipeline { display: inline-flex; flex-wrap: wrap; }
.tq-pipestep { font: inherit; font-size: .8rem; font-weight: 600; line-height: 1.4;
  color: var(--tq-ink-3); background: var(--tq-surface-2);
  border: 1px solid var(--tq-line); border-right: 0; padding: 6px 13px; }
.tq-pipestep:first-of-type { border-radius: var(--tq-radius-sm) 0 0 var(--tq-radius-sm); }
.tq-pipestep:last-of-type { border-right: 1px solid var(--tq-line);
  border-radius: 0 var(--tq-radius-sm) var(--tq-radius-sm) 0; }
.tq-pipestep:hover:not(:disabled) { background: var(--tq-surface-3); color: var(--tq-ink); }
.tq-pipestep:disabled { cursor: default; }
.tq-pipestep.past { color: var(--tq-ok); background: var(--tq-ok-soft); border-color: transparent; }
.tq-pipestep.now { color: #fff; background: var(--tq-accent);
  border-color: var(--tq-accent); font-weight: 700; }
[data-bs-theme="dark"] .tq-pipestep.now { color: #06201e; }

.tq-headamounts { display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: flex-end; }
.tq-grossvalue { font-family: var(--tq-data); font-weight: 700; font-size: 1.25rem;
  color: var(--tq-gold); letter-spacing: -.02em; }

/* Menu PDF ma dwie linie w pozycji, więc nie może ciąć tekstu. */
.tq-pdfmenu { min-width: 300px; }
.tq-pdfmenu .dropdown-item { white-space: normal; }

/* Zakładki: podkreślenie akcentem zamiast pudełek Bootstrapa. */
.tq-tabs { padding: 0 12px; border-bottom: 1px solid var(--tq-line); flex-wrap: wrap; }
.tq-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  padding: 11px 14px; font-size: .9rem; font-weight: 600; color: var(--tq-ink-3); }
.tq-tabs .nav-link:hover { color: var(--tq-ink); border-bottom-color: var(--tq-line-strong); }
.tq-tabs .nav-link.active { color: var(--tq-accent); background: transparent;
  border-bottom-color: var(--tq-accent); }

/* Udział pozycji w cenie — proporcje widać szybciej niż z samych kwot. */
.tq-shares { display: grid; gap: 9px; }
.tq-share { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; align-items: baseline; }
.tq-share-name { font-size: .85rem; color: var(--tq-ink-2); }
.tq-share-value { font-size: .85rem; font-weight: 650; }
.tq-share-track { grid-column: 1 / -1; height: 5px; border-radius: 3px;
  background: var(--tq-surface-3); overflow: hidden; }
.tq-share-track i { display: block; height: 100%; border-radius: 3px;
  background: var(--tq-accent); opacity: .85; }

.tq-deflist { display: grid; grid-template-columns: auto 1fr; gap: 9px 20px;
  align-items: baseline; font-size: .9rem; }
.tq-deflist dt { color: var(--tq-ink-3); font-size: .8rem; font-weight: 600; }
.tq-deflist dd { margin: 0; font-weight: 550; }

/* Historia zmian jako oś czasu. */
.tq-tl { display: grid; grid-template-columns: 14px 1fr; gap: 12px;
  padding-bottom: 16px; position: relative; }
.tq-tl:not(:last-child)::before { content: ""; position: absolute; left: 6px; top: 17px;
  bottom: 0; width: 1px; background: var(--tq-line); }
.tq-tl-dot { width: 11px; height: 11px; border-radius: 50%; margin-top: 5px;
  border: 2px solid var(--tq-accent); background: var(--tq-surface); }
.tq-tl-time { font-size: .78rem; color: var(--tq-ink-3); }

/* ---------------------------------------------------- szablony PDF --- */
.tq-pdflayout { display: grid; grid-template-columns: 250px minmax(0, 1fr) 300px;
  gap: 20px; align-items: start; }
.tq-blocklist { display: grid; gap: 2px; align-content: start; }
.tq-blocklist button { font: inherit; font-size: .85rem; text-align: left; background: none;
  border: 0; cursor: pointer; padding: 8px 10px; border-radius: var(--tq-radius-sm);
  color: var(--tq-ink-2); display: flex; align-items: center; gap: 8px; }
.tq-blocklist button:hover { background: var(--tq-surface-2); color: var(--tq-ink); }
.tq-blocklist button[aria-current="true"] { background: var(--tq-accent-soft);
  color: var(--tq-accent); font-weight: 650; }
.tq-blocklist .tq-eyebrow { margin-top: 14px; }
.tq-blocklist .tq-eyebrow:first-child { margin-top: 0; }
.tq-blocktag { margin-left: auto; font-size: .6rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--tq-gold); background: var(--tq-warn-soft);
  border-radius: 4px; padding: 1px 5px; }
.tq-blockpane { display: none; }
.tq-blockpane.active { display: block; }
.tq-tmpl { font-family: var(--tq-data); font-size: .82rem; line-height: 1.6; resize: vertical; }
.tq-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.tq-chip { font-family: var(--tq-data); font-size: .72rem; background: var(--tq-surface-3);
  color: var(--tq-accent); border: 1px solid var(--tq-line); border-radius: 4px;
  padding: 2px 7px; cursor: pointer; }
.tq-chip:hover { background: var(--tq-accent-soft); border-color: var(--tq-accent-line); }
/* Podgląd ma wyglądać jak kartka dokumentu, nie jak pole formularza. */
.tq-paper { margin-top: 8px; background: var(--tq-surface); border: 1px solid var(--tq-line-strong);
  border-radius: 4px; padding: 16px 18px; font-size: .8rem; line-height: 1.65;
  color: var(--tq-ink-2); white-space: pre-wrap; box-shadow: var(--tq-shadow); }

@media (max-width: 1199.98px) {
  .tq-pdflayout { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------ statystyki --- */
.tq-bignum { font-family: var(--tq-data); font-size: 2.6rem; font-weight: 700;
  letter-spacing: -.03em; line-height: 1.05; color: var(--tq-ok); }
.tq-spark-tall { height: 150px; }
.tq-monthaxis { display: flex; justify-content: space-between; gap: 6px;
  margin-top: 6px; font-size: .72rem; color: var(--tq-ink-3); text-align: center; }
.tq-monthaxis span { flex: 1 1 0; min-width: 0; }
.tq-monthaxis b { display: block; color: var(--tq-ink); font-size: .82rem; }

/* Pasek porównawczy: nazwa, długość, wartość. */
.tq-bar { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 5rem;
  gap: 12px; align-items: center; margin-bottom: 10px; font-size: .85rem; }
.tq-bar:last-child { margin-bottom: 0; }
.tq-bar-track { height: 18px; border-radius: 4px; background: var(--tq-surface-3); overflow: hidden; }
.tq-bar-track i { display: block; height: 100%; background: var(--tq-accent); border-radius: 0 4px 4px 0; }
.tq-bar-value { text-align: right; font-weight: 650; }

/* --------------------------------------------------------- klienci --- */
/* Lista i podgląd obok siebie — wybór klienta nie zabiera całego ekranu. */
.tq-clientlayout { display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px; align-items: start; }
.tq-panelcol { position: sticky; top: 74px; }
.tq-panelcard .card-body { display: flex; flex-direction: column; }
.tq-clientrow { cursor: pointer; }
/* Wybrany wiersz musi być widoczny obok panelu — sam odcień tła to za mało. */
.tq-clientrow.active > * { background: var(--tq-accent-soft) !important; }
.tq-clientrow.active > *:first-child { box-shadow: inset 3px 0 0 var(--tq-accent); }
.tq-clientrow.active .tq-clientlink { color: var(--tq-accent); }
.tq-panelsection { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--tq-line); }
.tq-clientquotes { display: grid; gap: 2px; margin-top: 8px; max-height: 320px; overflow-y: auto; }
.tq-clientquote { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 6px 8px; border-radius: var(--tq-radius-sm); font-size: .85rem;
  color: var(--tq-ink); text-decoration: none; }
.tq-clientquote:hover { background: var(--tq-surface-2); color: var(--tq-ink); }
.tq-clientquote .badge { font-size: .62rem; }

@media (max-width: 1199.98px) {
  .tq-clientlayout { grid-template-columns: 1fr; }
  .tq-panelcol { position: static; }
}

/* -------------------------------------------------------- telefony --- */
@media (max-width: 991.98px) {
  .tq-main { margin-left: 0; }
  .tq-rail {
    width: 250px; z-index: 1045;
    transform: translateX(-100%); transition: transform .18s ease;
    box-shadow: 0 0 40px rgba(0,0,0,.18);
  }
  .tq-shell.tq-rail-open .tq-rail { transform: translateX(0); }
  .tq-railtoggle { display: inline-flex; }
  .tq-content { padding: 16px 14px 40px; }
  .tq-topbar { padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .tq-rail { transition: none; }
}

/* ================================================== moduł produkcji === */

/* Pasek postępu: pięć kropek — projekt, cięcie, składanie, załadunek, montaż.
   Nazwy z przedrostkiem `tq-prog`, bo `tq-step` należy do sekcji kalkulatora. */
.tq-prog { display: inline-flex; align-items: center; gap: 4px; }
.tq-progdot {
  width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto;
  border: 1.5px solid var(--tq-line-strong); background: transparent;
}
.tq-prog-done { background: var(--tq-ok); border-color: var(--tq-ok); }
.tq-prog-partial { background: var(--tq-warn); border-color: var(--tq-warn); }
/* Następny w kolejce — obrys akcentu, bo robota jeszcze się nie zaczęła. */
.tq-prog-current { background: transparent; border-color: var(--tq-accent); border-width: 2px; }
/* Etap wpisany poza kolejnością (np. montaż zaklepany przed cięciem). */
.tq-prog-ahead { background: transparent; border-color: var(--tq-warn); border-style: dashed; }
.tq-prog-open { background: transparent; border-color: var(--tq-line-strong); }

.tq-prog-lg { display: flex; flex-wrap: wrap; gap: 6px; }
.tq-progbox {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px;
  border: 1px solid var(--tq-line); border-radius: 999px;
  font-size: .78rem; color: var(--tq-ink-2); background: var(--tq-surface-2);
}
.tq-progbox.tq-prog-done { background: var(--tq-ok-soft); border-color: var(--tq-ok);
  color: var(--tq-ok); font-weight: 600; }
.tq-progbox.tq-prog-partial { background: var(--tq-warn-soft); border-color: var(--tq-warn);
  color: var(--tq-warn); font-weight: 600; }
.tq-progbox.tq-prog-current { border-color: var(--tq-accent); color: var(--tq-accent);
  font-weight: 600; }
.tq-progbox.tq-prog-ahead { border-color: var(--tq-warn); border-style: dashed;
  color: var(--tq-ink-2); }

/* Kafelek liczbowy na karcie dachu. */
.tq-stat {
  border: 1px solid var(--tq-line); border-radius: var(--tq-radius-sm);
  padding: 8px 12px; background: var(--tq-surface-2); height: 100%;
}
.tq-stat span { display: block; font-size: .7rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tq-ink-3); }
.tq-stat b { font-family: var(--tq-data); font-size: 1.05rem; color: var(--tq-ink); }

/* --------------------------------------------- harmonogram montażu --- */

/* Wiersze to dni tygodnia, kolumny to brygady. */
.tq-calendar { margin-bottom: 0; min-width: 44rem; }
.tq-calendar > thead th {
  font-size: .74rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tq-ink-3); font-weight: 600; padding: 8px 6px; text-align: center;
  border-bottom: 1px solid var(--tq-line-strong);
  border-left: 1px solid var(--tq-line);
}
.tq-calendar > thead th .tq-sub { text-transform: none; letter-spacing: 0; font-size: .72rem;
  color: var(--tq-ink-2); font-weight: 600; }
.tq-cal-crew { min-width: 11rem; background: var(--tq-surface-2); }
.tq-cal-crew .fw-semibold { color: var(--tq-ink); font-size: .82rem; }

/* Kolejność kolumn ustawia się ręcznie: przeciągnięciem nagłówka albo
   strzałkami — te same, których używa klawiatura i ekran dotykowy. */
.tq-cal-crew[draggable="true"] { cursor: grab; }
.tq-cal-move { display: flex; justify-content: space-between; margin: -2px 0 2px; }
.tq-cal-move .btn { color: var(--tq-ink-3); text-decoration: none; line-height: 1;
  font-size: .8rem; }
.tq-cal-move .btn:hover { color: var(--tq-accent); }
.tq-cal-drag { opacity: .4; }
.tq-cal-over { box-shadow: inset 3px 0 0 var(--tq-accent); }

/* Kolumna dni trzyma się lewej krawędzi przy przewijaniu w bok. */
.tq-cal-day {
  width: 5.5rem; vertical-align: middle; text-align: left !important;
  background: var(--tq-surface-2); border-right: 1px solid var(--tq-line-strong);
  border-left: 0 !important; position: sticky; left: 0; z-index: 2;
  font-weight: 600; color: var(--tq-ink) !important;
}
.tq-cal-day .tq-sub { font-size: .72rem; font-weight: 500; }
.tq-cal-today { color: var(--tq-accent) !important; background: var(--tq-accent-soft); }
.tq-cal-today .tq-sub { color: var(--tq-accent); }
.tq-cal-slot {
  padding: 4px; vertical-align: top; height: 4.25rem; min-width: 11rem;
  border-left: 1px solid var(--tq-line);
}
.tq-calendar tbody tr + tr .tq-cal-slot { border-top: 1px dashed var(--tq-line); }

/* Blok dachu w siatce — rozciąga się w dół na tyle dni, ile trwa montaż. */
.tq-job {
  height: 100%; display: flex; flex-direction: column; gap: 1px; position: relative;
  padding: 6px 8px; border-radius: var(--tq-radius-sm);
  background: var(--tq-accent-soft); border: 1px solid var(--tq-accent-line);
  border-left: 3px solid var(--tq-accent);
}
.tq-job-done { background: var(--tq-ok-soft); border-color: var(--tq-ok); border-left-color: var(--tq-ok); }

/* Stan dachu kolorem bloku: od „projekt niegotowy” do „gotowy do montażu”.
   Kolory są własne, nie z palety motywu — mają znaczyć to samo w obu trybach. */
.tq-stage-red { background: rgba(220, 53, 69, .14); border-color: rgba(220, 53, 69, .5);
  border-left-color: #dc3545; }
.tq-stage-yellow { background: rgba(240, 180, 41, .16); border-color: rgba(240, 180, 41, .55);
  border-left-color: #e0a800; }
.tq-stage-blue { background: rgba(45, 130, 220, .14); border-color: rgba(45, 130, 220, .5);
  border-left-color: #2d82dc; }
.tq-stage-orange { background: rgba(240, 130, 30, .15); border-color: rgba(240, 130, 30, .5);
  border-left-color: #ef7d1a; }
.tq-stage-green { background: rgba(40, 175, 100, .15); border-color: rgba(40, 175, 100, .5);
  border-left-color: #28af64; }

/* Kafelki dachów: chwytasz blok albo wiersz z listy i upuszczasz na pole. */
.tq-job[draggable="true"] { cursor: grab; }
.tq-job[draggable="true"]:active { cursor: grabbing; }
.tq-drag-row { cursor: grab; }
.tq-drag-ghost { opacity: .45; }
.tq-drop-over { outline: 2px dashed var(--tq-accent); outline-offset: -3px;
  background: var(--tq-accent-soft); }
.tq-grip { color: var(--tq-ink-3); margin-right: 6px; letter-spacing: -1px; cursor: grab; }

.tq-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center;
  font-size: .72rem; color: var(--tq-ink-2); }
.tq-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.tq-legend-dot { width: 11px; height: 11px; border-radius: 3px; border: 1px solid;
  display: inline-block; }
/* Kropka legendy bierze pełny kolor krawędzi bloku — półprzezroczyste tło
   na 11 pikselach było praktycznie niewidoczne. */
.tq-legend-dot.tq-stage-red { background: #dc3545; border-color: #dc3545; }
.tq-legend-dot.tq-stage-yellow { background: #e0a800; border-color: #e0a800; }
.tq-legend-dot.tq-stage-blue { background: #2d82dc; border-color: #2d82dc; }
.tq-legend-dot.tq-stage-orange { background: #ef7d1a; border-color: #ef7d1a; }
.tq-legend-dot.tq-stage-green { background: #28af64; border-color: #28af64; }
.tq-legend-dot.tq-job-done { background: var(--tq-ok); border-color: var(--tq-ok); }
.tq-job-title { font-weight: 600; font-size: .82rem; color: var(--tq-ink);
  text-decoration: none; line-height: 1.25; }
.tq-job-title:hover { color: var(--tq-accent); text-decoration: underline; }
.tq-job-meta { font-size: .7rem; color: var(--tq-ink-3); }
.tq-job-actions {
  display: flex; gap: 2px; margin-top: 4px; opacity: 0; transition: opacity .12s ease;
}
.tq-job-actions form { display: inline; margin: 0; }
.tq-job-actions .btn { --bs-btn-padding-y: 0; --bs-btn-padding-x: .35rem; font-size: .7rem; }
.tq-job:hover .tq-job-actions, .tq-job:focus-within .tq-job-actions { opacity: 1; }

.tq-row-match { background: var(--tq-accent-soft); }

@media (max-width: 991.98px) {
  .tq-job-actions { opacity: 1; }
  .tq-cal-day { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .tq-job-actions { transition: none; }
}

/* Komórka cennika dla etapu, przy którym dana osoba nie pracuje. */
.tq-na { font-size: .72rem; color: var(--tq-ink-3); font-style: italic; }

/* Skład brygady pod nazwiskiem brygadzisty. */
.tq-crew { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tq-crewchip {
  font-size: .72rem; padding: 2px 8px; border-radius: 999px; text-decoration: none;
  background: var(--tq-surface-3); color: var(--tq-ink-2); border: 1px solid var(--tq-line);
}
.tq-crewchip:hover { background: var(--tq-accent-soft); color: var(--tq-accent);
  border-color: var(--tq-accent-line); }
.tq-crewchip-off { opacity: .5; text-decoration: line-through; }

/* Sprzęt jadący na dach — widoczny wprost w bloku harmonogramu. */
.tq-job-team { font-size: .68rem; color: var(--tq-ink-2); margin-top: 2px; }
.tq-job-team-missing { color: var(--tq-ink-3); font-style: italic; }

/* Poprawka: powrót na dach już rozliczony. */
.tq-job-rework { background: var(--tq-warn-soft); border-color: var(--tq-warn);
  border-left-color: var(--tq-warn); }
.tq-reworktag {
  display: inline-block; font-size: .6rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 1px 5px; border-radius: 4px; margin-right: 4px;
  background: var(--tq-warn); color: var(--tq-surface);
}

/* Legenda kropek etapów — pięć kropek bez opisu nic nie znaczy. */
.tq-leg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  font-size: .74rem; color: var(--tq-ink-3); }
.tq-leg span { display: inline-flex; align-items: center; gap: 5px; }
.tq-leg-title { font-weight: 600; color: var(--tq-ink-2); }
.tq-leg i { flex: none; }
.tq-leg-sep { width: 1px; height: 12px; background: var(--tq-line-strong); padding: 0; }

/* Cennik: członkowie brygady wcięci pod swoim brygadzistą. */
.tq-rate-member > td:first-child { padding-left: 1.6rem; color: var(--tq-ink-2); }
.tq-rate-branch { color: var(--tq-ink-3); margin-right: 4px; }

/* Rozbicie kwoty etapu na ludzi — na karcie dachu. */
.tq-shares { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 4px; }
.tq-share { font-size: .72rem; color: var(--tq-ink-2); white-space: nowrap; }
.tq-share b { font-variant-numeric: tabular-nums; }
.tq-share-leader { color: var(--tq-ink); font-weight: 600; }

/* Lista dachów pogrupowana tygodniami montażu. */
.tq-weekrow > th {
  background: var(--tq-surface-2); border-top: 1px solid var(--tq-line-strong);
  padding: 7px 12px; font-weight: 500;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
}
.tq-weekname { font-family: var(--tq-display); font-size: .9rem; font-weight: 650;
  color: var(--tq-ink); letter-spacing: -.01em; }
.tq-weekname-none { color: var(--tq-warn); }
.tq-weekrange, .tq-weekcount { font-size: .74rem; color: var(--tq-ink-3); font-weight: 400; }
.tq-weeklink { margin-left: auto; font-size: .74rem; }

/* Wybór tygodnia wprost w wierszu listy. */
.tq-weekpick { display: flex; gap: 4px; align-items: center; }
.tq-weekpick select { min-width: 9.5rem; }

/* ------------------------------------- uwagi do administratora ("?") --- */

/* Guzik siedzi w rogu okna, nad treścią, ale nie zasłania przycisków akcji —
   dlatego jest mały i półprzezroczysty, dopóki się na niego nie najedzie. */
.tq-help { position: fixed; right: 18px; bottom: 18px; z-index: 1040;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.tq-help-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--tq-line-strong);
  background: var(--tq-surface-2); color: var(--tq-ink-2); font-size: 1.1rem;
  font-weight: 700; line-height: 1; cursor: pointer; opacity: .75;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18); transition: opacity .12s ease, color .12s ease;
}
.tq-help-btn:hover, .tq-help-btn:focus-visible {
  opacity: 1; color: var(--tq-accent); border-color: var(--tq-accent); }
.tq-help-box {
  width: min(22rem, calc(100vw - 36px)); padding: 12px 14px; border-radius: var(--tq-radius);
  background: var(--tq-surface); border: 1px solid var(--tq-line-strong);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
}

@media print { .tq-help { display: none; } }

/* Dwie drobne akcje formularza w komórce listy wycen — obok siebie, nie pod. */
.tq-formactions { display: inline-flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }