/* ============================================================
   BodySpace — warstwa marki
   Wartości pobrane pomiarowo z bodyspace.eu (Playwright), nie z oka:
     tło body            rgb(26,26,28)                       = #1A1A1C
     szkło kontenerów    rgba(255,255,255,.06) + blur(18px) saturate(1.6), radius 28px
     szkło nawigacji     rgba(26,26,28,.8) + blur(40px), pigułka
     przycisk główny     #BA203F / tekst #FCFCFC / 1px #991A33 / pigułka / lowercase
     przycisk wtórny     rgba(252,252,252,.2) / pigułka / lowercase
     gradient nagłówka   linear-gradient(90deg in oklch, #BA203F, #FF6B81)
     font                "Inter Tight"
   ============================================================ */

:root {
  color-scheme: dark;   /* chroni pola i kontrolki systemowe przed jasnym motywem */

  /* rampa marki */
  --color-primary-50:  #fdf4f6;
  --color-primary-100: #f8d2da;
  --color-primary-300: #eea0b1;
  --color-primary-400: #cc435e;
  --color-primary-500: #ba203f;
  --color-primary-600: #991a33;
  --color-primary-700: #751427;
  --color-primary-800: #520e1c;

  /* powierzchnie ciemne */
  --bs-bg:          #1a1a1c;   /* tło globalne */
  --bs-bg-deep:     #070b10;
  --bs-glass:       rgba(255, 255, 255, .06);   /* #FFFFFF0F */
  --bs-glass-hi:    rgba(255, 255, 255, .10);
  --bs-glass-line:  rgba(255, 255, 255, .12);
  --bs-field-line:  rgba(255, 255, 255, .28);   /* obrys pól — WCAG 1.4.11 (3:1) */
  --bs-glass-blur:  blur(18px) saturate(1.6);
  --bs-radius:      28px;

  /* tekst na ciemnym */
  --bs-fg:          #fcfcfc;
  --bs-fg-dim:      rgba(252, 252, 252, .72);   /* było .60 — WCAG AA */
  --bs-fg-mute:     rgba(252, 252, 252, .65);   /* było .38 — WCAG AA */
  --bs-placeholder: rgba(252, 252, 252, .58);

  --bs-teal:        #1390af;
  --bs-pink:        #ff6b81;

  /* typografia marki (zmierzona na bodyspace.eu):
     Poppins  — nagłówki, etykiety, przyciski (ls 1.4px na dużych)
     Mulish   — akapity, opisy, podpisy, sublinie */
  --font-main:    "Poppins", ui-sans-serif, system-ui, sans-serif;
  --font-caption: "Mulish", ui-sans-serif, system-ui, sans-serif;
  --default-font-family: var(--font-main);
}

@layer base {
  html { background: var(--bs-bg); }
  body {
    font-family: var(--font-main);
    background: transparent;   /* tło niesie html — inaczej zamalowałoby dekoracje */
    color: var(--bs-fg);
    -webkit-font-smoothing: antialiased;
  }
  ::selection { background: rgba(186,32,63,.35); }

  /* jeden spójny wskaźnik fokusu dla wszystkiego, co interaktywne */
  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid #ff6b81;
    outline-offset: 2px;
    border-radius: 6px;
  }

  /* autouzupełnianie Chrome nie może rozjaśnić pól */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fcfcfc;
    -webkit-box-shadow: 0 0 0 1000px #26262a inset;
    caret-color: #fcfcfc;
    transition: background-color 9999s ease-in-out 0s;
  }
}

@layer components {

  /* ---- dekoracje gradientowe (te same pliki co na bodyspace.eu) ---- */
  /* warstwa przypięta do okna — dekoracje nigdy nie rozpychają układu */
  .bs-grad-layer {
    position: fixed; inset: 0; overflow: hidden;
    pointer-events: none; z-index: 0;
  }
  .bs-content { position: relative; z-index: 1; }
  .bs-grad {
    position: absolute;
    pointer-events: none; user-select: none;
    width: 900px; height: 900px; max-width: none;   /* własna wysokość — brak webp nie zwija warstwy */
    transform: rotate(-41deg);
    /* maska wygasza krawędzie — bez niej gradient urywa się twardo przy brzegu okna */
    mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
  }
  /* na wąskich ekranach dekoracje mają być ledwie wyczuwalne */
  @media (max-width: 640px) {
    .bs-grad { width: 620px; opacity: .35 !important; }
  }
  .bs-grad img { width: 100%; height: 100%; object-fit: cover; }

  /* ---- szkło ---- */
  .glass {
    /* podkład przyciemniający — gradienty przechodzące pod kartą rozjaśniały ją
       i zbijały kontrast tekstu poniżej AA */
    background: linear-gradient(rgba(26,26,28,.5), rgba(26,26,28,.5)), var(--bs-glass);
    backdrop-filter: var(--bs-glass-blur);
    -webkit-backdrop-filter: var(--bs-glass-blur);
    border-radius: var(--bs-radius);
    border: 1px solid var(--bs-glass-line);
  }
  .glass-soft {
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.07);
  }
  .glass-nav {
    background: rgba(26,26,28,.8);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border-radius: 9999px;
  }

  /* ---- typografia ---- */
  h1, h2, h3, h4, h5, h6 { font-family: var(--font-main); }
  .display { letter-spacing: 1.4px; }              /* sygnatura marki na dużych nagłówkach */
  .subline, .caption, .hint, .muted-text {
    font-family: var(--font-caption);
  }
  .subline { font-size: 1rem; line-height: 1.625; letter-spacing: .1px; color: var(--bs-fg-dim); }
  .caption { font-size: .875rem; font-weight: 500; }
  p.body-text { font-family: var(--font-caption); line-height: 1.5; }

  /* ---- nagłówek z gradientem marki ---- */
  .heading-bs {
    background: linear-gradient(90deg in oklch, #ba203f 0%, #ff6b81 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }

  /* ---- przyciski (1:1 z bodyspace.eu) ---- */
  .b {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    border-radius: 9999px;
    font-family: var(--font-main);
    font-size: 15px; font-weight: 500; line-height: 1.2;
    text-transform: lowercase; letter-spacing: normal;
    /* Rozmiar TU, nie w wariantach — jeden przycisk = jedna wysokość na całej
       aplikacji. min-height trzyma równy rząd nawet, gdy treść jest krótka
       („+ dodaj") i daje sensowne pole dotyku. */
    padding: 11px 22px; min-height: 44px;
    cursor: pointer; border: 1px solid transparent;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
  }
  /* Warianty różnią się WYŁĄCZNIE kolorem — rozmiar jest jeden, wspólny (z `.b`).
     Wcześniej każdy wariant miał własny padding i font-size, więc w jednym pasku
     stały przyciski o wysokości 34/41/49/53 px i w dwóch rozmiarach pisma.
     Waga wizualna to zadanie koloru; wielkość to osobna oś (`.b-lg`). */
  .b-primary {
    background: #ba203f; color: #fcfcfc;
    border-color: #991a33;
  }
  .b-primary:hover { background: #a81c38; }
  .b-secondary {
    background: rgba(252,252,252,.2); color: #fcfcfc;
    border-color: transparent;
  }
  .b-secondary:hover { background: rgba(252,252,252,.28); }
  .b-quiet {
    background: rgba(255,255,255,.03); color: var(--bs-fg-dim);
    border-color: rgba(255,255,255,.1);
  }
  .b-quiet:hover { color: var(--bs-fg); border-color: rgba(255,255,255,.2); }
  /* Jedyny wariant, który świadomie zmienia rozmiar — duży przycisk logowania. */
  .b-lg { padding: 14px 32px; font-size: 16px; min-height: 52px; }
  .b-full { width: 100%; }

  /* ---- pola formularza na ciemnym ---- */
  .fld {
    /* Ta sama wysokość co `.b` (44 px) — pole i stojący obok niego przycisk
       muszą tworzyć jedną linię. Wcześniej pole miało 52 px i rozciągało
       przycisk we flexie, przez co ten sam przycisk miał inną wysokość
       na różnych ekranach. */
    width: 100%; padding: .625rem 1rem; min-height: 44px; font-size: .9375rem;
    /* Ta sama wysokość linii co w `.b` — bez tego pole wychodzi 44,5 px
       i rozciąga sąsiadujący przycisk do 45 px. */
    line-height: 1.2;
    color: var(--bs-fg);
    background: rgba(255,255,255,.04);
    border: 1px solid var(--bs-field-line);
    border-radius: 14px;
    transition: border-color .18s, background .18s, box-shadow .18s;
  }
  /* Pole wielolinijkowe rośnie od swojej liczby wierszy — min-height nie ma go
     spłaszczać do jednej linii. */
  textarea.fld { min-height: 0; padding: .75rem 1rem; }

  /* Listy wyboru dostają WŁASNĄ strzałkę zamiast natywnej. Przeglądarka rysuje
     swoją w obszarze paddingu, tuż przy krawędzi pola, i nie da się jej odsunąć —
     wygląda na przyklejoną do obrysu. Po `appearance:none` odstęp jest nasz
     (1rem od prawej), a strzałka wygląda tak samo w każdej przeglądarce.
     `padding-right` musi zostawić miejsce na strzałkę, żeby długa nazwa
     pozycji katalogu nie wchodziła pod nią. */
  select.fld {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    padding-right: 2.75rem;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23fcfcfc' stroke-opacity='.72' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px 8px;
  }
  select.fld:hover { background-color: rgba(255,255,255,.06); }
  /* Lista rozwinięta rysuje się natywnie — bez tego pozycje bywają białym
     tekstem na białym tle w niektórych przeglądarkach. */
  select.fld option { background: #26262a; color: var(--bs-fg); }
  .fld::placeholder { color: var(--bs-placeholder); }
  /* pola mają własny obrys, więc NIE dokładamy zewnętrznej obwódki —
     inaczej powstają dwa pierścienie. Jeden obrys + miękka poświata. */
  .fld:focus-visible {
    outline: none;
    border-color: #ff6b81;
    background: rgba(255,255,255,.07);
    box-shadow: 0 0 0 3px rgba(255,107,129,.22);
  }
  /* stan błędu walidacji */
  .fld[aria-invalid="true"], .fld:user-invalid {
    border-color: #ff6b81;
    background: rgba(186,32,63,.12);
  }
  .fld option { background: #1a1a1c; color: var(--bs-fg); }
  .lbl { display:block; font-family: var(--font-main); font-size:.8125rem; font-weight:500; color:var(--bs-fg-dim); margin-bottom:.5rem; }
  .hint { font-family: var(--font-caption); font-size:.75rem; color:var(--bs-fg-mute); margin-top:.375rem; }
  /* minimalne cele dotykowe 24×24 (WCAG 2.5.8) */
  .tap { display:inline-flex; align-items:center; justify-content:center; min-width:24px; min-height:24px; padding:4px 6px; }
  .err { font-family: var(--font-caption); font-size:.8125rem; color:#ff6b81; margin-top:.5rem; }

  /* ---- statusy oferty ---- */
  .status {
    display:inline-flex; align-items:center; gap:.375rem;
    padding:.25rem .625rem; border-radius:9999px;
    font-size:.75rem; font-weight:500; white-space:nowrap;
    border:1px solid transparent;
  }
  .status::before { content:""; width:.375rem; height:.375rem; border-radius:9999px; background:currentColor; }
  .status-szkic         { background:rgba(255,255,255,.06); color:rgba(252,252,252,.6); border-color:rgba(255,255,255,.1); }
  .status-wyslana       { background:rgba(19,144,175,.15); color:#66d3ee; border-color:rgba(19,144,175,.3); }
  .status-otwarta       { background:rgba(131,231,238,.14); color:#83e7ee; border-color:rgba(131,231,238,.28); }
  .status-zaakceptowana { background:rgba(198,245,111,.14); color:#c6f56f; border-color:rgba(198,245,111,.28); }
  .status-wygasla       { background:rgba(186,32,63,.16); color:#ff6b81; border-color:rgba(186,32,63,.35); }

  /* ---- pasek zaangażowania ---- */
  .spark { display:inline-flex; align-items:flex-end; gap:2px; height:14px; }
  .spark i { width:3px; background:#83e7ee; border-radius:1px; display:block; opacity:.8; }

  /* ---- tabela ---- */
  .tbl { width:100%; border-collapse:collapse; }
  .tbl th {
    text-align:left; font-size:.6875rem; font-weight:600; letter-spacing:.06em;
    text-transform:uppercase; color:var(--bs-fg-mute); padding:.875rem 1rem;
    font-family: var(--font-main);
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .tbl td { font-family: var(--font-caption); padding:1rem; border-bottom:1px solid rgba(255,255,255,.05); font-size:.875rem; color:rgba(252,252,252,.82); }
  .tbl tbody tr:hover { background:rgba(255,255,255,.03); }

  /* ---- nawigacja boczna ---- */
  .nav-i {
    display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem;
    border-radius:9999px; font-size:.9375rem; color:var(--bs-fg-dim); text-decoration:none;
    transition:background .18s, color .18s;
  }
  .nav-i:hover { background:rgba(255,255,255,.06); color:var(--bs-fg); }
  .nav-i.on { background:#ba203f; border:1px solid #991a33; color:#fcfcfc; }

  /* ---- własne pole wyboru (natywne było szarym kwadratem) ---- */
  .chk {
    appearance: none; -webkit-appearance: none;
    width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
    border: 1px solid var(--bs-field-line);
    background: rgba(255,255,255,.04);
    display: inline-grid; place-content: center; cursor: pointer;
    transition: background .15s, border-color .15s;
  }
  .chk::before {
    content: ""; width: 11px; height: 11px; transform: scale(0);
    transition: transform .12s ease-out;
    box-shadow: inset 1em 1em #fcfcfc;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  }
  .chk:checked { background: #ba203f; border-color: #991a33; }
  .chk:checked::before { transform: scale(1); }

  /* ---- przełącznik widoku (segmentowy) ---- */
  .seg { display:inline-flex; padding:4px; border-radius:9999px;
         background:rgba(255,255,255,.05); border:1px solid var(--bs-glass-line); }
  .seg-btn { font-family:var(--font-main); font-size:.875rem; font-weight:500;
             padding:.5rem 1.125rem; border-radius:9999px; color:var(--bs-fg-dim);
             cursor:pointer; border:1px solid transparent; transition:background .18s,color .18s; }
  .seg-btn:hover { color:var(--bs-fg); }
  .seg-btn[aria-selected="true"] { background:#ba203f; border-color:#991a33; color:#fcfcfc; }

  /* ---- metryki nagłówkowe (liczba nad podpisem) ---- */
  .metric-v { font-family:var(--font-main); font-size:1.75rem; font-weight:600; line-height:1.1; }
  .metric-k { font-family:var(--font-caption); font-size:.8125rem; color:var(--bs-fg-mute); margin-top:.25rem; }

  /* ---- tablica kanban ---- */
  .kan-board { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(248px,1fr);
               gap:1rem; overflow-x:auto; padding-bottom:.5rem; align-items:start; }
  .kan-col { background:rgba(255,255,255,.035); border:1px solid var(--bs-glass-line);
             border-radius:var(--bs-radius); padding:1rem; min-height:340px;
             display:flex; flex-direction:column; gap:.75rem; transition:background .18s, border-color .18s; }
  .kan-col.drag-over { background:rgba(186,32,63,.10); border-color:#ba203f; }
  .kan-head { display:flex; align-items:center; gap:.5rem; padding:0 .25rem .25rem; }
  .kan-title { font-family:var(--font-main); font-size:.875rem; font-weight:500; }
  .kan-count { font-family:var(--font-caption); font-size:.75rem; color:var(--bs-fg-mute);
               background:rgba(255,255,255,.07); border-radius:9999px; padding:.05rem .5rem; }

  .kan-card { background:linear-gradient(rgba(26,26,28,.5),rgba(26,26,28,.5)), rgba(255,255,255,.07);
              border:1px solid var(--bs-glass-line); border-radius:18px; padding:1rem;
              cursor:grab; transition:border-color .18s, transform .12s; }
  .kan-card:hover { border-color:rgba(255,255,255,.24); }
  .kan-card:active { cursor:grabbing; }
  .kan-card.dragging { opacity:.45; transform:scale(.98); }
  .kan-card-t { font-family:var(--font-main); font-weight:500; font-size:.9375rem; }
  .kan-card-m { font-family:var(--font-caption); font-size:.75rem; color:var(--bs-fg-mute); margin-top:.3rem; line-height:1.5; }
  .kan-empty { font-family:var(--font-caption); font-size:.8125rem; color:var(--bs-fg-mute);
               border:1px dashed rgba(255,255,255,.14); border-radius:16px;
               padding:1.25rem; text-align:center; }
  .sig { display:inline-flex; align-items:center; gap:.3rem; font-family:var(--font-caption);
         font-size:.6875rem; padding:.2rem .6rem; border-radius:9999px;
         background:rgba(131,231,238,.14); color:#83e7ee; border:1px solid rgba(131,231,238,.28); }
  .sig-warn { background:rgba(186,32,63,.16); color:#ff6b81; border-color:rgba(186,32,63,.35); }

  /* ---- panel boczny jako szkło ---- */
  .side {
    background: linear-gradient(rgba(26,26,28,.55), rgba(26,26,28,.55)), rgba(255,255,255,.05);
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    border: 1px solid var(--bs-glass-line);
    border-radius: var(--bs-radius);
  }

  /* ---- karta statystyki ---- */
  .stat { padding: 1.125rem 1.25rem; }
  .stat-k { font-family: var(--font-caption); font-size:.75rem; text-transform:uppercase;
            letter-spacing:.06em; color:var(--bs-fg-mute); }
  .stat-v { font-family: var(--font-main); font-size:1.75rem; font-weight:600; margin-top:.375rem; }

  /* logo BodySpace to czarny SVG — na ciemnym tle odwracamy */
  .logo-invert { filter: invert(1); }   /* brightness(2) wypalał krawędzie */

  @media print { .no-print { display:none !important; } }
}