// contract-print.jsx — друкований бланк договору на розроблення проєктної документації.
// Багатосторінковий A4: тіло (16 розділів) + Додатки 1–4. Перемикач Виконавця ТОВ/ФОП,
// логіка ПДВ, підстановка даних договору/замовника, маркування ключових місць.
// Потребує: contract-clauses.jsx, window.moneyInWords (invoice-template.jsx), window.COMPANY(_FOP).

const CT_MONTHS = ["січня","лютого","березня","квітня","травня","червня","липня","серпня","вересня","жовтня","листопада","грудня"];
function ctLongDate(iso) {
  if (!iso) return "«___» ____________ 20___ р.";
  const d = new Date(iso + (iso.length <= 10 ? "T00:00:00" : ""));
  if (isNaN(d)) return iso;
  return `«${String(d.getDate()).padStart(2,"0")}» ${CT_MONTHS[d.getMonth()]} ${d.getFullYear()} р.`;
}
function ctEsc(s){ return String(s).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"); }
function ctHtml(text, tokens){
  let s = ctEsc(text);
  s = s.replace(/\{\{(\w+)\}\}/g, (m,k) => {
    const v = (tokens[k] != null && tokens[k] !== "") ? tokens[k] : "________";
    return `<mark class="ct-fill">${ctEsc(v)}</mark>`;
  });
  s = s.replace(/\[[^\]]+\]/g, (m) => `<mark class="ct-ph">${m}</mark>`);
  return s;
}
function CtPara({ text, tokens, cls }) {
  return <p className={"ct-para " + (cls||"")} contentEditable suppressContentEditableWarning
            dangerouslySetInnerHTML={{ __html: ctHtml(text, tokens) }} />;
}
function ctMoney(n){ return Number(n||0).toLocaleString("uk-UA", { minimumFractionDigits: 2, maximumFractionDigits: 2 }); }

// Реквізити сторін (Розділ 16 / низ додатків)
function CtReqs({ exec, client, withApprove }) {
  const edLabel = exec.edrpouLabel || "Код ЄДРПОУ";
  return (
    <div className="ct-reqs">
      <div className="ct-reqs-col">
        <div className="ct-reqs-role">ВИКОНАВЕЦЬ:</div>
        <div className="ct-reqs-name">{exec.fullNameUpper || exec.fullName}</div>
        <div className="ct-reqs-line">{exec.address}</div>
        <div className="ct-reqs-line">{edLabel} {exec.edrpou}</div>
        {exec.vatId && <div className="ct-reqs-line">ІПН {exec.vatId}</div>}
        {!exec.vatPayer && <div className="ct-reqs-line">{exec.taxNote || "не є платником ПДВ"}</div>}
        <div className="ct-reqs-line">IBAN {exec.iban}</div>
        <div className="ct-reqs-line">в {exec.bank}{exec.mfo ? `, МФО ${exec.mfo}` : ""}</div>
        <div className="ct-reqs-line">Тел.: {exec.phone}</div>
        <div className="ct-reqs-line">E-mail: {exec.email}</div>
        <div className="ct-reqs-sign-role">{exec.directorRole}</div>
        <div className="ct-reqs-sign">
          <span className="ct-reqs-slot"></span>
          <span className="ct-reqs-signname">{exec.directorSign || exec.directorFull}</span>
        </div>
        <div className="ct-reqs-mp">М.П.</div>
      </div>
      <div className="ct-reqs-col">
        <div className="ct-reqs-role">ЗАМОВНИК:</div>
        <div className="ct-reqs-name">{client ? client.name : <span className="ct-ph">[НАЙМЕНУВАННЯ ЗАМОВНИКА]</span>}</div>
        <div className="ct-reqs-line">Юридична та фактична адреса: {client && client.address ? client.address : <span className="ct-ph">[_______]</span>}</div>
        <div className="ct-reqs-line">Код ЄДРПОУ {client && client.edrpou ? client.edrpou : <span className="ct-ph">[______]</span>}</div>
        <div className="ct-reqs-line ct-ph">р/р UA[__________________]</div>
        <div className="ct-reqs-line ct-ph">в [найменування установи банку], МФО [____]</div>
        <div className="ct-reqs-line">E-mail: {client && client.contact && client.contact.email ? client.contact.email : <span className="ct-ph">[____]</span>}</div>
        <div className="ct-reqs-line">Тел.: {client && client.contact && client.contact.phone ? client.contact.phone : <span className="ct-ph">[____]</span>}</div>
        <div className="ct-reqs-sign-role">{client && client.contact ? client.contact.role : <span className="ct-ph">[посада керівника замовника]</span>}</div>
        <div className="ct-reqs-sign">
          <span className="ct-reqs-slot"></span>
          <span className="ct-reqs-signname">{client && client.contact ? client.contact.name : <span className="ct-ph">[Ім'я ПРІЗВИЩЕ]</span>}</span>
        </div>
        <div className="ct-reqs-mp">М.П.</div>
      </div>
    </div>
  );
}

function ContractSheet({ children, label }) {
  return (
    <div className="ct-sheet">
      <div className="ct-sheet-body">{children}</div>
      <div className="ct-foot">
        <div className="ct-foot-l">{(window.COMPANY||{}).tmText}<br />{(window.COMPANY||{}).tmCert}</div>
        <div className="ct-foot-c"><span className="ct-flag">🇺🇦</span> Слава Україні · Героям слава</div>
        <div className="ct-foot-r">{label || ""}</div>
      </div>
    </div>
  );
}

function ContractPrintDoc({ contract, onClose }) {
  React.useEffect(() => {
    const onKey = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  const [entity, setEntity] = React.useState(contract.execEntity || "tov");
  const exec = window.execEntity(entity);
  const client = window.getClient(contract.client);
  const obj = window.getObject(contract.obj);

  // ── суми та ПДВ ──
  const base = Number(contract.total) || 0;            // ціна без ПДВ (база для розрахунків)
  const vat = exec.vatPayer ? Math.round(base * 0.20 * 100) / 100 : 0;
  const price = base + vat;                             // договірна ціна (з ПДВ для ТОВ)
  const vatInline = exec.vatPayer
    ? `, у тому числі ПДВ 20 % — ${ctMoney(vat)} грн (${window.moneyInWords(vat)})`
    : `. ${exec.taxNote ? exec.taxNote.charAt(0).toUpperCase()+exec.taxNote.slice(1) : "Виконавець не є платником ПДВ"}`;

  const execRep = entity === "fop"
    ? exec.directorGen
    : `${(exec.directorRole||"директорки").toLowerCase()} ${exec.directorGen}`;

  const endDate = (contract.schedule && contract.schedule.length)
    ? ctLongDate(contract.schedule[contract.schedule.length-1].dueDate)
    : "«___» ____________ 20___ р.";
  const year = contract.date ? new Date(contract.date).getFullYear() : new Date().getFullYear();

  const tokens = {
    OBJ: obj ? obj.name : "", OBJ_ADDR: obj && obj.address ? obj.address : "",
    CLIENT: client ? client.name : "[НАЙМЕНУВАННЯ ЗАМОВНИКА]",
    CLIENT_REP_ROLE: client && client.contact ? client.contact.role : "[посада керівника]",
    CLIENT_REP: client && client.contact ? window.declineFio(client.contact.name, "gen") : "[Прізвище Ім'я По батькові]",
    CLIENT_BASIS: "[статуту/положення/довіреності]",
    EXEC_FULL: exec.fullNameUpper || exec.fullName,
    EXEC_REP: execRep, EXEC_BASIS: exec.directorBasis,
    EDRPOU_LABEL: (exec.edrpouLabel || "ЄДРПОУ"), EDRPOU: exec.edrpou,
    SUM: ctMoney(price), SUM_W: window.moneyInWords(price),
    VAT_INLINE: vatInline,
    FUNDING: contract.funding || "Державний бюджет України (загальний фонд), КЕКВ 3132 «Капітальний ремонт інших об'єктів»",
    END_DATE: endDate, YEAR: String(year),
  };

  const num = contract.number || "________";
  const dateUA = ctLongDate(contract.date);
  const gip = contract.gip || "________";

  const doPrint = () => window.print();

  return (
    <React.Fragment>
      <ContractPrintStyles />
      <div className="ct-root">
        <div className="ct-backdrop" onClick={onClose}></div>
        <div className="ct-toolbar">
          <div className="ct-toolbar-title">Договір № {num}{obj ? ` · ${obj.name.slice(0,40)}${obj.name.length>40?"…":""}` : ""}</div>
          <div className="ct-toolbar-actions">
            <div className="ct-entity">
              <span>Виконавець:</span>
              <div className="filter-pill">
                <button className={`filter-pill-item ${entity==="tov"?"is-active":""}`} onClick={()=>setEntity("tov")}>ТОВ (ПДВ)</button>
                <button className={`filter-pill-item ${entity==="fop"?"is-active":""}`} onClick={()=>setEntity("fop")}>ФОП</button>
              </div>
            </div>
            <button className="btn" onClick={onClose}>Закрити</button>
            <button className="btn btn-primary" onClick={doPrint}><window.Ico name="download" /> Друк / PDF</button>
          </div>
        </div>

        <div className="ct-scroll">
          {/* ───────── СТОРІНКА: ДОГОВІР ───────── */}
          <ContractSheet label="Договір про розроблення проєктної документації">
            <h1 className="ct-title">ДОГОВІР № <mark className="ct-fill">{num}</mark></h1>
            <div className="ct-subtitle">про виконання робіт із розроблення проєктної документації та супроводу експертизи</div>
            <div className="ct-obj-line">по об'єкту: «<mark className="ct-fill" contentEditable suppressContentEditableWarning>{obj ? obj.name : "[найменування об'єкта]"}</mark>»</div>

            <div className="ct-cityrow">
              <span>м. <mark className="ct-fill">{exec.city || "Одеса"}</mark></span>
              <span><mark className="ct-fill">{dateUA}</mark></span>
            </div>

            <CtPara text={window.CONTRACT_INTRO} tokens={tokens} cls="ct-intro" />

            {window.CONTRACT_CLAUSES.map((sec) => (
              <section key={sec.n} className="ct-section">
                <h2 className="ct-h2">{sec.n}. {sec.title}</h2>
                {sec.paras.map((p, i) => <CtPara key={i} text={p} tokens={tokens} />)}
              </section>
            ))}

            <h2 className="ct-h2">16. РЕКВІЗИТИ СТОРІН</h2>
            <CtReqs exec={exec} client={client} />
          </ContractSheet>

          {/* ───────── ДОДАТОК 1 — ЗАВДАННЯ ───────── */}
          <ContractSheet label="Додаток № 1 — Завдання на проєктування">
            <CtAppendixHead n="1" num={num} dateUA={dateUA} exec={exec} client={client} />
            <h2 className="ct-app-title">ЗАВДАННЯ НА ПРОЄКТУВАННЯ</h2>
            <div className="ct-obj-line">по об'єкту: «<mark className="ct-fill">{obj ? obj.name : "[найменування об'єкта]"}</mark>»</div>
            <div className="ct-app-note">(відповідно до Додатка Б ДБН А.2.2-3:2014 «Склад та зміст проєктної документації на будівництво»)</div>
            <ol className="ct-tasklist">
              {window.CONTRACT_TASK_POINTS.map((t, i) => (
                <li key={i} contentEditable suppressContentEditableWarning>{t}</li>
              ))}
            </ol>
            <p className="ct-app-foot-note">Примітка 1. Завдання на проєктування затверджується замовником та погоджується проєктувальником.<br/>Примітка 2. Склад завдання може змінюватися відповідно до особливостей об'єктів, що проєктуються.</p>
          </ContractSheet>

          {/* ───────── ДОДАТОК 2 — КАЛЕНДАРНИЙ ПЛАН ───────── */}
          <ContractSheet label="Додаток № 2 — Календарний план">
            <CtAppendixSimpleHead n="2" num={num} dateUA={dateUA} />
            <h2 className="ct-app-title">КАЛЕНДАРНИЙ ПЛАН</h2>
            <div className="ct-app-subtitle">робіт із розроблення проєктної документації та супроводу експертизи</div>
            <div className="ct-obj-line">по об'єкту: «<mark className="ct-fill">{obj ? obj.name : "[найменування об'єкта]"}</mark>»</div>
            <table className="ct-table ct-table-plan">
              <thead>
                <tr><th>№ з/п</th><th>Найменування робіт</th><th>Початок</th><th>Закінчення</th></tr>
              </thead>
              <tbody>
                {(contract.schedule && contract.schedule.length ? contract.schedule : [{stage:"Роботи з розроблення проєктної документації та супроводу експертизи"}]).map((s, i) => (
                  <tr key={i}>
                    <td className="ct-c">{i+1}</td>
                    <td contentEditable suppressContentEditableWarning>{s.stage}</td>
                    <td className="ct-c">{i===0 ? "дата підписання Договору" : ctLongDate(contract.schedule[i-1] && contract.schedule[i-1].dueDate)}</td>
                    <td className="ct-c">{ctLongDate(s.dueDate) }</td>
                  </tr>
                ))}
              </tbody>
            </table>
            <CtReqs exec={exec} client={client} />
          </ContractSheet>

          {/* ───────── ДОДАТОК 3 — ПРОТОКОЛ ЦІНИ ───────── */}
          <ContractSheet label="Додаток № 3 — Протокол погодження договірної ціни">
            <CtAppendixSimpleHead n="3" num={num} dateUA={dateUA} />
            <h2 className="ct-app-title">ПРОТОКОЛ ПОГОДЖЕННЯ ДОГОВІРНОЇ ЦІНИ</h2>
            <div className="ct-app-subtitle">робіт із розроблення проєктної документації та супроводу експертизи</div>
            <div className="ct-obj-line">по об'єкту: «<mark className="ct-fill">{obj ? obj.name : "[найменування об'єкта]"}</mark>»</div>
            <CtPara text={window.CONTRACT_INTRO.replace('уклали цей договір про виконання робіт із розроблення проєктної документації та проходження експертизи (далі — «Договір») про таке:', 'засвідчуємо, що Сторонами досягнуто згоди щодо величини договірної ціни на виконання робіт.')} tokens={tokens} cls="ct-intro" />
            <p className="ct-price-line">Ціна Договору (договірна ціна) є твердою і становить <mark className="ct-fill">{ctMoney(price)}</mark> грн (<mark className="ct-fill">{window.moneyInWords(price)}</mark>)<span dangerouslySetInnerHTML={{__html: ctHtml("{{VAT_INLINE}}", tokens)}} />.</p>
            <CtReqs exec={exec} client={client} />
          </ContractSheet>

          {/* ───────── ДОДАТОК 4 — КОШТОРИСИ ───────── */}
          <ContractSheet label="Додаток № 4 — Кошториси">
            <CtAppendixSimpleHead n="4" num={num} dateUA={dateUA} />
            <h2 className="ct-app-title">КОШТОРИСИ</h2>
            <div className="ct-app-subtitle">на роботи з розроблення проєктної документації та супроводу експертизи</div>
            <div className="ct-obj-line">по об'єкту: «<mark className="ct-fill">{obj ? obj.name : "[найменування об'єкта]"}</mark>»</div>

            <div className="ct-app-meta">
              <div><span>Замовник:</span> {client ? client.name : "________"}</div>
              <div><span>Виконавець:</span> {exec.fullName}</div>
              <div><span>Клас наслідків:</span> {contract.consequenceClass ? <mark className="ct-fill">{contract.consequenceClass}</mark> : <mark className="ct-ph">СС1</mark>}</div>
              <div><span>Стадія проєктування:</span> {contract.stage ? <mark className="ct-fill">{contract.stage}</mark> : <mark className="ct-ph">Робочий проєкт (РП)</mark>}</div>
            </div>

            <div className="ct-app4-list">Склад Додатка № 4:
              <ul>
                <li>Кошторис № 1 — Зведений кошторис на проєктні, науково-проєктні, вишукувальні роботи (форма 1-П)</li>
                <li>Кошторис № 2 — Кошторис на виконання робіт «Проєктні роботи» (форма 3-П)</li>
                <li>Кошторис № 3 — Кошторис на виконання робіт «Реєстрація проєктної документації в ЄДЕССБ» (форма 3-П)</li>
                <li>Кошторис № 4 — Кошторис на проєктні, науково-проєктні, вишукувальні роботи «Експертиза» (форма 2-П)</li>
                <li>Розрахунок показника кошторисної вартості в розрахунку на 1 людино-день (коефіцієнт зміни рівня заробітної плати)</li>
              </ul>
            </div>

            <h3 className="ct-app4-h">ЗВЕДЕНИЙ КОШТОРИС № 1 · Форма № 1-П</h3>
            <table className="ct-table ct-table-koshtorys">
              <thead>
                <tr><th>Ч.ч.</th><th>Стадія / перелік робіт</th><th>Форма</th><th>Вартість робіт, грн</th></tr>
              </thead>
              <tbody>
                {(contract.kosht && contract.kosht.length ? contract.kosht : null)
                  ? contract.kosht.map((k, i) => (
                      <tr key={i}><td className="ct-c">{i+1}</td><td>{k.name}</td><td className="ct-c">{k.form}</td><td className="ct-r">{ctMoney(k.sum)}</td></tr>
                    ))
                  : (<React.Fragment>
                      <tr><td className="ct-c">1</td><td>Технічне обстеження</td><td className="ct-c">3-П</td><td className="ct-r"><mark className="ct-ph">_____</mark></td></tr>
                      <tr><td className="ct-c">2</td><td>Проєктні роботи</td><td className="ct-c">3-П</td><td className="ct-r"><mark className="ct-ph">_____</mark></td></tr>
                      <tr><td className="ct-c">3</td><td>Реєстрація проєктної документації в ЄДЕССБ</td><td className="ct-c">3-П</td><td className="ct-r"><mark className="ct-ph">_____</mark></td></tr>
                      <tr><td className="ct-c">4</td><td>Експертиза проєктної документації</td><td className="ct-c">2-П</td><td className="ct-r"><mark className="ct-ph">_____</mark></td></tr>
                    </React.Fragment>)}
                <tr className="ct-total-row"><td className="ct-c" colSpan={3}>Разом</td><td className="ct-r">{ctMoney(contract.kosht && contract.kosht.length ? window.doksKoshtTotal(contract.kosht) : base)}</td></tr>
              </tbody>
            </table>
            <p className="ct-app-foot-note">{contract.doksKey
              ? <>Кошторис підтягнуто з Робочого простору (Докс), проєкт {contract.doksKey}. Детальні форми 1-П, 2-П, 3-П та розрахунок коефіцієнта додаються окремими аркушами.</>
              : <>Детальні кошториси (форми 1-П, 2-П, 3-П) та розрахунок коефіцієнта зміни рівня заробітної плати додаються окремими аркушами відповідно до Настанови (наказ Мінрегіону № 281 від 01.11.2021). Значення вартості заповнюються за результатами кошторисного розрахунку по об'єкту.</>}</p>
            <p className="ct-price-line">Всього за зведеним кошторисом — <mark className="ct-fill">{ctMoney(price)}</mark> грн (<mark className="ct-fill">{window.moneyInWords(price)}</mark>)<span dangerouslySetInnerHTML={{__html: ctHtml("{{VAT_INLINE}}", tokens)}} /></p>

            <div className="ct-koshtorys-sign">
              <div className="ct-ks-row"><span>Керівник проєктної організації</span><span className="ct-ks-name">{exec.directorSign || exec.directorFull}</span></div>
              <div className="ct-ks-row"><span>Головний інженер проєкту (ГАП)</span><span className="ct-ks-name"><mark className="ct-ph">{gip}</mark></span></div>
              <div className="ct-ks-row"><span>Кошторис склала, провідна інженерка з ПКР</span><span className="ct-ks-name">Аліса АПОТОВСЬКА</span></div>
              <div className="ct-reqs-mp">М.П.</div>
            </div>
          </ContractSheet>
        </div>
      </div>
    </React.Fragment>
  );
}

// Шапка додатка з блоками ПОГОДЖЕНО/ЗАТВЕРДЖУЮ (Додаток 1)
function CtAppendixHead({ n, num, dateUA, exec, client }) {
  return (
    <React.Fragment>
      <div className="ct-app-ref">Додаток № {n}<br/>до Договору № <mark className="ct-fill">{num}</mark><br/>від <mark className="ct-fill">{dateUA}</mark></div>
      <div className="ct-approve">
        <div className="ct-approve-col">
          <div className="ct-approve-h">ПОГОДЖЕНО:</div>
          <div className="ct-approve-role">Виконавець · {exec.directorRole}</div>
          <div className="ct-approve-name">{exec.fullNameUpper || exec.fullName}</div>
          <div className="ct-approve-sign"><span className="ct-reqs-slot"></span><span>{exec.directorSign}</span></div>
          <div className="ct-reqs-mp">М.П. «___» __________ 20__ р.</div>
        </div>
        <div className="ct-approve-col">
          <div className="ct-approve-h">ЗАТВЕРДЖУЮ:</div>
          <div className="ct-approve-role">Замовник · {client && client.contact ? client.contact.role : <span className="ct-ph">[посада]</span>}</div>
          <div className="ct-approve-name">{client ? client.name : <span className="ct-ph">[НАЙМЕНУВАННЯ ЗАМОВНИКА]</span>}</div>
          <div className="ct-approve-sign"><span className="ct-reqs-slot"></span><span>{client && client.contact ? client.contact.name : <span className="ct-ph">[Ім'я ПРІЗВИЩЕ]</span>}</span></div>
          <div className="ct-reqs-mp">М.П. «___» __________ 20__ р.</div>
        </div>
      </div>
    </React.Fragment>
  );
}
function CtAppendixSimpleHead({ n, num, dateUA }) {
  return <div className="ct-app-ref">Додаток № {n}<br/>до Договору № <mark className="ct-fill">{num}</mark><br/>від <mark className="ct-fill">{dateUA}</mark></div>;
}

function ContractPrintStyles() {
  return (
    <style>{`
      .ct-root { position: fixed; inset: 0; z-index: 1200; display: flex; flex-direction: column; }
      .ct-backdrop { position: absolute; inset: 0; background: rgba(4,18,26,.55); backdrop-filter: blur(2px); }
      .ct-toolbar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between;
        gap: 16px; padding: 12px 20px; background: var(--bg-elev); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
      .ct-toolbar-title { font-size: 13.5px; font-weight: 650; color: var(--ink); }
      .ct-toolbar-actions { display: flex; gap: 12px; align-items: center; }
      .ct-entity { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); }
      .ct-scroll { position: relative; z-index: 1; flex: 1 1 auto; overflow-y: auto; padding: 28px 20px 60px;
        display: flex; flex-direction: column; align-items: center; gap: 24px; }

      .ct-sheet { width: 210mm; max-width: 100%; min-height: 297mm; background: #fff; color: #1a1a1a;
        padding: 16mm 18mm 12mm; box-shadow: 0 18px 50px rgba(0,0,0,.32); box-sizing: border-box;
        font-family: "PT Serif", "Times New Roman", Georgia, serif; line-height: 1.45; font-size: 11.5px;
        display: flex; flex-direction: column; }
      .ct-sheet-body { flex: 1 1 auto; }
      .ct-sheet [contenteditable]:focus { outline: 2px solid #bfe0cd; outline-offset: 1px; border-radius: 2px; }

      mark.ct-fill { background: #fff3b0; color: inherit; padding: 0 1px; border-radius: 2px; }
      mark.ct-ph { background: #ffe0e0; color: #9a3030; padding: 0 1px; border-radius: 2px; font-style: italic; }

      .ct-title { font-size: 16px; font-weight: 700; text-align: center; margin: 0 0 4px; letter-spacing: .01em; }
      .ct-subtitle { text-align: center; font-size: 12px; margin-bottom: 3px; }
      .ct-obj-line { text-align: center; font-size: 12px; font-weight: 600; margin-bottom: 14px; }
      .ct-cityrow { display: flex; justify-content: space-between; font-size: 12px; margin: 14px 0 16px; }
      .ct-intro { margin-bottom: 16px; }
      .ct-para { text-align: justify; margin: 0 0 7px; text-wrap: pretty; }
      .ct-section { margin-top: 12px; break-inside: avoid; }
      .ct-h2 { font-size: 12px; font-weight: 700; text-align: center; margin: 16px 0 8px; letter-spacing: .02em; }

      /* Реквізити */
      .ct-reqs { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 16px; break-inside: avoid; }
      .ct-reqs-role { font-size: 11px; font-weight: 800; margin-bottom: 5px; }
      .ct-reqs-name { font-size: 11px; font-weight: 700; margin-bottom: 4px; text-wrap: pretty; }
      .ct-reqs-line { font-size: 10.5px; line-height: 1.5; color: #14181c; }
      .ct-reqs-sign-role { font-size: 10.5px; margin-top: 14px; }
      .ct-reqs-sign { display: flex; align-items: flex-end; gap: 10px; margin-top: 12px; }
      .ct-reqs-slot { flex: 1; border-bottom: 1px solid #1a1a1a; height: 18px; }
      .ct-reqs-signname { font-size: 11px; font-weight: 700; white-space: nowrap; }
      .ct-reqs-mp { font-size: 10px; color: #6b7780; margin-top: 6px; }

      /* Додатки */
      .ct-app-ref { text-align: right; font-size: 11px; margin-bottom: 14px; line-height: 1.4; }
      .ct-approve { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 8px 0 18px; }
      .ct-approve-h { font-size: 11px; font-weight: 800; }
      .ct-approve-role { font-size: 10.5px; margin-top: 4px; }
      .ct-approve-name { font-size: 11px; font-weight: 700; margin-top: 3px; text-wrap: pretty; }
      .ct-approve-sign { display: flex; align-items: flex-end; gap: 8px; margin-top: 14px; }
      .ct-approve-sign span:last-child { font-size: 11px; font-weight: 700; white-space: nowrap; }
      .ct-app-title { font-size: 14px; font-weight: 700; text-align: center; margin: 10px 0 4px; }
      .ct-app-subtitle { text-align: center; font-size: 11.5px; margin-bottom: 3px; }
      .ct-app-note { text-align: center; font-size: 10.5px; color: #4a555c; font-style: italic; margin-bottom: 12px; }
      .ct-app-foot-note { font-size: 10.5px; color: #2c343a; margin-top: 12px; line-height: 1.5; }
      .ct-tasklist { padding-left: 20px; margin: 0; }
      .ct-tasklist li { font-size: 11px; margin-bottom: 5px; text-align: justify; text-wrap: pretty; }
      .ct-app-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; margin: 12px 0; font-size: 11px; }
      .ct-app-meta span { color: #6b7780; }
      .ct-app4-list { font-size: 11px; margin: 12px 0; }
      .ct-app4-list ul { margin: 6px 0 0; padding-left: 18px; }
      .ct-app4-list li { margin-bottom: 3px; }
      .ct-app4-h { font-size: 12px; font-weight: 700; text-align: center; margin: 16px 0 8px; }

      /* Таблиці */
      .ct-table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; }
      .ct-table th { background: #eef3f4; border: 1px solid #b9c4ca; padding: 5px 7px; font-size: 9.5px;
        font-weight: 700; text-align: center; line-height: 1.3; }
      .ct-table td { border: 1px solid #c8d1d6; padding: 6px 8px; font-size: 10.5px; vertical-align: top; }
      .ct-table .ct-c { text-align: center; }
      .ct-table .ct-r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
      .ct-total-row td { font-weight: 700; background: #f6f9f9; }
      .ct-price-line { font-size: 11.5px; font-weight: 600; margin: 10px 0; text-wrap: pretty; }

      .ct-koshtorys-sign { margin-top: 18px; }
      .ct-ks-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 12px;
        border-bottom: 1px solid #c8d1d6; padding-bottom: 3px; }
      .ct-ks-row span:first-child { font-size: 10.5px; color: #4a555c; }
      .ct-ks-name { font-size: 11px; font-weight: 700; white-space: nowrap; }

      /* Підвал */
      .ct-foot { margin-top: 18px; padding-top: 10px; border-top: 1px solid #e3e9ea; display: flex;
        justify-content: space-between; gap: 14px; font-family: "Nunito Sans", system-ui, sans-serif;
        font-size: 8px; color: #9aa6ad; }
      .ct-foot-c { font-style: italic; white-space: nowrap; }
      .ct-foot-r { white-space: nowrap; text-align: right; max-width: 38%; }
      .ct-flag { font-style: normal; }

      @media (max-width: 760px) {
        .ct-sheet { padding: 10mm; }
        .ct-reqs, .ct-approve, .ct-app-meta { grid-template-columns: 1fr; gap: 14px; }
      }
      @media print {
        body * { visibility: hidden !important; }
        .ct-root, .ct-root * { visibility: visible !important; }
        .ct-root { position: absolute !important; inset: 0 !important; z-index: 9999; }
        .ct-backdrop, .ct-toolbar { display: none !important; }
        .ct-scroll { overflow: visible !important; padding: 0 !important; display: block !important; gap: 0 !important; }
        .ct-sheet { box-shadow: none !important; width: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; }
        .ct-sheet + .ct-sheet { break-before: page; page-break-before: always; }
        mark.ct-fill { background: transparent !important; }
        mark.ct-ph { background: transparent !important; color: #1a1a1a !important; font-style: normal !important; }
        [contenteditable]:focus { outline: none !important; }
        @page { size: A4; margin: 14mm; }
      }
    `}</style>
  );
}

window.ContractPrintDoc = ContractPrintDoc;