h1, h2, h3, h4, h5, h6 {
  font-family: var(--header-font);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1.5rem;
}

/* Neon Text Effect */
.neon-text {
  color: var(--neon-blue);
}

.neon-text-pink {
  color: var(--neon-pink);
}

.neon-text-purple {
  color: var(--neon-purple);
}
.neuro-auth-app {
  margin-bottom: 30px;
}
/* Header Neon Effects */
h1.neon-text, h2.neon-text, h3.neon-text, h4.neon-text, h5.neon-text, h6.neon-text {
  text-shadow: 
    0 0 5px var(--neon-blue),
    0 0 10px var(--neon-blue),
    0 0 20px var(--neon-blue);
  color: white;
}

h1.neon-text-pink, h2.neon-text-pink, h3.neon-text-pink, h4.neon-text-pink, h5.neon-text-pink, h6.neon-text-pink {
  text-shadow: 
    0 0 5px var(--neon-pink),
    0 0 10px var(--neon-pink),
    0 0 20px var(--neon-pink);
  color: white;
}

h1.neon-text-purple, h2.neon-text-purple, h3.neon-text-purple, h4.neon-text-purple, h5.neon-text-purple, h6.neon-text-purple {
  text-shadow: 
    0 0 5px var(--neon-purple),
    0 0 10px var(--neon-purple),
    0 0 20px var(--neon-purple);
  color: white;
}

/* Navbar Styling */
.navbar {
  background-color: var(--darker-bg) !important;
  box-shadow: 0 2px 15px rgba(0, 255, 255, 0.2);
  padding: 1rem 2rem;
  border-bottom: 2px solid var(--neon-blue);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.navbar-brand {
  font-family: var(--header-font);
  color: white !important;
  font-weight: bold;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-shadow: 
    0 0 5px var(--neon-blue),
    0 0 10px var(--neon-blue),
    0 0 20px var(--neon-blue);
  margin-right: 1rem;
}

.navbar-brand:hover {
  color: var(--neon-blue) !important;
  text-shadow: 
    0 0 8px var(--neon-blue),
    0 0 15px var(--neon-blue),
    0 0 25px var(--neon-blue);
  transition: all 0.3s ease;
}

.navbar-nav .nav-link {
  color: white !important;
  font-weight: 500;
  margin: 0 10px;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.navbar-nav .nav-link:hover {
  color: var(--neon-pink) !important;
  text-shadow: 0 0 8px var(--neon-pink);
}

/* Custom Button Styles */
.btn-retro {
  background: transparent;
  border: 2px solid var(--neon-blue);
  color: white;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  padding: 0.5rem 1.5rem;
  border-radius: 0;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: all 0.3s ease;
}

.btn-retro::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.3), transparent);
  transition: all 0.5s ease;
  z-index: -1;
}

.btn-retro:hover {
  color: white;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
}

.btn-retro:hover::before {
  left: 100%;
}

.btn-retro-primary {
  border-color: var(--neon-blue);
}

.btn-retro-primary:hover {
  background-color: rgba(0, 255, 255, 0.2);
}

.btn-retro-danger {
  border-color: var(--neon-pink);
}

.btn-retro-danger:hover {
  background-color: rgba(255, 0, 255, 0.2);
}

.btn-retro-success {
  border-color: var(--neon-green);
}

.btn-retro-success:hover {
  background-color: rgba(0, 255, 159, 0.2);
}

/* Card Styling */
.card {
  background-color: rgba(11, 11, 26, 0.7);
  border: 1px solid var(--neon-purple);
  border-radius: 0;
  box-shadow: 0 0 15px rgba(185, 103, 255, 0.3);
  transition: all 0.3s ease;
  margin-bottom: 2rem;
}

.card:hover {
  box-shadow: 0 0 25px rgba(185, 103, 255, 0.5);
}

/* Home page container cards */
.home-container-card {
  background-color: rgba(11, 11, 26, 0.7);
  border: 1px solid var(--neon-purple);
  border-radius: 0;
  box-shadow: 0 0 15px rgba(185, 103, 255, 0.3);
  transition: all 0.3s ease;
  /* 
  margin-bottom: 2rem;
  */
}

.home-container-card:hover {
  box-shadow: 0 0 25px rgba(185, 103, 255, 0.5);
  /*transform: translateY(-5px);*/
}

.card-title {
  color: var(--neon-blue);
  font-family: var(--header-font);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.card-body {
  padding: 2rem;
}

/* Home Page Styling */
.home-hero {
  padding: 2rem 0;
  background: transparent;
  text-align: center;
  border: 2px solid var(--neon-purple);
  border-radius: 8px;
  margin: 0 1rem;
  background: rgba(11, 11, 26, 0.3);
}

.home-hero-text {
  margin: 0;
}

/* Home Feature Cards */
.home-feature-card {
  background-color: rgba(11, 11, 26, 0.7);
  border: 1px solid var(--neon-purple);
  border-radius: 0;
  box-shadow: 0 0 15px rgba(185, 103, 255, 0.3);
  transition: all 0.3s ease;
}

.home-feature-card:hover {
  box-shadow: 0 0 25px rgba(185, 103, 255, 0.5);
  transform: translateY(-5px);
}

/* Perlin Circle Visualizer */
.perlin-circle {
  position: relative;
  width: 100%;
  height: 100vh;
  /*
  max-height: 75dvh;
  overflow: hidden;
  */
  background-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  /*margin-top: -40px;*/
}

.perlin-circle .canvas-container {
  position: relative;
  width: 100%;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  overflow: hidden;
  margin: 0;
  padding: 0;
  min-height: 500px !important;
}

.perlin-circle .canvas-container canvas {
  display: block;
  z-index: 3;
  width: 100% !important;
  height: 100% !important;
}

.perlin-circle .controls-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0;
 /* margin-top: -60px; *//* Move controls up */
}

.perlin-circle .controls {
  padding: 20px;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  width: 100%;
  max-width: 400px;
}

.perlin-circle .control-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.perlin-circle .control-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.perlin-circle .control-label {
  text-align: right;
  font-size: 0.9em;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 1px;
  min-width: 100px;
}

.perlin-circle .control-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.perlin-circle .control-checkbox {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}

.perlin-circle .control-checkbox:checked {
  background-color: var(--neon-purple);
  border-color: var(--neon-purple);
}

.perlin-circle .control-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.perlin-circle .control-checkbox:hover {
  border-color: rgba(255, 255, 255, 0.4);
}

.perlin-circle .control-slider {
  flex: 1;
  max-width: 400px;
}

.perlin-circle .recalibrate-btn {
  margin-top: 15px;
  padding: 8px 12px;
  width: 100%;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.8em;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: all 0.2s ease;
}

.perlin-circle .recalibrate-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

.perlin-circle .control-slider:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Mobile adjustments for Perlin Circle */
@media (max-width: 768px) {
  .perlin-circle .controls {
    max-width: 100%;
    margin: 0;
  }
  
  .perlin-circle .control-label {
    min-width: 90px;
    font-size: 0.8em;
  }

  .perlin-circle .control-slider {
    max-width: none;
  }
}

/* Animation Classes */
.glow-enter {
  /*animation: glow-enter 1s ease-out forwards;*/
}

@keyframes glow-enter {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Profile Styling */
pre {
  background-color: rgba(5, 5, 20, 0.8) !important;
  border: 1px solid var(--neon-pink);
  border-radius: 0;
  color: var(--neon-green);
  font-family: monospace;
  font-size: 0.9rem;
}

.text-muted {
  color: var(--neon-blue) !important;
  opacity: 0.8;
}

/* Login Page Styling */
.okta-sign-in-container {
  margin-top: 2rem;
}

/* Custom Retro Line Separator */
.retro-separator {
  height: 4px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    var(--neon-pink) 20%, 
    var(--neon-blue) 50%, 
    var(--neon-purple) 80%, 
    transparent 100%);
  margin: 2rem 0;
  position: relative;
}

.retro-separator::before {
  content: "";
  position: absolute;
  height: 1px;
  /*width: 100%;*/
  background: white;
  top: 2px;
  opacity: 0.3;
}

/* Animations for page transitions */
.page-transition {
  animation: fadeIn 0.25s ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Media Queries */
@media (max-width: 768px) {
  .display-4 {
    font-size: 2rem;
  }
}

/* Mobile Optimizations */
@media (max-width: 991.98px) {
  .navbar {
    padding: 0.5rem 1rem;
  }

  .navbar-brand {
    font-size: 1.25rem;
    margin-right: 0;
  }

  .navbar-toggler {
    padding: 0.5rem;
    border: 1px solid var(--neon-blue);
    border-radius: 4px;
    margin-left: auto;
    display: block;
  }

  .navbar-toggler:focus {
    box-shadow: 0 0 0 0.25rem rgba(0, 255, 255, 0.25);
  }

  .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 255, 255, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }

  /* Offcanvas Styles */
  .offcanvas {
    background-color: var(--darker-bg);
    border-left: 2px solid var(--neon-blue);
    box-shadow: -2px 0 15px rgba(0, 255, 255, 0.2);
  }

  .offcanvas-header {
    border-bottom: 1px solid var(--neon-blue);
    padding: 1rem;
  }

  .offcanvas-title {
    font-family: var(--header-font);
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 2px;
  }

  .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
  }

  .offcanvas-body {
    padding: 1rem;
  }

  .navbar-nav .nav-link {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(0, 255, 255, 0.2);
    color: white !important;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .navbar-nav .nav-link:last-child {
    border-bottom: none;
  }

  .navbar-nav .nav-link:hover {
    color: var(--neon-pink) !important;
    text-shadow: 0 0 8px var(--neon-pink);
  }

  .d-flex {
    width: 100%;
  }

  .btn-retro {
    width: 100%;
    /*margin-top: 0.5rem;*/
  }
}

div.mfa-button {
  margin-bottom:10px;
}
.mfa-totp-textfield {
  color: inherit;
  border: none;
  background: inherit;
}

/* Table Styling */
.table {
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.table-dark {
  background-color: rgba(11, 11, 26, 0.7);
}

.table-dark th {
  background-color: rgba(0, 255, 255, 0.1);
  border-bottom: 2px solid var(--neon-blue);
  padding: 1rem;
  font-family: var(--header-font);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9rem;
}

.table-dark td {
  padding: 1rem;
  border-bottom: 1px solid rgba(0, 255, 255, 0.2);
  vertical-align: middle;
}

.table-dark tr:last-child td {
  border-bottom: none;
}

.table-dark tbody tr:hover {
  background-color: rgba(0, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.table-responsive {
  border: 1px solid var(--neon-purple);
  box-shadow: 0 0 15px rgba(185, 103, 255, 0.3);
}

/* Form Styling */
.form-control {
  border: 1px solid var(--neon-blue);
  background-color: rgba(11, 11, 26, 0.7) !important;
  color: white !important;
  font-family: var(--body-font);
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.form-control:focus {
  border-color: var(--neon-pink);
  box-shadow: 0 0 10px rgba(255, 0, 255, 0.3);
  background-color: rgba(11, 11, 26, 0.9) !important;
}

.form-control::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.form-group label {
  font-family: var(--header-font);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: white;
}

/* Settings Page Styling */
.settings-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 76px); /* Full viewport height minus navbar */
  width: 100%;
  overflow: hidden; /* Hide outer scrollbar */
}

.settings-container .card {
  flex: 1;
  margin: 0;
  background-color: transparent;
  border: none;
  box-shadow: none;
  overflow: hidden; /* Hide card scrollbar */
}

.settings-container .card-body {
  height: 100%;
  padding: 0;
  overflow: hidden; /* Hide card-body scrollbar */
}

.settings-container .retro-iframe-container {
  height: 100%;
  margin: 0;
  border: none;
  box-shadow: none;
  overflow: hidden; /* Hide container scrollbar */
}

.settings-container .retro-iframe {
  height: 100%;
  width: 100%;
  border: none;
  overflow: auto; /* Allow iframe to scroll */
}

/* Mobile adjustments for settings container */
@media (max-width: 991.98px) {
  .settings-container {
    height: calc(100vh - 60px); /* Adjusted for mobile navbar */
  }
}

/* Iframe Styling */
.retro-iframe-container {
  position: relative;
  width: 100%;
  height: 600px;
  border: 2px solid var(--neon-blue);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
  overflow: hidden;
  background-color: rgba(11, 11, 26, 0.7);
}

.retro-iframe {
  width: 100%;
  height: 100%;
  border: none;
  background-color: rgba(11, 11, 26, 0.7);
}

@media (max-width: 768px) {
  .retro-iframe-container {
    height: 400px;
  }
}

/* Settings page body style */
body.settings-page-active {
  overflow: hidden;
}

/* Home Page Styling */
.home-jumbotron {
  margin-bottom:0;
  padding-bottom:0;
}
.home-welcome-text {
  margin-bottom:0 !important;
}
.home-jumbotron .glow-enter {
  /*margin: -1rem;*/
}