@import "tailwindcss";

@theme {
  --color-dark-900: #0f0f0f;
  --color-dark-800: #1a1a1a;
  --color-dark-700: #252525;
  --color-dark-600: #333333;
  --color-accent: #4f8cff;
  --color-accent-hover: #6ba0ff;
  --color-accent-dim: #3a6fd8;
}

.avatar-sm {
  width: 24px;
  height: 24px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
}

/* Steam Level Badge */
.steam-lvl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  border-radius: 10px;
  border: solid #9b9b9b 1.5px;
  height: 18px;
  width: 18px;
  color: #e5e5e5;
  flex-shrink: 0;
  font-weight: 600;
}
.steam-lvl.l10 { border-color: #c02942; }
.steam-lvl.l20 { border-color: #d95b43; }
.steam-lvl.l30 { border-color: #fecc23; }
.steam-lvl.l40 { border-color: #467a3c; }
.steam-lvl.l50 { border-color: #4e8ddb; }
.steam-lvl.l60 { border-color: #7652c9; }
.steam-lvl.l70 { border-color: #c252c9; }
.steam-lvl.l80 { border-color: #542437; }
.steam-lvl.l90 { border-color: #997c52; }
.steam-lvl.l100p {
  border: none;
  border-radius: 0;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
  font-size: 9px;
  height: 20px;
  width: 20px;
  text-shadow: 1px 1px #1a1a1a;
}
.steam-lvl.l100p.img-100 { background-image: url('https://community.fastly.steamstatic.com/public/shared/images/community/levels_hexagons.png'); }
.steam-lvl.l100p.img-200 { background-image: url('https://community.fastly.steamstatic.com/public/shared/images/community/levels_shields.png'); }
.steam-lvl.l100p.img-300 { background-image: url('https://community.fastly.steamstatic.com/public/shared/images/community/levels_books.png'); }
.steam-lvl.l100p.img-400 { background-image: url('https://community.fastly.steamstatic.com/public/shared/images/community/levels_chevrons.png'); }
.steam-lvl.l100p.img-500 { background-image: url('https://community.fastly.steamstatic.com/public/shared/images/community/levels_circle2.png'); }
.steam-lvl.l100p.img-600 { background-image: url('https://community.fastly.steamstatic.com/public/shared/images/community/levels_angle.png'); }
.steam-lvl.l100p.img-700 { background-image: url('https://community.fastly.steamstatic.com/public/shared/images/community/levels_flag.png'); }
.steam-lvl.l100p.img-800 { background-image: url('https://community.fastly.steamstatic.com/public/shared/images/community/levels_wings.png'); }
.steam-lvl.l100p.img-900 { background-image: url('https://community.fastly.steamstatic.com/public/shared/images/community/levels_arrows.png'); }

.btn-primary {
  @apply bg-accent hover:bg-accent-hover text-white font-medium py-2 px-4 rounded text-sm transition-colors cursor-pointer;
}
.btn-secondary {
  @apply bg-dark-700 hover:bg-dark-600 text-gray-300 font-medium py-2 px-4 rounded text-sm transition-colors border border-dark-600 cursor-pointer;
}
.btn-accent {
  @apply bg-accent-dim hover:bg-accent text-white font-medium py-2 px-4 rounded text-sm transition-colors cursor-pointer;
}
.btn-danger {
  @apply bg-red-600/20 hover:bg-red-600/30 text-red-400 font-medium py-2 px-4 rounded text-sm transition-colors border border-red-600/30 cursor-pointer;
}
.btn-danger-outline {
  @apply bg-transparent hover:bg-red-600/10 text-red-400 font-medium py-2 px-4 rounded text-sm transition-colors border border-red-600/30 cursor-pointer;
}

.badge {
  @apply inline-block px-2 py-0.5 rounded text-xs font-medium;
}
.badge-ok { @apply bg-green-500/20 text-green-400; }
.badge-error { @apply bg-red-500/20 text-red-400; }
.badge-running { @apply bg-blue-500/20 text-blue-400; }
.badge-unknown { @apply bg-gray-500/20 text-gray-500; }

.progress-bar {
  @apply w-full h-1.5 bg-dark-600 rounded-full overflow-hidden;
}
.progress-fill {
  @apply h-full bg-accent rounded-full transition-all duration-300;
}

.cell-copy {
  @apply cursor-pointer hover:text-gray-200 transition-colors select-all;
}

.copy-tooltip {
  position: fixed;
  transform: translate(-50%, -100%);
  background: #333;
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.2s;
}

[data-tooltip] {
  position: relative;
}
button[disabled][data-tooltip] {
  pointer-events: auto;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  background: #0f0f1a;
  border: 1px solid #6b6b8a;
  color: #f0f0f8;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 5px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}
[data-tooltip]:hover::after {
  opacity: 1;
}

.popup-2fa {
  position: fixed;
  z-index: 100;
  background: var(--color-dark-700);
  border: 1px solid var(--color-dark-600);
  border-radius: 8px;
  padding: 8px 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.popup-2fa-code {
  font-size: 1.5rem;
  font-family: monospace;
  color: var(--color-accent);
  cursor: pointer;
  user-select: all;
}

.action-menu-dropdown {
  @apply bg-dark-700 border border-dark-600 rounded-lg shadow-xl py-1 z-50 min-w-[180px];
}
.action-menu-item {
  @apply block w-full text-left px-3 py-1.5 text-sm text-gray-300 hover:bg-dark-600 hover:text-white transition-colors cursor-pointer;
}

.confirm-overlay {
  @apply fixed inset-0 bg-black/60 flex items-center justify-center z-50;
}
.confirm-box {
  @apply bg-dark-800 border border-dark-600 rounded-lg p-6 w-full max-w-md shadow-xl;
  overflow-wrap: break-word;
  word-break: break-word;
}

.toast-container {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.5rem;
  z-index: 9999;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.8rem;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  animation: toastIn 0.25s ease-out;
  transition: opacity 0.3s;
}
.toast-info { background: #2563eb; }
.toast-success { background: #16a34a; }
.toast-error { background: #dc2626; }
.toast-warn { background: #d97706; }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes shimmer {
  0% { stroke-dashoffset: 80; }
  100% { stroke-dashoffset: -80; }
}
.icon-shimmer {
  stroke: rgba(255, 255, 255, 0.45);
  stroke-dasharray: 8 72;
  animation: shimmer 2.5s linear infinite;
}

.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 38px;
  height: 22px;
  cursor: pointer;
  flex-shrink: 0;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.toggle-track {
  position: absolute;
  inset: 0;
  background: #2a2a2a;
  border: 1px solid #444;
  border-radius: 999px;
  transition: background 0.2s, border-color 0.2s;
}
.toggle-track::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #666;
  top: 2px;
  left: 2px;
  transition: transform 0.2s, background 0.2s;
}
.toggle-switch input:checked ~ .toggle-track {
  background: #4f8cff;
  border-color: #4f8cff;
}
.toggle-switch input:checked ~ .toggle-track::before {
  transform: translateX(16px);
  background: #fff;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-dark-900); }
::-webkit-scrollbar-thumb { background: var(--color-dark-600); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #555; }
