/* style.css - Główne style dla Kreatora B2B Premium */

/* Zapobieganie migotaniu przed załadowaniem Vue */
[v-cloak] {
  display: none;
}

/* 1. Zarządzanie warstwami (Z-Index) i Widocznością */

header {
  z-index: 100;
}

/* KLUCZOWA POPRAWKA: Kontenery w Kreatorze i Zarządzaniu użytkownikami
   muszą mieć overflow: visible, aby listy rozwijane (dropdowny)
   nie były ucinane przez krawędź karty.
*/
.bg-white.rounded-\[2\.5rem\].border,
.bg-white.rounded-3xl,
.bg-white.shadow-sm.border.border-slate-200 {
  overflow: visible !important;
}

/* Izolacja głównego kontenera treści dla poprawnego kontekstu stosu */
main {
  isolation: isolate;
}

/* Klasa sterująca warstwą aktywnych komponentów UI (np. CustomSelect) */
.z-dropdown {
  z-index: 1001 !important;
  position: relative;
}

/* 2. Personalizacja pasków przewijania (Scrollbar) */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1; /* slate-300 */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8; /* slate-400 */
}

/* Klasa dla kontenerów z własnym przewijaniem */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

/* 3. Animacje i stany ładowania */

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-spin-custom {
  animation: spin-slow 1s linear infinite;
}

.transition-all {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 4. Typografia i layout */

body {
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Zapobieganie rozciąganiu tabel przez długie kody/linki */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Poprawa interakcji dotykowych na urządzeniach mobilnych */
button, input, select {
  touch-action: manipulation;
}

/* Zapewnienie, że menu rozwijane zawsze znajduje się nad ciemnymi panelami
   i posiada wyraźny cień ułatwiający czytelność.
*/
ul[v-show] {
  z-index: 9999 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

/* Stylizacja dla zaznaczenia tekstu */
::selection {
  background-color: #e0e7ff; /* indigo-100 */
  color: #312e81; /* indigo-900 */
}

/* 5. Animacje komponentów powiadomień (Toast) */
@keyframes gentleBellShake {
  0%, 100% { transform: rotate(0); }
  10% { transform: rotate(15deg); }
  20% { transform: rotate(-10deg); }
  30% { transform: rotate(5deg); }
  40% { transform: rotate(-5deg); }
  50%, 100% { transform: rotate(0); }
}

.animate-gentle-bell {
  animation: gentleBellShake 4s ease-in-out infinite;
  transform-origin: top center;
}

/* Subtelne rozchodzące się fale (Ripple) wokół całej pigułki */
@keyframes lightswindPillGlow {
  0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.3), 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
  70% { box-shadow: 0 0 0 12px rgba(99, 102, 241, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
  100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
}

.animate-lightswind-glow {
  animation: lightswindPillGlow 2.5s infinite;
}

/* 6. Form Select Custom Arrow */
.select-with-arrow {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 1rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem !important;
}