@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* Globalne pomniejszenie interfejsu: Tailwind liczy prawie wszystkie
   rozmiary (padding, tekst, odstępy) w rem, więc zmniejszenie bazowego
   font-size skaluje proporcjonalnie całą stronę - w tym tabelkę w Magazynie. */
html {
  font-size: 87.5%; /* domyślne 16px -> 14px */
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 20px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 600;
  color: #6b7280;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-btn:hover {
  background: #f3f4f6;
  color: #111827;
}

.nav-btn.active {
  background: #111827;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

#qr-reader video {
  border-radius: 16px;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.pill-pink { background: #fdf2f8; color: #db2777; }
.pill-blue { background: #eff6ff; color: #2563eb; }
.pill-gray { background: #f3f4f6; color: #4b5563; }
.pill-green { background: #ecfdf5; color: #059669; }
.pill-red { background: #fef2f2; color: #dc2626; }
.pill-indigo { background: #e0e7ff; color: #4f46e5; }
.pill-purple { background: #f3e8ff; color: #9333ea; }

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* Fix table on mobile */
@media (max-width: 768px) {
  table.responsive-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}
/* Hide number input arrows */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* Image Tooltip Hover */
.img-tooltip-container .img-tooltip {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.2s linear;
}
.img-tooltip-container:hover .img-tooltip {
  visibility: visible;
  opacity: 1;
}

/* Sidebar collapsed state (desktop only) */
#sidebar { transition: width 0.3s ease; overflow-x: hidden; white-space: nowrap; }
@media (min-width: 768px) {
  #sidebar.collapsed { width: 88px; z-index: 50; }
  /* Rozwinięcie na hover wyjmuje pasek z przepływu flex (position: absolute),
     dzięki czemu nie wpływa na szerokość main-content w żadnej przeglądarce
     (w tym Safari/macOS, gdzie stara sztuczka z ujemnym marginesem "wyciekała"
     i przesuwała stronę w prawo). */
  #sidebar.collapsed:hover {
    width: 288px;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    box-shadow: 10px 0 30px rgba(0,0,0,0.05);
  }

  #sidebar.collapsed:not(:hover) .nav-btn { justify-content: center; padding-left: 0; padding-right: 0; }
  #sidebar.collapsed:not(:hover) .nav-btn span,
  #sidebar.collapsed:not(:hover) .logo-text,
  #sidebar.collapsed:not(:hover) .user-info,
  #sidebar.collapsed:not(:hover) .system-label { display: none; }
  #sidebar.collapsed:not(:hover) .nav-btn i { margin: 0; }
  #sidebar.collapsed:not(:hover) .user-box { padding: 10px; }
  #sidebar.collapsed:not(:hover) .logout-btn span { display: none; }
  #sidebar.collapsed:not(:hover) .logout-btn { padding: 10px; }
}