/* ll_calc.css — TechMac × LeaseLink Calculator (compact)
 * Zmiany (2026-02-11):
 * - Usunięto pola VAT i Kategoria z layoutu (bardziej kompaktowo).
 * - Font: Inter + spójny kolor tekstu (#1d1d1f); dodano logo LeaseLink w lewym górnym rogu.
 */

    :root{
      --bg:#ffffff;
      --text:#1d1d1f;
      --muted:#8a8a8a;
      --line:rgba(0,0,0,.12);
      --box:#d9d9d9;
      --box2:#efefef;
      --radius2:10px;
    
      --font-main: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;}

    *, *::before, *::after { box-sizing: border-box; }

    body{ margin:0; font-family:var(--font-main); color:var(--text); background:var(--bg); }
    .wrap{ max-width: 980px; margin: 0 auto; padding: 22px 14px 28px; }

    .logoBar{ display:flex; justify-content:flex-start; align-items:center; margin: 0 0 10px; }
    .logoLL{ height: 28px; width:auto; display:block; object-fit:contain; }


    h1{ font-size:28px; margin:0 0 10px; text-align:center; }

    .toggle{ display:flex; justify-content:center; margin: 8px 0 18px; }
    .toggle .pill{ display:inline-flex; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#f3f3f3; }
    .toggle button{ border:0; padding:10px 16px; font-weight:800; cursor:pointer; background:transparent; }
    .toggle button.active{ background: var(--box); }

    /* TOP: tylko wartość */
    .topline{ margin: 6px 0 12px; }
    .toplineRow{
      display:grid;
      grid-template-columns: auto 380px;
      gap: 12px;
      align-items:center;
      justify-content:center;
    }
    .topLabel{ font-weight:800; font-size:14px; color:var(--muted); }
    .topValue{
      background: var(--box);
      border-radius: var(--radius2);
      padding: 10px 12px;
      font-weight:900;
      text-align:center;
      min-width: 300px;
    }

    /* FORM GRID: rząd 1 (gross+product) */
    .formGrid{
      display:grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-areas:
        "gross product";
      gap: 12px 22px;
      align-items:start;
      margin-top: 8px;
    }

.field{ min-width:0; }
    .field.gross{ grid-area:gross; }
.field.product{ grid-area:product; }
/* FIX: tylko pierwszy rząd wyrównujemy do góry,
       żeby "Nazwa produktu" była równo z "Wartość (brutto)" mimo hintu */
    .field.gross,
    .field.product{
      align-self:start;
    }

    .field label{ display:block; font-weight:800; font-size:13px; margin: 0 0 6px; }

    .field input,
    .field select{
      width:100%;
      height:44px;              /* równa wysokość inputów */
      padding: 10px 12px;
      border:1px solid var(--line);
      border-radius: var(--radius2);
      font-size:14px;
      min-width: 0;
      background:#fff;
    }

    .field .hint{
      font-size:12px;
      color:var(--muted);
      margin-top:6px;
      line-height:1.2;
    }

    hr{ border:0; border-top:1px solid var(--line); margin: 16px 0 16px; }

    .midGrid{
      display:grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr);
      gap: 22px;
      align-items:start;
    }

    .sliders{ display:flex; flex-direction:column; gap: 14px; }

    .sliderBlock{
      display:grid;
      grid-template-columns: 190px minmax(0, 1fr);
      gap: 12px;
      align-items:center;
    }
    .sliderLabel{ font-weight:800; font-size:14px; white-space:nowrap; }
    .sliderBlock input[type="range"]{ width:100%; }

    .sliderMeta{
      grid-column: 2 / 3;
      display:flex;
      justify-content:space-between;
      font-size:12px;
      color:var(--muted);
      margin-top: -6px;
    }
    .sliderMeta .val{ color:rgba(0,0,0,.75); font-weight:800; }

    .results{ display:flex; flex-direction:column; gap: 12px; margin-top: 6px; }
    .kpi{ display:grid; grid-template-columns: auto 240px; gap: 12px; align-items:center; }
    .kpi .kLabel{ font-weight:900; font-size:14px; }
    .kpi .kBox{
      background: var(--box);
      border-radius: var(--radius2);
      padding: 12px 12px;
      text-align:center;
      font-weight:900;
      font-size:14px;
    }

    .fineprint{
      text-align:center;
      font-size:12px;
      color:var(--muted);
      font-style:italic;
      margin-top: 14px;
    }

    .actions{
      display:flex;
      justify-content:center;
      gap: 12px;
      margin-top: 14px;
      flex-wrap:wrap;
    }
    .btn{
      border:1px solid var(--line);
      border-radius: 12px;
      padding: 10px 16px;
      font-weight:900;
      cursor:pointer;
      background: var(--box2);
      min-width: 170px;
      font-size:14px;
    }
    .btn.primary{ background:var(--text); border-color:var(--text); color:#fff; }
    .btn:disabled{ opacity:.5; cursor:not-allowed; }

    .status{
      text-align:center;
      margin-top: 10px;
      font-size: 13px;
      color: rgba(0,0,0,.7);
      min-height: 18px;
    }
    .status.error{ color:#b00020; font-weight:900; }

    /* Mobile */
    @media (max-width: 820px){
      .toplineRow{ grid-template-columns: 1fr; justify-content:stretch; }
      .topValue{ width:100%; min-width:unset; }

      .formGrid{
        grid-template-columns: 1fr;
        grid-template-areas:
          "gross"
          "product";
        align-items:start;
      }

      .field.gross,
      .field.product{
        align-self:stretch;
      }

      .midGrid{ grid-template-columns: 1fr; }
      .sliderBlock{ grid-template-columns: 1fr; }
      .sliderMeta{ grid-column: 1 / 2; }
      .kpi{ grid-template-columns: 1fr; }
      .kpi .kBox{ width:100%; }
      .actions .btn{ width:100%; }
    }