@tailwind base;
@tailwind components;
@tailwind utilities;

/* Ensure alerts always stay on top */
#globalSuccessAlert, #globalErrorAlert {
    z-index: 9999 !important;
}

.weapon-image {
    max-height: 48px;
    width: auto;
    object-fit: contain;
  }
  .collaborator-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

.subheading {
  background: transparent !important;   /* ✅ kills blue */
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  text-shadow:
    0 0 10px rgba(168,85,247,0.35),
    0 0 18px rgba(237,28,36,0.25);
}
  
  #inventoryTable th {
    background-color: #0E1726;
    color: #cbd5e1; /* slate-300 */
    font-weight: 600;
    text-transform: none; /* No uppercase */
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 0.875rem;
  }
  
.zebra-odd {
  background: rgba(255,255,255,0.015);
}

.zebra-even {
  background: rgba(0,0,0,0.25);
}
  
  #inventoryTable td {
    padding: 0.75rem 1rem;
  }
  
  .badge-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
  }

  dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.7);
  }
  
  dialog {
    outline: none;
    box-shadow: none;
  }

  .no-hover:hover {
    background-color: #16a34a !important; /* match bg-green-600 */
    color: white !important;
  }
  
  body {
    overflow-y: auto !important;
  }

  .ticket-card {
    position: relative;
    border-radius: 1.75em;
    overflow: hidden;
    background: transparent;
  }
  
  .ticket-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    offset-path: inset(0 round 1.75em);
    offset-distance: 0%;
    offset-rotate: auto;
    offset-anchor: 50% 50%;
    width: 40px; /* 🧼 magic number — big enough to feel like a line, small enough to not snap */
    height: 5px;
    background: linear-gradient(to left, var(--glow-color), transparent 80%);
    filter: drop-shadow(0 0 8px var(--glow-color));
    animation: border-spin 6s linear infinite;
    pointer-events: none;
  }  
  
  @keyframes border-spin {
    to { offset-distance: 100%; }
  }

  .ticket-card.glow-pending { --glow-color: #22c55e; }
  .ticket-card.glow-due     { --glow-color: #f97316; }
  .ticket-card.glow-late    { --glow-color: #ef4444; }
  .ticket-card.glow-approved { --glow-color: #3b82f6; } 

  .ticket-enter {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  .ticket-enter-active {
    opacity: 1;
    transform: scale(1) translateY(0);
    transition: all 0.3s ease-out;
  }
  
  .ticket-leave {
    opacity: 1;
  }
  .ticket-leave-active {
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.2s ease-in;
  }

  @keyframes sparkle {
    0%, 100% {
      text-shadow: 0 0 2px #fff, 0 0 4px #facc15;
    }
    50% {
      text-shadow: 0 0 6px #facc15, 0 0 12px #facc15;
    }
  }

  .ticket-card:hover {
  background-color: #f3f4f6; /* Example light gray */
}
  
  .sparkle-hover:hover {
    animation: sparkle 1.5s ease-in-out infinite;
  }
  
  .fade-in {
    animation: fadeIn 0.4s ease forwards;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes fade-in-down {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
  }
  .animate-fade-in-down {
    animation: fade-in-down 0.25s ease-out;
  }
  .fade-out {
    animation: fade-out 0.3s ease-in forwards;
  }
  #activeStaffAvatars img {
    transition: all 0.3s ease;
  }

  #modalLoadingOverlay {
    animation: fadeIn 0.3s ease-in-out;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  dialog:focus,
  dialog:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
  }

  @keyframes gradientShift {
  0% {
    background-position: 0% 0%, 100% 0%, 50% 100%;
  }
  50% {
    background-position: 50% 50%, 50% 20%, 50% 60%;
  }
  100% {
    background-position: 0% 0%, 100% 0%, 50% 100%;
  }
}

table thead th {
  background: transparent !important;
  color: #cbd5e1 !important;
  font-weight: 600;
  text-transform: none;
  border-bottom: 1px solid rgba(168,85,247,0.25);
}