/* Drobne tweaki ponad Tailwind */

/* Płynniejsza animacja flash messages */
[data-flash] {
  animation: slide-in 0.25s ease-out;
}
@keyframes slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Lepszy scrollbar w panelach */
.thin-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.thin-scroll::-webkit-scrollbar-track { background: transparent; }
.thin-scroll::-webkit-scrollbar-thumb { background: rgb(203 213 225); border-radius: 4px; }
.thin-scroll::-webkit-scrollbar-thumb:hover { background: rgb(148 163 184); }

/* Karty urządzeń — gradient na nagłówku */
.device-card-header {
  background-image: linear-gradient(135deg, rgba(59,130,246,.07), rgba(99,102,241,.04));
}

/* Pulsująca kropka online */
.dot-online {
  position: relative;
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 9999px;
  background: rgb(16 185 129);
}
.dot-online::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 9999px;
  background: rgb(16 185 129 / 0.4);
  animation: ping 2s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

/* Tabela danych — zebra wiersze */
.table-zebra tbody tr:nth-child(odd) { background: rgb(248 250 252); }

/* Strona logowania — tło */
.login-bg {
  background:
    radial-gradient(at 25% 15%, rgba(59,130,246,.18) 0px, transparent 50%),
    radial-gradient(at 80% 80%, rgba(99,102,241,.18) 0px, transparent 50%),
    #0f172a;
}

/* Token klikalny do skopiowania */
.token-chip {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.8125rem;
  word-break: break-all;
  background: rgb(241 245 249);
  border: 1px solid rgb(226 232 240);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: all .15s ease;
}
.token-chip:hover { background: rgb(226 232 240); }
.token-chip.copied { background: rgb(220 252 231); border-color: rgb(134 239 172); }