/* ---------------------------------------------------------------------------
   Plain CSS — rzeczy, których nie warto (albo nie da się) wyrazić utilities:
   scrollbary, animacje wejścia, tooltipy sidebara w trybie collapsed.
   Tokeny motywu żyją w bloku @theme w index.html.
   --------------------------------------------------------------------------- */

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

/* Cała strona nigdy nie przewija się w poziomie — poziomy scroll jest
   dopuszczalny wyłącznie wewnątrz kontenera tabeli (.table-scroll). */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Świadomie BEZ scroll-behavior: smooth. W panelu z szeroką, przewijaną w
   poziomie tabelą asynchroniczny smooth-scroll psuje pozycjonowanie menu
   kontekstowego (scroll trwa dalej po otwarciu menu) i nic nie wnosi. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Scrollbary ---------------------------------------------------------- */

.thin-scroll {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--color-muted) 35%, transparent) transparent;
}
.thin-scroll::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}
.thin-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.thin-scroll::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--color-muted) 30%, transparent);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 9999px;
}
.thin-scroll::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklab, var(--color-muted) 55%, transparent);
  background-clip: content-box;
}

.no-scrollbar {
  scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* --- Animacje ------------------------------------------------------------ */

@keyframes ue-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ue-pop-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ue-toast-in {
  from {
    opacity: 0;
    transform: translateX(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.anim-fade {
  animation: ue-fade-in 0.22s ease both;
}
.anim-pop {
  animation: ue-pop-in 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.anim-toast {
  animation: ue-toast-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* --- Tooltipy sidebara w trybie collapsed -------------------------------- */

/* Pokazywane na hover ORAZ na focus-visible, żeby nawigacja klawiaturą
   w trybie collapsed nie była zgadywaniem po ikonach. */
.ue-tip {
  position: absolute;
  left: calc(100% + 0.625rem);
  top: 50%;
  transform: translateY(-50%) translateX(-3px);
  z-index: 60;
  white-space: nowrap;
  border-radius: 0.75rem;
  padding: 0.375rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  color: var(--color-accent-ink);
  background: #1e1b33;
  box-shadow: var(--shadow-pop);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.dark .ue-tip {
  background: #2a2350;
  border: 1px solid var(--color-side-line);
}

/* Nawigacja ma overflow-y-auto (długa lista Ustawień musi się przewijać), ale
   overflow tworzy kontekst przycinania także w poziomie — tooltipy wychodzące
   poza sidebar były ucinane do kilku pikseli. W trybie collapsed lista to
   maksymalnie 7 ikon, więc przewijanie jest tam zbędne i możemy je wyłączyć. */
html[data-sidebar='collapsed'] #sidebar nav {
  overflow: visible;
}

/* Tooltip tylko wtedy, gdy sidebar faktycznie jest zwinięty. */
html[data-sidebar='collapsed'] .ue-nav-item:hover > .ue-tip,
html[data-sidebar='collapsed'] .ue-nav-item:focus-visible > .ue-tip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Elementy widoczne tylko w jednym ze stanów sidebara. */
html[data-sidebar='collapsed'] [data-when='expanded'] {
  display: none !important;
}
html[data-sidebar='expanded'] [data-when='collapsed'] {
  display: none !important;
}

/* Na mobile sidebar jest drawerem i zawsze pokazuje pełne etykiety —
   stan "collapsed" dotyczy wyłącznie desktopu. */
@media (max-width: 1023px) {
  html[data-sidebar='collapsed'] [data-when='expanded'] {
    display: revert !important;
  }
  html[data-sidebar='collapsed'] [data-when='collapsed'] {
    display: none !important;
  }
  html[data-sidebar='collapsed'] .ue-nav-item:hover > .ue-tip {
    opacity: 0;
  }
}

/* --- Przyklejone kolumny brzegowe tabeli -------------------------------- */

/* Tabela ma 11 kolumn i przy 1280–1440px nie mieści się w karcie. Przyklejenie
   PIERWSZEJ (Unikalny kod) i OSTATNIEJ (Akcje) kolumny sprawia, że przewijając
   poziomo cały czas widać, o którym wierszu mowa i czym można w nim kliknąć —
   bez tego kolumna Akcje leżała ~475px za prawą krawędzią ekranu.
   Tło musi być nieprzezroczyste, inaczej przewijane komórki prześwitują. */
.col-sticky,
.col-sticky-r {
  position: sticky;
  z-index: 2;
  background: var(--color-card);
}
.col-sticky {
  left: 0;
}
.col-sticky-r {
  right: 0;
}
thead .col-sticky,
thead .col-sticky-r {
  z-index: 3;
  background: var(--color-card-soft);
}
tr:hover > .col-sticky,
tr:hover > .col-sticky-r {
  background: var(--color-card-soft);
}

/* Delikatna krawędź zamiast cienia — cień na sticky komórce zostawia
   artefakty przy podświetleniu wiersza. */
.col-sticky::after,
.col-sticky-r::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-line);
}
.col-sticky::after {
  right: 0;
}
.col-sticky-r::after {
  left: 0;
}

/* Cienie krawędziowe przyklejonych kolumn.

   Pojawiają się TYLKO wtedy, gdy po danej stronie faktycznie jest ukryta treść
   (atrybuty data-sl / data-sr ustawia JS na kontenerze przewijania). Bez tego
   przyklejona kolumna Akcje po prostu zasłaniała sąsiednią kolumnę i wyglądało
   to jak błąd renderowania, a przy szerokim ekranie — gdzie nic się nie
   przewija — stały cień byłby fałszywą kreską. */
[data-scroll-shadow][data-sl='1'] .col-sticky {
  box-shadow: 10px 0 18px -12px rgb(16 24 40 / 0.45);
}
[data-scroll-shadow][data-sr='1'] .col-sticky-r {
  box-shadow: -10px 0 18px -12px rgb(16 24 40 / 0.45);
}
.dark [data-scroll-shadow][data-sl='1'] .col-sticky {
  box-shadow: 10px 0 20px -10px rgb(0 0 0 / 0.7);
}
.dark [data-scroll-shadow][data-sr='1'] .col-sticky-r {
  box-shadow: -10px 0 20px -10px rgb(0 0 0 / 0.7);
}

/* --- Ikony Lucide -------------------------------------------------------- */

/* Lucide wstrzykuje <svg> zamiast <i data-lucide>; bez tego SVG bez klas
   utility miałby domyślne 24px i psuł wysokości przycisków. */
.ue-icon > svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------------------------------------------------------------------------
   Stany layoutu.

   Sterowane atrybutami na <html> (data-layout / data-sidebar / data-drawer),
   ustawianymi w shell.js i wstępnie w inline skrypcie w <head>. Trzymanie tego
   w CSS zamiast w podmienianiu klas z JS daje darmowe animacje i jedno miejsce,
   w którym widać cały układ.
   --------------------------------------------------------------------------- */

#sidebar {
  transition: width 0.2s ease, transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Desktop: szerokość zależna od trybu (280px / 76px). */
html[data-sidebar='expanded'] #sidebar {
  width: 17.5rem;
}
html[data-sidebar='collapsed'] #sidebar {
  width: 4.75rem;
}

/* W trybie collapsed pozycje nawigacji centrują ikonę. */
html[data-sidebar='collapsed'] #sidebar .ue-nav-item,
html[data-sidebar='collapsed'] #sidebar .ue-nav-center {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

/* Mobile: sidebar jest drawerem — zawsze pełna szerokość i pełne etykiety,
   wysunięty poza ekran dopóki nie jest otwarty. */
@media (max-width: 1023px) {
  #sidebar {
    width: 17.5rem !important;
    transform: translateX(-100%);
  }
  html[data-drawer='open'] #sidebar {
    transform: translateX(0);
  }
  html[data-sidebar='collapsed'] #sidebar .ue-nav-item,
  html[data-sidebar='collapsed'] #sidebar .ue-nav-center {
    justify-content: flex-start;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* Przełącznik layoutu: dokładnie jedna z dwóch belek nawigacji jest widoczna. */
html[data-layout='navbar'] #sidebar,
html[data-layout='navbar'] #overlay,
html[data-layout='navbar'] [data-only='sidebar'] {
  display: none !important;
}
html[data-layout='sidebar'] #topnav,
html[data-layout='sidebar'] [data-only='navbar'] {
  display: none !important;
}

/* Sticky header treści musi lądować POD sticky navbarem (h-16), inaczej
   przy przewijaniu jedno wchodzi na drugie. */
html[data-layout='navbar'] #pageheader {
  top: 4rem;
}

/* Rozwijana sekcja Ustawienia — animowana wysokość ustawiana z JS. */
.ue-collapse {
  overflow: hidden;
  transition: max-height 0.24s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease;
}