/*
 * DB NEURAL GATEWAY - Matrix Terminal Style
 * Inspired by github.com/Rezmason/matrix
 */

/* ===== CSS VARIABLES ===== */
:root {
  --void: #000000;
  --matrix-dark: #001a00;
  --matrix-mid: #003300;
  --matrix-bright: #00ff41;
  --matrix-glow: #39ff14;
  --matrix-dim: #008f11;
  --matrix-fade: #004d00;
  --cyan-accent: #00ffff;
  --white-flash: #ccffcc;
}

/* ===== NUCLEAR RESET - KILL ALL LIGHT BACKGROUNDS ===== */

html, body, div, section, article, main, header, footer, aside, nav,
form, fieldset, legend, label, input, button, textarea, select,
table, thead, tbody, tr, td, th, ul, ol, li, dl, dt, dd,
h1, h2, h3, h4, h5, h6, p, span, a, img, figure, figcaption {
  background-color: transparent !important;
  background-image: none !important;
}

html {
  background: var(--void) !important;
}

body {
  background: var(--void) !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  font-family: 'Courier New', 'Lucida Console', 'Monaco', monospace !important;
  color: var(--matrix-bright) !important;
  overflow: hidden !important;
}

/* Nuke ALL utility classes */
[class*="bg-"],
[class*="shadow"],
[class*="rounded"],
.bg-blue-100, .bg-white, .bg-gray-50, .bg-gray-100, .bg-gray-200,
.h-full, .min-h-full, .min-h-screen {
  background: transparent !important;
  box-shadow: none !important;
}

/* ===== MATRIX DIGITAL RAIN BACKGROUND ===== */

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    /* Vertical falling lines */
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 30px,
      rgba(0, 255, 65, 0.015) 30px,
      rgba(0, 255, 65, 0.015) 31px
    ),
    /* Horizontal scan lines */
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 2px,
      rgba(0, 20, 0, 0.3) 2px,
      rgba(0, 20, 0, 0.3) 4px
    ),
    /* Grid */
    linear-gradient(rgba(0,255,65,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,65,0.02) 1px, transparent 1px),
    /* Base gradient */
    radial-gradient(ellipse at 50% 0%, rgba(0,80,0,0.15) 0%, transparent 60%),
    var(--void);
  background-size: 31px 100%, 100% 4px, 80px 80px, 80px 80px, 100% 100%, 100% 100%;
  pointer-events: none;
  z-index: 0;
  animation: scanDown 8s linear infinite;
}

@keyframes scanDown {
  0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 0 100vh, 0 0, 0 80px, 0 80px, 0 0, 0 0; }
}

/* Vignette overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    transparent 40%,
    rgba(0,0,0,0.4) 70%,
    rgba(0,0,0,0.8) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* ===== LAYOUT ===== */

.app-page {
  position: relative !important;
  z-index: 10 !important;
  min-height: 100vh !important;
  height: 100vh !important;
  width: 100% !important;
  overflow: hidden !important;
}

.app-content {
  position: relative !important;
  z-index: 10 !important;
  height: 100vh !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.5rem !important;
  overflow: hidden !important;
}

.app-container {
  max-width: 400px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 0.5rem !important;
  position: relative !important;
  z-index: 10 !important;
}

/* ===== LOGO - GLOWING ===== */

.logo-box {
  text-align: center !important;
  margin-bottom: 1rem !important;
  padding: 0 !important;
}

.logo-img {
  width: 100px !important;
  height: 100px !important;
  margin: 0 auto 0.75rem !important;
  display: block !important;
  filter: 
    drop-shadow(0 0 20px var(--matrix-bright))
    drop-shadow(0 0 40px var(--matrix-glow))
    drop-shadow(0 0 80px rgba(0,255,65,0.5))
    drop-shadow(0 0 120px rgba(0,255,65,0.3)) !important;
  animation: logoGlow 3s ease-in-out infinite, logoFloat 6s ease-in-out infinite !important;
}

@keyframes logoGlow {
  0%, 100% {
    filter: 
      drop-shadow(0 0 20px var(--matrix-bright))
      drop-shadow(0 0 40px var(--matrix-glow))
      drop-shadow(0 0 80px rgba(0,255,65,0.5))
      drop-shadow(0 0 120px rgba(0,255,65,0.3));
  }
  50% {
    filter: 
      drop-shadow(0 0 30px var(--matrix-glow))
      drop-shadow(0 0 60px var(--matrix-bright))
      drop-shadow(0 0 100px rgba(0,255,65,0.6))
      drop-shadow(0 0 150px rgba(0,255,65,0.4));
  }
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ===== SIGN IN TITLE ===== */

.logo-txt, h2 {
  color: var(--matrix-bright) !important;
  font-family: 'Courier New', monospace !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.4em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  text-shadow: 
    0 0 10px var(--matrix-bright),
    0 0 20px var(--matrix-glow) !important;
  animation: textPulse 2s ease-in-out infinite, textFlicker 8s linear infinite !important;
}

@keyframes textPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

@keyframes textFlicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.7; }
  94% { opacity: 1; }
  97% { opacity: 0.9; }
  98% { opacity: 1; }
}

/* ===== FORM TERMINAL ===== */

/* Only style the outer container, not nested forms */
#loginform {
  background: rgba(0, 15, 0, 0.9) !important;
  border: 2px solid var(--matrix-fade) !important;
  border-radius: 0 !important;
  padding: 1.25rem !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 
    0 0 30px rgba(0,255,65,0.1),
    0 0 60px rgba(0,255,65,0.05),
    inset 0 0 60px rgba(0,255,65,0.03),
    inset 0 1px 0 rgba(0,255,65,0.1) !important;
  position: relative !important;
}

/* Inner form - no extra styling */
#loginform form,
#loginform .space-y-6 {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Terminal header bar effect - inside the box */
#loginform::before {
  content: '// AUTH';
  position: absolute !important;
  top: 8px !important;
  right: 10px !important;
  font-size: 0.55rem !important;
  color: var(--matrix-fade) !important;
  letter-spacing: 0.1em !important;
  font-family: 'Courier New', monospace !important;
}

/* Space between form children */
.space-y-6 > * + * {
  margin-top: 1rem !important;
}

/* ===== LABELS ===== */

label, .text-primary-700, .block.text-center {
  display: block !important;
  color: var(--matrix-dim) !important;
  font-size: 0.65rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  margin-bottom: 0.5rem !important;
  text-align: center !important;
  font-family: 'Courier New', monospace !important;
}

/* ===== INPUTS ===== */

.app-inp-box {
  position: relative !important;
  background: rgba(0, 10, 0, 0.95) !important;
  border: 1px solid var(--matrix-fade) !important;
  border-radius: 0 !important;
  transition: all 0.3s ease !important;
}

.app-inp-box:focus-within {
  border-color: var(--matrix-bright) !important;
  box-shadow: 
    0 0 20px rgba(0,255,65,0.3),
    inset 0 0 20px rgba(0,255,65,0.05) !important;
}

.app-inp-prf-img {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--matrix-fade) !important;
  font-size: 1.1rem !important;
  z-index: 2 !important;
  transition: all 0.3s !important;
  width: 20px !important;
  text-align: center !important;
}

.app-inp-box:focus-within .app-inp-prf-img {
  color: var(--matrix-bright) !important;
  text-shadow: 0 0 10px var(--matrix-glow) !important;
}

.app-inp-txt, input[type="text"], input[type="password"], input[type="email"] {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  color: var(--matrix-bright) !important;
  font-family: 'Courier New', monospace !important;
  font-size: 1rem !important;
  padding: 12px 12px 12px 40px !important;
  outline: none !important;
  caret-color: var(--matrix-bright) !important;
}

input::placeholder {
  color: var(--matrix-fade) !important;
}

/* Blinking cursor effect */
input:focus {
  animation: cursorBlink 1s step-end infinite !important;
}

@keyframes cursorBlink {
  50% { border-right: 2px solid var(--matrix-bright); }
}

/* ===== SUBMIT BUTTON ===== */

.app-btn-pri, button[type="submit"], button[type="button"] {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  background: var(--matrix-bright) !important;
  color: var(--void) !important;
  font-family: 'Courier New', monospace !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 12px 16px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 
    0 0 15px rgba(0,255,65,0.3),
    0 0 30px rgba(0,255,65,0.15) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Shine effect */
.app-btn-pri::before, button[type="submit"]::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent) !important;
  transition: left 0.5s !important;
}

.app-btn-pri:hover::before, button[type="submit"]:hover::before {
  left: 100% !important;
}

.app-btn-pri:hover, button[type="submit"]:hover, button[type="button"]:hover {
  background: var(--matrix-glow) !important;
  box-shadow: 
    0 0 40px rgba(57,255,20,0.6),
    0 0 80px rgba(57,255,20,0.4),
    0 0 120px rgba(57,255,20,0.2) !important;
  transform: translateY(-3px) !important;
}

.app-btn-pri:active, button:active {
  transform: translateY(0) !important;
}

.app-btn-pri svg, button svg {
  width: 20px !important;
  height: 20px !important;
}

/* ===== PORTAL PAGE ===== */

.logo-col-box {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.5rem !important;
  padding-bottom: 2rem !important;
  margin-bottom: 2rem !important;
  border-bottom: 1px solid var(--matrix-fade) !important;
}

.logo-col-box .logo-img {
  width: 60px !important;
  height: 60px !important;
  margin: 0 !important;
  animation: logoGlow 3s ease-in-out infinite !important;
}

.logo-col-txt {
  color: var(--matrix-bright) !important;
  font-size: 1.2rem !important;
  letter-spacing: 0.4em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 15px var(--matrix-glow) !important;
  font-family: 'Courier New', monospace !important;
}

.app-portal-btn-box {
  display: flex !important;
  align-items: center !important;
  gap: 1.25rem !important;
  background: rgba(0, 15, 0, 0.9) !important;
  border: 1px solid var(--matrix-fade) !important;
  border-radius: 0 !important;
  padding: 1.25rem !important;
  transition: all 0.3s ease !important;
}

.app-portal-btn-box:hover {
  border-color: var(--matrix-bright) !important;
  box-shadow: 0 0 30px rgba(0,255,65,0.2) !important;
  transform: translateX(8px) !important;
}

.app-portal-btn-img {
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,255,65,0.1) !important;
  border: 1px solid var(--matrix-fade) !important;
  color: var(--matrix-bright) !important;
  font-size: 1.3rem !important;
  transition: all 0.3s !important;
}

.app-portal-btn-box:hover .app-portal-btn-img {
  background: var(--matrix-bright) !important;
  color: var(--void) !important;
  box-shadow: 0 0 20px var(--matrix-glow) !important;
}

.app-portal-btn-txt, .app-portal-btn-txt span {
  color: var(--matrix-bright) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  font-family: 'Courier New', monospace !important;
  letter-spacing: 0.1em !important;
}

/* ===== LINKS ===== */

a {
  color: var(--matrix-bright) !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
  font-family: 'Courier New', monospace !important;
}

a:hover {
  color: var(--matrix-glow) !important;
  text-shadow: 0 0 15px var(--matrix-glow) !important;
}

/* ===== CODE/PRE ===== */

pre {
  background: rgba(0, 10, 0, 0.95) !important;
  border: 1px solid var(--matrix-fade) !important;
  padding: 1.5rem !important;
  overflow-x: auto !important;
  margin: 1rem 0 !important;
}

code, .hljs {
  font-family: 'Courier New', monospace !important;
  font-size: 0.85rem !important;
  line-height: 1.6 !important;
  color: var(--matrix-bright) !important;
}

.hljs-string { color: #00ff41 !important; }
.hljs-number { color: #39ff14 !important; }
.hljs-attr { color: #00ff88 !important; }
.hljs-literal { color: #00ffaa !important; }

/* ===== ALERTS ===== */

.toast, .toast-error, .alert, .app-txt-section {
  background: rgba(80, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 50, 50, 0.5) !important;
  color: #ff4444 !important;
  padding: 1.25rem !important;
  margin-bottom: 1.5rem !important;
  text-align: center !important;
  font-family: 'Courier New', monospace !important;
  text-shadow: 0 0 10px rgba(255,0,0,0.5) !important;
}

.app-txt-section p {
  margin: 0.5rem 0 !important;
  color: #ff6666 !important;
}

/* ===== QR CODE FEATURE ===== */

/* QR button - always visible (override hidden sm:block) */
#bookmarks {
  position: fixed !important;
  bottom: 1rem !important;
  right: 1rem !important;
  z-index: 1000 !important;
  padding: 0 !important;
  display: block !important; /* Force show - override hidden class */
}

#bookmarks > div {
  background: rgba(0, 20, 0, 0.95) !important;
  border: 1px solid var(--matrix-fade) !important;
  color: var(--matrix-bright) !important;
  padding: 0.75rem !important;
  cursor: pointer !important;
  transition: all 0.3s !important;
  border-radius: 4px !important;
  max-width: none !important;
  width: auto !important;
}

#bookmarks > div:hover {
  border-color: var(--matrix-bright) !important;
  box-shadow: 0 0 25px rgba(0,255,65,0.4) !important;
  transform: scale(1.05) !important;
}

#bookmarks i {
  color: var(--matrix-bright) !important;
  text-shadow: 0 0 10px var(--matrix-glow) !important;
  font-size: 1.5rem !important;
}

/* QR code display container */
#qr {
  position: fixed !important;
  bottom: 5rem !important;
  right: 1.5rem !important;
  z-index: 100 !important;
  padding: 0 !important;
  justify-content: flex-end !important;
}

/* Respect hidden class */
#qr.hidden {
  display: none !important;
}

#qr:not(.hidden) {
  display: flex !important;
}

#qrcode {
  background: #ffffff !important;
  border: 2px solid var(--matrix-bright) !important;
  box-shadow: 0 0 40px rgba(0,255,65,0.5) !important;
  padding: 0.75rem !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  max-width: 200px !important;
}

#qrcode img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* Prevent duplicate images - only show last one */
#qrcode img:not(:last-child) {
  display: none !important;
}

/* ===== UTILITIES ===== */

/* Hidden class - but don't apply to QR elements (handled above) */
.hidden:not(#bookmarks):not(#qr) {
  display: none !important;
}

.grow { flex-grow: 1 !important; }
.pl-2 { padding-left: 0.5rem !important; }

/* ===== PAGE LOAD ANIMATION ===== */

@keyframes terminalBoot {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

.app-container {
  animation: terminalBoot 0.6s ease-out !important;
}

/* ===== SCROLLBAR ===== */

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { 
  background: var(--matrix-fade); 
  border: 1px solid var(--matrix-dim);
}
::-webkit-scrollbar-thumb:hover { background: var(--matrix-dim); }

/* ===== RESPONSIVE ===== */

/* Tablet */
@media (max-width: 768px) {
  .app-container {
    max-width: 90% !important;
    padding: 2rem 1.5rem !important;
  }
  
  .logo-img {
    width: 160px !important;
    height: 160px !important;
  }
  
  .logo-txt, h2 {
    font-size: 1.6rem !important;
    letter-spacing: 0.6em !important;
  }
}

/* Large phones */
@media (max-width: 600px) {
  .app-container {
    max-width: 100% !important;
    padding: 1.5rem 1rem !important;
  }
  
  .logo-box {
    margin-bottom: 2rem !important;
  }
  
  .logo-img {
    width: 130px !important;
    height: 130px !important;
    margin-bottom: 1.5rem !important;
  }
  
  .logo-txt, h2 {
    font-size: 1.3rem !important;
    letter-spacing: 0.4em !important;
  }
  
  #loginform {
    padding: 1.5rem 1rem !important;
  }
  
  #loginform::before {
    font-size: 0.55rem !important;
    top: -18px !important;
  }
  
  label, .text-primary-700 {
    font-size: 0.65rem !important;
    margin-bottom: 1rem !important;
  }
  
  .app-inp-txt, input[type="text"], input[type="password"], input[type="email"] {
    font-size: 1rem !important;
    padding: 16px 16px 16px 46px !important;
  }
  
  .app-btn-pri, button[type="submit"], button[type="button"] {
    font-size: 0.9rem !important;
    padding: 16px 20px !important;
  }
}

/* Small phones */
@media (max-width: 400px) {
  .app-container {
    padding: 1rem 0.75rem !important;
  }
  
  .logo-img {
    width: 100px !important;
    height: 100px !important;
    margin-bottom: 1rem !important;
  }
  
  .logo-txt, h2 {
    font-size: 1rem !important;
    letter-spacing: 0.3em !important;
  }
  
  #loginform {
    padding: 1.25rem 0.75rem !important;
  }
  
  .app-inp-prf-img {
    left: 12px !important;
    font-size: 1rem !important;
  }
  
  .app-inp-txt, input[type="text"], input[type="password"], input[type="email"] {
    padding: 14px 14px 14px 40px !important;
  }
}

/* Prevent zoom on input focus (iOS) */
@media (max-width: 768px) {
  input[type="text"], input[type="password"], input[type="email"] {
    font-size: 16px !important; /* Prevents iOS zoom */
  }
}

/* Touch-friendly targets */
@media (hover: none) and (pointer: coarse) {
  .app-btn-pri, button[type="submit"], button[type="button"] {
    min-height: 48px !important; /* Touch target size */
  }
  
  .app-inp-box {
    min-height: 52px !important;
  }
  
  .app-portal-btn-box {
    min-height: 56px !important;
    padding: 1rem !important;
  }
}

/* Safe area for notched phones */
@supports (padding: max(0px)) {
  .app-container {
    padding-left: max(1rem, env(safe-area-inset-left)) !important;
    padding-right: max(1rem, env(safe-area-inset-right)) !important;
    padding-bottom: max(2rem, env(safe-area-inset-bottom)) !important;
  }
}

/* Landscape mode on phones */
@media (max-height: 500px) and (orientation: landscape) {
  .logo-img {
    width: 80px !important;
    height: 80px !important;
    margin-bottom: 0.75rem !important;
  }
  
  .logo-box {
    margin-bottom: 1rem !important;
  }
  
  .logo-txt, h2 {
    font-size: 1rem !important;
  }
  
  #loginform {
    padding: 1rem !important;
    margin-top: 1rem !important;
  }
  
  #loginform::before {
    top: -16px !important;
  }
  
  .app-content {
    padding: 0.5rem !important;
  }
  
  .space-y-6 > * + * {
    margin-top: 0.75rem !important;
  }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}