/* Znacznik aktywnej pozycji nawigacji – "płetwa" po lewej */
.nav-active::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  border-left: 6px solid #2DD4BF;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

/* Tabele */
.tbl th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
          color: #64748b; font-weight: 600; padding: 8px 12px; }
.tbl td { padding: 10px 12px; font-size: 13.5px; border-top: 1px solid #eef2f6; }
.tbl tr:hover td { background: #fafcfe; }

/* Pola formularzy */
.field { width: 100%; border: 1px solid #d7dee7; border-radius: 8px; padding: 8px 10px;
         font-size: 14px; background: #fff; }
.field:focus { outline: 2px solid #155E75; outline-offset: 0; border-color: transparent; }
label.lbl { display: block; font-size: 12.5px; font-weight: 600; color: #334155; margin-bottom: 4px; }

.btn { display: inline-flex; align-items: center; gap: 6px; background: #155E75; color: #fff;
       font-weight: 600; font-size: 13.5px; padding: 9px 16px; border-radius: 8px; cursor: pointer; }
.btn:hover { background: #0E4C5E; }
.btn-ghost { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #cbd5e1;
             color: #334155; font-weight: 600; font-size: 13px; padding: 8px 14px;
             border-radius: 8px; cursor: pointer; background: #fff; }
.btn-ghost:hover { background: #f1f5f9; }
.badge { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 3px 9px;
         border-radius: 999px; white-space: nowrap; }

.card { background: #fff; border: 1px solid #e6ebf1; border-radius: 12px; }

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

/* ------------------------------------------------ motyw rekina (delikatny) */
::selection { background: rgba(45, 212, 191, 0.25); }

/* znak wodny – duża płetwa w tle dołu sidebara */
.fin-watermark {
  position: absolute; bottom: 64px; right: -34px; width: 150px; height: 150px;
  opacity: 0.045; pointer-events: none;
}

/* pusta tabela – płetwa nad komunikatem */
.empty-fin { display: block; margin: 0 auto 10px; opacity: 0.35; }

/* płetwa sunąca po linii wody (strona logowania) */
.ocean { position: relative; height: 34px; overflow: hidden; }
.ocean .waterline {
  position: absolute; left: 0; right: 0; bottom: 9px; height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(45,212,191,.5) 18%, rgba(45,212,191,.5) 82%, transparent);
}
.ocean .fin {
  position: absolute; bottom: 10px; animation: swim 14s linear infinite;
}
@keyframes swim {
  0%   { left: -32px; transform: scaleX(-1); }
  49%  { left: calc(100% + 8px); transform: scaleX(-1); }
  50%  { left: calc(100% + 8px); transform: scaleX(1); }
  99%  { left: -32px; transform: scaleX(1); }
  100% { left: -32px; transform: scaleX(-1); }
}
@media (prefers-reduced-motion: reduce) { .ocean .fin { animation: none; left: 46%; } }

/* płetwa na czubku paska postępu onboardingu */
.progress-track { position: relative; }
.progress-fin {
  position: absolute; top: -7px; transform: translateX(-7px);
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 7px solid #155E75;
}

/* ================= MOBILE ================= */
@media (max-width: 767px) {
  /* iOS: font >=16px w polach zapobiega auto-zoomowi przy fokusie */
  .field, input, select, textarea { font-size: 16px !important; }
  /* wygodne cele dotykowe */
  .btn, .btn-ghost, button[type="submit"] { min-height: 44px; }
  .tbl a, .tbl button { padding: 8px 4px; display: inline-block; }
  h1 { font-size: 1.35rem !important; }
  .card { border-radius: 14px; }
}

/* tabele-karty: na mobile każdy wiersz staje się kartą z etykietami */
@media (max-width: 767px) {
  .tbl-cards thead { display: none; }
  .tbl-cards, .tbl-cards tbody, .tbl-cards tr { display: block; width: 100%; min-width: 0 !important; }
  .tbl-cards tr {
    border: 1px solid #e2e8f0; border-radius: 12px; background: #fff;
    margin: 0 0 10px; padding: 4px 0; box-shadow: 0 1px 2px rgb(15 23 42 / 4%);
  }
  .tbl-cards td {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 14px; padding: 7px 14px !important; border: 0 !important; text-align: right;
  }
  .tbl-cards td[data-l]::before {
    content: attr(data-l); font-size: 10.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .05em; color: #94a3b8; flex-shrink: 0; text-align: left;
  }
  .tbl-cards td:first-child { font-weight: 600; }
  .tbl-cards td.tc-full { display: block; text-align: left; }
  .tbl-cards td:empty { display: none; }
  .tbl-cards td[colspan] { display: block; text-align: center; }
  .tbl-cards td:not([data-l]):not([colspan]) { justify-content: flex-end; }
  /* wrapper .card wokół tabeli-kart znika, żeby nie było karty w karcie */
  .card:has(> .tbl-cards), .card:has(> table.tbl-cards) {
    background: transparent; border: 0; box-shadow: none; overflow: visible !important; padding: 0 !important;
  }
}