/* ============================================================
   HACKER / TERMINAL THEME - Navy Blue
   ============================================================ */

/* Google Font - Share Tech Mono (terminal look) */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=VT323&display=swap');

/* ── Root Variables ── */
:root {
  --green:         #00cfff;
  --green-dim:     #0099cc;
  --green-dark:    #005580;
  --green-glow:    #00cfff80;
  --black:         #060d1a;
  --black-soft:    #0a1628;
  --black-mid:     #0d1f3c;
  --black-card:    #071020;
  --border:        #00cfff25;
  --border-bright: #00cfff60;
  --text-dim:      #0088bb;
  --text-muted:    #004466;
  --red-hack:      #ff4060;
  --yellow-hack:   #00eeff;
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--green);
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* ── Matrix Rain Background ── */
#matrix-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  opacity: 0.07;
  pointer-events: none;
}

/* everything sits above canvas */
body > *:not(#matrix-canvas) { position: relative; z-index: 1; }

/* ── Scanline Overlay ── */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,207,255,0.015) 2px,
    rgba(0,207,255,0.015) 4px
  );
  pointer-events: none;
  z-index: 2;
  animation: scanlines 8s linear infinite;
}

@keyframes scanlines {
  0%   { background-position: 0 0; }
  100% { background-position: 0 100%; }
}

/* ── CRT Flicker ── */
body::after {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: transparent;
  pointer-events: none;
  z-index: 3;
  animation: crt-flicker 0.15s infinite;
}
@keyframes crt-flicker {
  0%   { opacity: 1; }
  92%  { opacity: 1; }
  93%  { opacity: 0.92; }
  94%  { opacity: 1; }
  96%  { opacity: 0.95; }
  100% { opacity: 1; }
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--green-dark); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--green); }

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Share Tech Mono', monospace;
  color: var(--green);
  text-shadow: 0 0 10px var(--green-glow);
}
p, span, label, td, th, li { color: var(--green-dim); }
a { color: var(--green); text-decoration: none; transition: all 0.2s; }
a:hover { color: #fff; text-shadow: 0 0 8px var(--green); }

code, pre, .font-mono {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  color: var(--green);
}

/* ── NAVIGATION ── */
nav, .navbar {
  background: var(--black-soft) !important;
  border-bottom: 1px solid var(--border-bright) !important;
  box-shadow: 0 0 20px var(--green-glow);
  position: relative;
  z-index: 100;
}
nav::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  animation: nav-scan 3s linear infinite;
}
@keyframes nav-scan {
  0%   { transform: scaleX(0); transform-origin: left; }
  50%  { transform: scaleX(1); transform-origin: left; }
  51%  { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

nav a {
  color: var(--green-dim) !important;
  font-family: 'Share Tech Mono', monospace;
  border: 1px solid transparent;
  transition: all 0.2s !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
}
nav a:hover, nav a.active {
  color: var(--green) !important;
  background: var(--border) !important;
  border-color: var(--green-dark) !important;
  text-shadow: 0 0 8px var(--green-glow);
  box-shadow: 0 0 10px var(--green-glow) inset;
}

/* Logo */
nav .flex-shrink-0 span, nav .font-bold {
  color: var(--green) !important;
  text-shadow: 0 0 12px var(--green-glow);
  font-family: 'VT323', monospace;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
}

/* ── CARDS / GLASS-CARD ── */
.glass-card, .bg-gray-800, .bg-gray-800\/70,
[class*="bg-gray-8"] {
  background: var(--black-card) !important;
  border: 1px solid var(--border-bright) !important;
  box-shadow: 0 0 20px rgba(0,207,255,0.08), inset 0 0 20px rgba(0,207,255,0.02);
  border-radius: 0 !important;
  position: relative;
  overflow: hidden;
}
.glass-card::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  animation: card-scan 4s linear infinite;
}
@keyframes card-scan {
  0%   { left: -100%; }
  100% { left: 100%; }
}

/* Kill tailwind's rounded-* on cards */
.rounded-2xl, .rounded-xl, .rounded-lg, .rounded-md, .rounded {
  border-radius: 0 !important;
}

/* ── INPUTS ── */
input, textarea, select {
  background: var(--black) !important;
  border: 1px solid var(--green-dark) !important;
  color: var(--green) !important;
  font-family: 'Share Tech Mono', monospace !important;
  border-radius: 0 !important;
  outline: none !important;
  transition: all 0.2s !important;
  caret-color: var(--green);
}
input::placeholder, textarea::placeholder { color: var(--text-muted) !important; }
input:focus, textarea:focus, select:focus {
  border-color: var(--green) !important;
  box-shadow: 0 0 12px var(--green-glow) !important;
}
input[type="text"], input[type="password"], input[type="email"], input[type="number"] {
  letter-spacing: 0.05em;
}
select option { background: var(--black-soft); color: var(--green); }

/* ── BUTTONS ── */
button, .btn-primary, .btn-success, .btn-danger,
[class*="bg-green-6"], [class*="bg-blue-6"], [class*="bg-red-6"] {
  font-family: 'Share Tech Mono', monospace !important;
  border-radius: 0 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: all 0.2s !important;
  position: relative;
  overflow: hidden;
}

/* Green / primary buttons */
.btn-green, .btn-primary,
button[class*="green"], button[class*="from-green"],
a[class*="bg-green"] {
  background: transparent !important;
  border: 1px solid var(--green) !important;
  color: var(--green) !important;
  text-shadow: 0 0 6px var(--green-glow);
}
.btn-green:hover, .btn-primary:hover,
button[class*="green"]:hover, button[class*="from-green"]:hover,
a[class*="bg-green"]:hover {
  background: var(--green) !important;
  color: var(--black) !important;
  box-shadow: 0 0 20px var(--green-glow);
  text-shadow: none;
}

/* Red / danger buttons */
button[class*="red"], a[class*="bg-red"], .btn-danger {
  background: transparent !important;
  border: 1px solid var(--red-hack) !important;
  color: var(--red-hack) !important;
}
button[class*="red"]:hover, a[class*="bg-red"]:hover {
  background: var(--red-hack) !important;
  color: var(--black) !important;
  box-shadow: 0 0 20px rgba(255,0,64,0.5);
}

/* Blue / info buttons → restyle to green outline */
button[class*="blue"], a[class*="bg-blue"], .btn-info {
  background: transparent !important;
  border: 1px solid var(--green-dim) !important;
  color: var(--green-dim) !important;
}
button[class*="blue"]:hover, a[class*="bg-blue"]:hover {
  background: var(--green-dim) !important;
  color: var(--black) !important;
  box-shadow: 0 0 20px var(--green-glow);
}

/* Yellow reset password link */
.text-yellow-400 { color: var(--yellow-hack) !important; text-shadow: 0 0 6px rgba(255,255,0,0.4); }

/* ── Submit button ripple ── */
button[type="submit"]::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: rgba(0,207,255,0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s, height 0.4s, opacity 0.4s;
  opacity: 0;
}
button[type="submit"]:active::after {
  width: 300px; height: 300px; opacity: 0;
}

/* ── TABLES ── */
table {
  border-collapse: collapse;
  width: 100%;
  font-family: 'Share Tech Mono', monospace;
}
thead tr {
  background: var(--black-soft) !important;
  border-bottom: 2px solid var(--green-dark) !important;
}
thead th {
  color: var(--green) !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  padding: 12px 16px;
  text-shadow: 0 0 8px var(--green-glow);
}
tbody tr {
  background: var(--black-card) !important;
  border-bottom: 1px solid var(--border) !important;
  transition: all 0.15s;
}
tbody tr:hover {
  background: rgba(0,207,255,0.04) !important;
  box-shadow: inset 3px 0 0 var(--green);
}
td {
  color: var(--green-dim) !important;
  padding: 10px 16px;
  font-size: 0.85rem;
}

/* ── STAT / INFO CARDS ── */
.stat-card, .software-card {
  background: var(--black-card) !important;
  border: 1px solid var(--border-bright) !important;
  box-shadow: 0 0 15px rgba(0,207,255,0.05);
  transition: all 0.3s !important;
  border-radius: 0 !important;
}
.stat-card:hover, .software-card:hover {
  border-color: var(--green) !important;
  box-shadow: 0 0 25px var(--green-glow) !important;
  transform: translateY(-2px);
}

/* ── BADGES / PILLS ── */
[class*="bg-green-5"], [class*="bg-green-9"] {
  background: rgba(0,207,255,0.1) !important;
  color: var(--green) !important;
  border: 1px solid var(--green-dark) !important;
  border-radius: 0 !important;
}
[class*="bg-red-5"], [class*="bg-red-9"] {
  background: rgba(255,0,64,0.1) !important;
  color: var(--red-hack) !important;
  border: 1px solid rgba(255,0,64,0.3) !important;
  border-radius: 0 !important;
}
[class*="bg-yellow-5"], [class*="bg-yellow-9"] {
  background: rgba(255,255,0,0.08) !important;
  color: var(--yellow-hack) !important;
  border: 1px solid rgba(255,255,0,0.2) !important;
  border-radius: 0 !important;
}
[class*="bg-blue-5"], [class*="bg-blue-9"] {
  background: rgba(0,207,255,0.08) !important;
  color: var(--green-dim) !important;
  border: 1px solid var(--border-bright) !important;
  border-radius: 0 !important;
}

/* ── MODALS ── */
[id*="Modal"], [id*="modal"] {
  background: rgba(0,0,0,0.92) !important;
}
[id*="Modal"] > div, [id*="modal"] > div {
  background: var(--black-soft) !important;
  border: 1px solid var(--green) !important;
  box-shadow: 0 0 40px var(--green-glow) !important;
  border-radius: 0 !important;
}
[id*="Modal"] h3, [id*="modal"] h3 {
  color: var(--green) !important;
  text-shadow: 0 0 8px var(--green-glow);
}

/* Modal header separator */
[id*="Modal"] .border-b, [id*="modal"] .border-b {
  border-color: var(--green-dark) !important;
}

/* ── TOASTS ── */
#toast-container .toast,
[class*="bg-green-9"], [class*="bg-red-9"],
[class*="bg-yellow-9"], [class*="bg-blue-9"] {
  border-radius: 0 !important;
  border-left: 3px solid var(--green) !important;
  font-family: 'Share Tech Mono', monospace;
}

/* ── LOADING OVERLAY ── */
#loading-overlay {
  background: rgba(0,0,0,0.9) !important;
}
#loading-overlay .animate-spin {
  border-color: var(--green-dark) transparent var(--green-dark) transparent !important;
  border-top-color: var(--green) !important;
}

/* ── MAIN CONTENT ── */
main {
  position: relative;
  z-index: 10;
}

/* ── SECTION / PAGE HEADERS ── */
.page-header, .mb-8 > h1, .mb-8 > h2 {
  position: relative;
}
.page-header::before, h1.text-3xl::before {
  content: '> ';
  color: var(--green);
  text-shadow: 0 0 8px var(--green-glow);
}

/* ── GLITCH ANIMATION ── */
@keyframes glitch {
  0%   { text-shadow: 0 0 10px var(--green-glow); }
  20%  { text-shadow: -2px 0 #ff4060, 2px 0 var(--green); clip-path: inset(10% 0 80% 0); }
  40%  { text-shadow: 2px 0 #ff4060, -2px 0 var(--green); clip-path: inset(60% 0 20% 0); }
  60%  { text-shadow: 0 0 10px var(--green-glow); clip-path: none; }
  80%  { text-shadow: -1px 0 #ff4060, 1px 0 var(--green); }
  100% { text-shadow: 0 0 10px var(--green-glow); }
}
.glitch {
  animation: glitch 4s ease-in-out infinite;
}

/* ── TYPING CURSOR ── */
.typing-cursor::after {
  content: '█';
  color: var(--green);
  animation: blink 1s step-end infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── TERMINAL PROMPT ── */
.terminal-prompt::before {
  content: 'root@sys:~$ ';
  color: var(--green-dim);
  font-size: 0.75em;
}

/* ── GLOW TEXT ── */
.glow-text {
  text-shadow: 0 0 10px var(--green-glow), 0 0 20px var(--green-glow);
}

/* ── PROGRESS / STAT BARS ── */
[class*="bg-green-6"]:not(button):not(a):not(nav *) {
  background: var(--green) !important;
  box-shadow: 0 0 8px var(--green-glow);
}

/* ── CREDITS BADGE ── */
#credit-balance { color: var(--green); text-shadow: 0 0 6px var(--green-glow); }
.fa-coins { color: var(--yellow-hack) !important; }

/* ── BORDER OVERRIDES ── */
.border-gray-700, .border-gray-600 { border-color: var(--border) !important; }
.border-gray-800 { border-color: var(--black-soft) !important; }

/* ── TEXT COLOR OVERRIDES ── */
.text-white { color: var(--green) !important; }
.text-gray-100, .text-gray-200 { color: var(--green-dim) !important; }
.text-gray-300, .text-gray-400 { color: var(--text-dim) !important; }
.text-gray-500, .text-gray-600 { color: var(--text-muted) !important; }
.text-green-400, .text-green-300 { color: var(--green) !important; text-shadow: 0 0 6px var(--green-glow); }
.text-blue-400, .text-blue-300  { color: var(--green-dim) !important; }
.text-red-400,  .text-red-300   { color: var(--red-hack) !important; }

/* ── BG OVERRIDES ── */
.bg-gray-900, .bg-black { background: var(--black) !important; }
.bg-gray-800 { background: var(--black-soft) !important; }
.bg-gray-700 { background: var(--black-mid) !important; }

/* ── ICON COLORS ── */
.fa-key    { color: var(--green) !important; }
.fa-shield-alt, .fa-shield { color: var(--green) !important; }
.fa-user-shield { color: var(--green) !important; }
.fa-tachometer-alt { color: var(--green) !important; }

/* ── LOGIN / AUTH PAGES ── */
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── TERMINAL BOOT TEXT ── */
@keyframes typewriter {
  from { width: 0; }
  to   { width: 100%; }
}
.typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--green);
  animation: typewriter 2s steps(40) 0.5s both,
             blink 0.8s step-end infinite;
}

/* ── QR CODE (keep white bg for scan) ── */
.bg-white { background: #fff !important; }

/* ── CONFIRM MODAL ── */
#globalConfirmModal .bg-gray-800 {
  background: var(--black-soft) !important;
  border: 1px solid var(--green) !important;
  box-shadow: 0 0 30px var(--green-glow) !important;
}

/* ── PAGINATION ── */
[class*="pagination"] a, [class*="page"] a {
  color: var(--green) !important;
  border-color: var(--green-dark) !important;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  nav a { font-size: 0.7rem; }
  h1 { font-size: 1.4rem !important; }
}

/* ── SPECIAL: hex grid corner decorators ── */
.glass-card::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 20px; height: 20px;
  border-bottom: 2px solid var(--green);
  border-right: 2px solid var(--green);
  pointer-events: none;
}

/* ── FADE IN ANIMATION ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeInUp 0.5s ease forwards; }

/* ── SELECTION ── */
::selection {
  background: var(--green);
  color: var(--black);
}