/* FixOne · v3 (Stitch look) - wspólne style poza Tailwindem */

/* baza anty-FOUC: font/tło/kolor zanim Tailwind (CDN) i web-fonty się załadują */
html { background-color: #f9f9f9; }
body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1a1c1c; }

.tabular-nums { font-variant-numeric: tabular-nums; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0; vertical-align: middle; }
.material-symbols-outlined[data-weight="fill"] { font-variation-settings: 'FILL' 1; }

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* widoczny focus ring (a11y) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #1a1c1c; outline-offset: 2px; border-radius: 4px;
}

/* Spójne natywne <select> we WSZYSTKICH zakładkach: własny chevron, brak strzałki OS.
   Jedno źródło prawdy - reguła na elemencie, padding-right wymuszony nad utilsy Tailwinda. */
select:not([multiple]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 1rem;
  padding-right: 2.25rem !important;
  cursor: pointer;
}
select::-ms-expand { display: none; }

/* Własny panel rozwijanej listy (podmienia natywny popup OS-a; budowany przez topnav.js).
   position:fixed -> nie przycina go overflow modala/kontenera. */
.fx-select-panel {
  position: fixed;
  z-index: 9999;
  max-height: 16rem;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #d7dad9;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.16);
  padding: 4px;
}
.fx-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: 6px;
  font-size: 14px; line-height: 1.3; color: #1a1c1c;
  cursor: pointer; white-space: nowrap;
}
.fx-opt .fx-opt-check { font-size: 18px; opacity: 0; flex-shrink: 0; }
.fx-opt.fx-sel { font-weight: 600; }
.fx-opt.fx-sel .fx-opt-check { opacity: 1; }
.fx-opt.fx-hi { background: #f1f1f1; }
.fx-opt.fx-dis { color: #9aa0a0; cursor: not-allowed; }

/* szanuj prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* delikatny stepper postępu (klient/wykonawca) */
.step-line { width: 2px; background: #cfcfcf; }
.step-line.done { background: #1a1c1c; }

/* ukryj scrollbar w poziomych listach pigułek */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Kompaktowy ranking: subtelny, ale stale widoczny pionowy pasek przewijania. */
.fx-rank-scroll { scrollbar-width: thin; scrollbar-color: #9aa0a0 transparent; }
.fx-rank-scroll::-webkit-scrollbar { width: 6px; }
.fx-rank-scroll::-webkit-scrollbar-track { background: transparent; }
.fx-rank-scroll::-webkit-scrollbar-thumb { background: #9aa0a0; border-radius: 9999px; }
.fx-rank-scroll::-webkit-scrollbar-thumb:hover { background: #6d6d6d; }

/* wykresy słupkowe CSS: kolumny wypełniają wysokość kontenera,
   dzięki czemu słupki ze `style="height:NN%"` mają określoną bazę i nie kolapsują do 0 */
.chart-bars { align-items: stretch !important; }
.chart-bars > * { justify-content: flex-end; }

/* wejście treści przy przejściu między zakładkami (każda rola) - jak w v1 */
@keyframes fx-page-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* animacja startuje dopiero po odsłonięciu strony (anty-FOUC dodaje .fx-ready),
   żeby nie „przewijała się" pod ukryciem i była widoczna od początku */
html.fx-ready main { animation: fx-page-enter .32s cubic-bezier(.4,0,.2,1) both; }
@media (prefers-reduced-motion: reduce) { html.fx-ready main { animation: none !important; } }