/* ==========================================================================
   GoFixWeb PDF — designový systém komponent (LIGHT)
   ==========================================================================
   Jeden systém, tři typy reportu. Každá komponenta má v README.md uvedený
   svůj ReportLab ekvivalent.

   Pravidla, která tenhle soubor drží, aby šel návrh převést do Platypus:
     - nosný layout = tabulky, plné obdélníky a tenké linky
     - žádný grid/flex jako nosný layout uvnitř .page
     - žádný box-shadow, blur, glow, clip-path, maska, filtr, animace
     - žádný border-radius v obsahu stránky
     - jediný font Arial
   Grid/flex a stín se objevují VÝHRADNĚ v náhledovém chrome (.kit) mimo A4.
   ========================================================================== */

/* ---------- Náhledový chrome — do PDF nejde, jen rám prohlížeče ---------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  background: #e8edf3;
  color: var(--ink);
}

.kit { max-width: 960px; margin: 0 auto; padding: 2rem 1rem 4rem; }
.kit h1 { font-size: 1.4rem; margin: 0 0 .35rem; }
.kit .lead { color: #475569; margin: 0 0 1.25rem; font-size: .95rem; line-height: 1.5; }
.kit .note {
  background: #ffffff; border-left: 3px solid var(--fix);
  padding: .6rem .8rem; margin: 0 0 .75rem;
  font-size: .85rem; line-height: 1.55; color: #334155;
}
.kit h2.grp { font-size: 1.05rem; margin: 2.25rem 0 .5rem; color: #0f172a; }
.kit code { background: #f1f5f9; padding: .05rem .3rem; font-size: .82em; }

.label {
  display: inline-block; background: #334155; color: #f1f5f9;
  font-size: .72rem; padding: .2rem .5rem; margin: 0 0 .75rem;
}

/* Přehled tokenů — náhledová pomůcka, není součástí reportu */
.swatch { display: inline-block; width: 148px; margin: 0 .5rem .5rem 0; vertical-align: top; font-size: .72rem; }
.swatch i { display: block; height: 34px; border: 1px solid var(--hairline); }
.swatch b { display: block; margin-top: .25rem; font-weight: 700; }
.swatch span { color: #64748b; }

/* ---------- A4 stránka -> SimpleDocTemplate ---------- */
.page {
  width: var(--page-w);
  min-height: var(--page-h);
  margin: 0 auto 2rem;
  padding: var(--margin-top) var(--margin-x) var(--margin-bottom);
  background: var(--page-bg);
  color: var(--ink);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hairline);   /* místo stínu, aby náhled nelhal */
  font-size: var(--body-size);
}

/* Diagonální vodoznak -> canvas.rotate() + drawString() PŘED obsahem */
.page::before {
  content: "gofixweb.com  gofixweb.com  gofixweb.com";
  position: absolute; inset: -20%;
  color: var(--watermark);
  font-size: 52px; letter-spacing: .04em;
  transform: rotate(-45deg);
  white-space: pre-wrap; line-height: 2.2;
  pointer-events: none; z-index: 0;
}
.page > * { position: relative; z-index: 1; }

/* ---------- Hlavička dokumentu ---------- */
.logo { font-size: var(--logo-size); font-weight: 700; line-height: 1.15; color: var(--logo-ink); }
.logo span { color: var(--logo-accent); }
.slogan { font-size: var(--body-size); color: var(--ink-dim); margin: 2px 0 10px; }
.subtitle { font-size: var(--subtitle-size); font-weight: 700; margin: 0 0 6px; }
.meta { font-size: 10pt; margin: 0 0 2px; color: var(--ink-soft); }
.meta b { color: var(--ink); }
.meta.url { font-size: var(--body-size); color: var(--ink-dim); }
.meta.date { font-size: var(--body-size); color: var(--ink-dim); margin-bottom: 0; }

/* Zelená dělicí linka -> Table výšky 1px s BACKGROUND, nebo HRFlowable */
hr.rule { height: 1px; background: var(--fix-rule); margin: 14px 0 12px; border: 0; }

h2.sec {
  font-size: var(--section-size); margin: 14px 0 6px;
  padding-bottom: 3px; border-bottom: .5px solid var(--hairline-soft);
}
.cont { font-size: var(--small-size); color: var(--ink-dim); }

/* ---------- Pruh varianty -> Table([[tag, desc]]) ---------- */
table.variant { width: var(--table-w); border-collapse: collapse; font-size: var(--body-size); margin: 0 0 10px; }
table.variant td { padding: 7px 9px; vertical-align: middle; }
table.variant td.tag { width: var(--variant-tag-w); font-weight: 700; font-size: 10pt; text-align: center; }
table.variant td.desc { line-height: 1.4; }
table.variant.v-manual td.tag { background: var(--fix); color: #ffffff; }
table.variant.v-manual td.desc { background: var(--fix-bg); color: var(--fix-strong); border: .5px solid var(--fix-border); border-left: 0; }
table.variant.v-auto td.tag { background: var(--fix-strong); color: #ffffff; }
table.variant.v-auto td.desc { background: var(--fix-bg); color: var(--fix-strong); border: .5px solid var(--fix-border); border-left: 0; }

/* ---------- KPI pás: měsíční ztráta + skóre -> Table([[left, right]]) ---------- */
table.kpi { width: var(--table-w); border-collapse: collapse; margin: 10px 0; }
table.kpi td { padding: 10px 12px; vertical-align: top; border: .5px solid var(--hairline); }
table.kpi td.loss-cell { width: 85mm; background: var(--loss-bg); border-color: var(--loss-border); }
table.kpi td.score-cell { width: 85mm; background: var(--surface-1); }
table.kpi .cap { font-size: var(--small-size); color: var(--ink-dim); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 4px; }
table.kpi .loss-big { font-size: var(--loss-big); font-weight: 700; color: var(--loss-strong); line-height: 1.05; margin: 0; }
table.kpi .loss-sub { font-size: var(--small-size); color: var(--loss); margin: 4px 0 0; }
table.kpi .score-big { font-size: 20pt; font-weight: 700; color: var(--ink); line-height: 1.1; margin: 0; }
table.kpi .score-sub { font-size: var(--small-size); color: var(--ink-dim); margin: 4px 0 0; }

/* Ukazatel skóre -> Table([[fill, rest]], colWidths úměrné hodnotě) */
table.bar { width: 100%; border-collapse: collapse; margin: 6px 0 2px; }
table.bar td { height: 7px; padding: 0; border: 0; font-size: 0; line-height: 0; }
table.bar td.rest { background: var(--bar-track); }
table.bar td.f-good { background: var(--bar-good); }
table.bar td.f-mid { background: var(--bar-mid); }
table.bar td.f-bad { background: var(--bar-bad); }

/* Rozpad metrik -> Table(colWidths=[42mm, 20mm, zbytek]) */
table.metrics { width: var(--table-w); border-collapse: collapse; font-size: var(--body-size); margin: 0 0 10px; }
table.metrics td { padding: 4px 0; border: 0; border-bottom: .5px solid var(--hairline-soft); vertical-align: middle; }
table.metrics td.mk { width: 42mm; color: var(--ink-soft); }
table.metrics td.mv { width: 20mm; font-weight: 700; }
table.metrics td.mb { padding-left: 6px; }
table.metrics .v-good { color: var(--fix); }
table.metrics .v-mid { color: var(--loss); }
table.metrics .v-bad { color: var(--error); }

/* ---------- Tabulka nálezů -> Table + GRID + ROWBACKGROUNDS ---------- */
table.data { width: var(--table-w); border-collapse: collapse; font-size: var(--table-font-size); margin: 0 0 4px; }
table.data th, table.data td {
  border: .5px solid var(--hairline); padding: var(--table-pad);
  vertical-align: top; text-align: left;
}
table.data th { background: var(--surface-2); font-weight: 700; color: var(--ink); }
table.data tbody tr:nth-child(odd) td { background: var(--page-bg); }
table.data tbody tr:nth-child(even) td { background: var(--surface-1); }
table.data td.amt { color: var(--loss); font-weight: 700; text-align: right; white-space: nowrap; }
table.data tr.masked td { background: var(--surface-3); color: var(--ink-dim); }
table.data .s-fix { color: var(--fix); font-weight: 700; }
table.data .s-pending { color: var(--pending); }
table.data .s-manual { color: var(--ink-soft); }
table.data .s-error { color: var(--error); font-weight: 700; }
.tnote { font-size: var(--small-size); color: var(--ink-dim); margin: 4px 0 10px; line-height: 1.4; }

/* ---------- Karta nálezu -> vnější Table(head/body) v KeepTogether ---------- */
table.card {
  width: var(--table-w); border-collapse: collapse;
  font-size: var(--body-size); margin: 0 0 9px;
  border: .5px solid var(--hairline);
}
table.card td { padding: 7px 9px; vertical-align: top; }
table.card tr.card-head td { background: var(--surface-2); font-weight: 700; border-bottom: .5px solid var(--hairline); }
table.card tr.card-head td.num { width: var(--card-num-w); text-align: center; color: var(--ink-dim); }
table.card tr.card-head td.title { font-size: 10pt; color: var(--ink); }
table.card tr.card-head td.amt { width: var(--card-amt-w); text-align: right; color: var(--loss); white-space: nowrap; }
table.card td.card-body { background: var(--page-bg); }

/* Popisek | hodnota -> Table(colWidths=[32mm, zbytek]) */
table.kv { width: 100%; border-collapse: collapse; font-size: var(--body-size); }
table.kv td { border: 0; padding: 3px 0; vertical-align: top; line-height: 1.4; color: var(--ink-soft); }
table.kv td.k { width: var(--kv-label-w); font-weight: 700; padding-right: 6px; color: var(--ink-dim); }
table.kv td.v b { color: var(--ink); }
table.kv .err { color: var(--error); font-weight: 700; }
table.kv .fix { color: var(--fix); font-weight: 700; }

/* ---------- Boxy -> Table s BOX rámečkem a plným BACKGROUND ---------- */
.box { padding: 7px 9px; font-size: var(--body-size); line-height: 1.4; margin: 5px 0 0; }
.box .bh { font-weight: 700; margin: 0 0 3px; }
.box.b-fix { background: var(--fix-bg); border: .5px solid var(--fix-border); color: var(--fix-strong); }
.box.b-fix .bh { color: var(--fix-strong); }
.box.b-error { background: var(--error-bg); border: .5px solid var(--error-border); color: var(--error); }
.box.b-error .bh { color: var(--error); }
.box.b-loss { background: var(--loss-bg); border: .5px solid var(--loss-border); color: var(--loss-strong); }
.box.b-loss .bh { color: var(--loss-strong); }
.box.b-pending { background: var(--pending-bg); border: .5px solid var(--pending-border); color: var(--pending); }
.box.b-pending .bh { color: var(--ink); }

/* Text k vložení -> Paragraph v rámečku, monospace nepoužíváme (jen Arial) */
.snippet {
  display: block; background: var(--page-bg); border: .5px solid var(--hairline);
  padding: 5px 7px; margin: 4px 0; color: var(--ink); font-weight: 700;
}

/* Kroky návodu -> Table(colWidths=[6mm, zbytek]) */
table.steps { width: 100%; border-collapse: collapse; font-size: var(--body-size); margin: 3px 0 0; }
table.steps td { border: 0; padding: 2px 0; vertical-align: top; line-height: 1.4; }
table.steps td.sn { width: var(--step-num-w); font-weight: 700; color: var(--fix); }

/* ---------- Štítek stavu -> krátká Table, hAlign LEFT ---------- */
.pill { display: inline-block; padding: 2px 7px; font-size: var(--small-size); font-weight: 700; white-space: nowrap; }
.pill.p-fix { background: var(--fix-bg); color: var(--fix-strong); border: .5px solid var(--fix-border); }
.pill.p-pending { background: var(--pending-bg); color: var(--pending); border: .5px solid var(--pending-border); }
.pill.p-manual { background: var(--surface-2); color: var(--ink-soft); border: .5px solid var(--hairline); }
.pill.p-error { background: var(--error-bg); color: var(--error); border: .5px solid var(--error-border); }

/* ---------- Finanční box -> Table([[left, right]], 85mm/85mm) ---------- */
table.fin { width: var(--table-w); border-collapse: collapse; font-size: var(--body-size); margin: 10px 0; }
table.fin td { width: 50%; padding: 9px 10px; vertical-align: top; line-height: 1.45; border: .5px solid var(--hairline); }
table.fin td.left { background: var(--loss-bg); border-color: var(--loss-border); color: var(--loss-strong); }
table.fin td.right { background: var(--fix-bg); border-color: var(--fix-border); color: var(--fix-strong); }
table.fin .head { font-weight: 700; margin-bottom: 6px; font-size: 10pt; }
table.fin .big { font-size: 14pt; font-weight: 700; }

/* Upsell CTA pod boxem „Zbývající ztráta“ — jen typ 3 (Před / Po) a jen když v reportu
   zůstal nález ve stavu nelze_automaticky. Jeden řádek, dvě cely: text vlevo, tlačítko
   vpravo. Zelená = oprava/CTA, takže role barev zůstávají nesmíchané. Vertikální
   zarovnání middle, aby tlačítko sedělo na účaří textu bez dalšího řádku. */
table.cta-solve { width: var(--table-w); border-collapse: collapse; font-size: var(--body-size); margin: 2px 0 10px; }
table.cta-solve td { padding: 7px 10px; vertical-align: middle; background: var(--fix-bg); border: .5px solid var(--fix-border); color: var(--fix-strong); line-height: 1.4; }
table.cta-solve td.act { width: 42mm; text-align: right; white-space: nowrap; }
table.cta-solve .btn { background: var(--fix); color: #ffffff; font-weight: 700; font-size: 10pt; padding: 5px 12px; text-decoration: none; }
table.cta-solve .pnote { font-weight: 700; }

/* ---------- CTA nabídky -> Table([[a, b]], 83mm/83mm) ---------- */
table.cta-row { width: var(--table-w); border-collapse: separate; border-spacing: 8px 0; font-size: var(--body-size); }
table.cta-row td { width: 50%; padding: 10px; vertical-align: top; background: var(--surface-1); border: .5px solid var(--hairline); line-height: 1.45; }
/* Nadpis varianty je černý tučný, ne var(--ink) ani stavová barva. Jde o popisek volby,
   ne o signál stavu — barevné odlišení variant nese rámeček a cena, nikdy nadpis. */
table.cta-row .vlabel { font-weight: 700; font-size: 10pt; color: #000000; }
/* Popisný řádek varianty — jediný rozlišovací prvek mezi boxy, proto stojí PŘED cenou.
   Zmenšený stupeň a stažené prokládání drží výšku boxu v kompaktním layoutu. */
table.cta-row .cdesc { font-size: 8.5pt; line-height: 1.38; color: var(--ink-soft); margin: 2px 0 3px; }
table.cta-row .price { color: var(--fix); font-weight: 700; font-size: 13pt; margin: 1px 0 3px; }

/* ---------- Box zdroje dat -> Table na 170mm ---------- */
.source {
  width: var(--table-w); background: var(--surface-1);
  border: .5px solid var(--hairline); padding: 8px 10px;
  font-size: var(--small-size); color: var(--ink-soft);
  line-height: 1.5; margin: 0 0 10px;
}
.source b { color: var(--ink); }

/* ---------- Srovnávací tabulka Před/Po ---------- */
table.data td.before { color: var(--error); font-weight: 700; }
table.data td.after { color: var(--fix); font-weight: 700; }
table.data td.delta { background: var(--fix-bg) !important; color: var(--fix-strong); font-weight: 700; white-space: nowrap; }
table.data td.delta-none { background: var(--surface-2) !important; color: var(--ink-dim); font-weight: 700; }

/* ---------- Patička -> onPage callback, absolutní kresba ---------- */
.footer {
  position: absolute; left: var(--margin-x); right: var(--margin-x); bottom: 10mm;
  text-align: center; font-size: var(--small-size); color: var(--footer-text);
  line-height: 1.5; padding-top: 6px; border-top: .5px solid var(--hairline-soft);
  z-index: 2;
}