/* CyberShield SAST — Custom styles */

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.4);
  background-clip: padding-box;
  border: 2px solid transparent;
}

/* Glass morphism */
.glass {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-strong {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Page enter animation */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-up {
  animation: fadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Stagger children */
.stagger > * {
  opacity: 0;
  animation: fadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.stagger > *:nth-child(1) { animation-delay: 0.05s; }
.stagger > *:nth-child(2) { animation-delay: 0.10s; }
.stagger > *:nth-child(3) { animation-delay: 0.15s; }
.stagger > *:nth-child(4) { animation-delay: 0.20s; }
.stagger > *:nth-child(5) { animation-delay: 0.25s; }
.stagger > *:nth-child(6) { animation-delay: 0.30s; }
.stagger > *:nth-child(7) { animation-delay: 0.35s; }
.stagger > *:nth-child(8) { animation-delay: 0.40s; }

/* Severity badges */
.sev-critical {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.15), rgba(239, 68, 68, 0.15));
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.sev-high {
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.15), rgba(249, 115, 22, 0.15));
  color: #fdba74;
  border: 1px solid rgba(249, 115, 22, 0.3);
}
.sev-medium {
  background: linear-gradient(135deg, rgba(202, 138, 4, 0.15), rgba(234, 179, 8, 0.15));
  color: #fde047;
  border: 1px solid rgba(234, 179, 8, 0.3);
}
.sev-low {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(34, 197, 94, 0.15));
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.3);
}
.sev-info {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(99, 102, 241, 0.15));
  color: #93c5fd;
  border: 1px solid rgba(99, 102, 241, 0.3);
}

/* Status pills */
.status-pending { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.3); }
.status-running { background: rgba(59, 130, 246, 0.15); color: #93c5fd; border: 1px solid rgba(59, 130, 246, 0.3); }
.status-completed { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; border: 1px solid rgba(16, 185, 129, 0.3); }
.status-failed { background: rgba(239, 68, 68, 0.15); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.3); }

/* Loader / shimmer */
@keyframes shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}
.shimmer {
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
  background-size: 1000px 100%;
  animation: shimmer 2s infinite linear;
}

/* Toast */
.toast {
  animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Drag-drop ring */
.drop-active {
  border-color: rgb(51, 108, 255) !important;
  background: rgba(51, 108, 255, 0.05) !important;
  transform: scale(1.005);
}

/* Sidebar nav */
.nav-item {
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-item.active {
  background: rgba(51, 108, 255, 0.1);
  color: rgb(147, 197, 253);
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(to bottom, #336cff, #1f4cf5);
  box-shadow: 0 0 12px rgba(51, 108, 255, 0.6);
}

/* Code block */
.code-block {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  line-height: 1.5;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 12px 14px;
  overflow-x: auto;
  white-space: pre;
  color: #e2e8f0;
}

/* Progress bar gradient animated */
.progress-bar {
  background: linear-gradient(90deg, #336cff, #5993ff, #336cff);
  background-size: 200% 100%;
  animation: gradient 2s ease infinite;
}
@keyframes gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Hide scrollbar utility */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Selection color */
::selection {
  background: rgba(51, 108, 255, 0.3);
  color: white;
}

/* ============================================================
   Light-mode content area — .light-content overrides
   ============================================================ */

.light-content {
  background: #f1f5f9;
}

/* Glass cards → solid white with shadow */
.light-content .glass {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: #e2e8f0;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,.06), 0 1px 2px -1px rgba(0,0,0,.04);
}
.light-content .glass-strong {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: #cbd5e1;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05);
}

/* Topbar */
.light-content > header {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* --- Text: light-on-dark → dark-on-light (scoped to rendered view only) --- */
/* Topbar excluded so white-on-blue buttons (e.g. "Scan") keep white text */
.light-content #view .text-white   { color: #0f172a; }
.light-content #view .text-slate-100 { color: #1e293b; }
.light-content #view .text-slate-200 { color: #334155; }
.light-content #view .text-slate-300 { color: #475569; }

/* Topbar: hover-to-white → hover-to-dark */
.light-content header .hover\:text-white:hover { color: #0f172a !important; }
.light-content header h1 { color: #0f172a; }
.light-content header .text-slate-300 { color: #475569; }
.light-content header .text-slate-400 { color: #64748b; }

/* --- Dark background utilities → light equivalents --- */
.light-content .bg-slate-950  { background-color: #f8fafc !important; }
.light-content .bg-slate-900  { background-color: #f8fafc !important; }
.light-content .bg-slate-800  { background-color: #f1f5f9 !important; }
.light-content .bg-white\/5   { background-color: #f8fafc !important; }
.light-content .bg-white\/10  { background-color: #f1f5f9 !important; }

/* Opacity-bracket variants Tailwind CDN generates */
.light-content [class*="bg-slate-900\/"] { background-color: #f8fafc !important; }
.light-content [class*="bg-slate-800\/"] { background-color: #f1f5f9 !important; }
.light-content [class*="bg-slate-700\/"] { background-color: #e9eef4 !important; }
.light-content [class*="bg-white\/"] { background-color: #f8fafc !important; }

/* Specific transparent tints used in card headers / highlight rows */
.light-content .bg-red-500\/10      { background-color: rgba(239,68,68,.08)   !important; }
.light-content .bg-amber-500\/10    { background-color: rgba(245,158,11,.08)  !important; }
.light-content .bg-yellow-500\/10   { background-color: rgba(234,179,8,.08)   !important; }
.light-content .bg-emerald-500\/10  { background-color: rgba(16,185,129,.08)  !important; }
.light-content .bg-blue-500\/10     { background-color: rgba(59,130,246,.08)  !important; }

/* --- Borders --- */
.light-content .border-white\/5   { border-color: #e2e8f0 !important; }
.light-content .border-white\/10  { border-color: #cbd5e1 !important; }
.light-content [class*="border-white\/"] { border-color: #e2e8f0 !important; }

/* Dividers */
.light-content .divide-white\/5 > :not([hidden]) ~ :not([hidden]) { border-color: #e2e8f0; }
.light-content [class*="divide-white\/"] > :not([hidden]) ~ :not([hidden]) { border-color: #e2e8f0; }

/* --- Hover backgrounds --- */
.light-content .hover\:bg-white\/5:hover        { background-color: #f1f5f9 !important; }
.light-content .hover\:bg-white\/10:hover       { background-color: #e9eef4 !important; }
.light-content .hover\:bg-white\/\[0\.03\]:hover { background-color: #f8fafc !important; }
.light-content [class*="hover:bg-slate-"]:hover  { background-color: #f1f5f9 !important; }

/* Search bar in topbar */
.light-content .bg-slate-900\/40 {
  background-color: #f1f5f9 !important;
}
.light-content .hover\:bg-slate-900\/60:hover {
  background-color: #e9eef4 !important;
}

/* --- Inputs / form controls --- */
.light-content input,
.light-content select,
.light-content textarea {
  background-color: #ffffff;
  color: #0f172a;
  border-color: #cbd5e1;
}
.light-content input::placeholder,
.light-content textarea::placeholder { color: #94a3b8; }
.light-content input:focus,
.light-content select:focus,
.light-content textarea:focus {
  border-color: #336cff;
  outline-color: #336cff;
}

/* --- Code block --- */
.light-content .code-block {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #1e293b;
}

/* --- Shimmer skeleton --- */
.light-content .shimmer {
  background: linear-gradient(
    to right,
    #f1f5f9 0%,
    #e2e8f0 50%,
    #f1f5f9 100%
  );
  background-size: 1000px 100%;
}

/* --- Scrollbar --- */
.light-content ::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.2);
}
.light-content ::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.38);
  background-clip: padding-box;
}