/* /frontend/static/css/style.css */
/* Supplemental style layer for Neural Health Link (Mock Edition)
   Base theme: Sci-Fi translucent UI (see inline CSS in base.html)
*/

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #0b0f18;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #7df9ff55, #a78bfa55);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #7df9ff, #a78bfa);
}

/* Links */
a {
  color: #7df9ff;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Tables */
table {
  border-spacing: 0;
  border-collapse: collapse;
}
th, td {
  border-bottom: 1px solid #ffffff14;
}
th {
  background: #111a2d;
  font-weight: 600;
  color: #7df9ff;
}
tr:nth-child(even) {
  background-color: #0e1628;
}
tr:hover {
  background-color: #13203a;
}

/* Inputs and dropdowns */
input, select, textarea {
  font-family: 'Outfit', sans-serif;
  background: #0d1525aa;
  border: 1px solid #ffffff22;
  border-radius: 10px;
  color: #e6eef8;
  padding: 8px 12px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, select:focus, textarea:focus {
  border-color: #7df9ff88;
  box-shadow: 0 0 8px #7df9ff44;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #7df9ff44;
  color: #e6eef8;
  background: linear-gradient(180deg, #0e1a2faa, #0c172aaa);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.06s ease, box-shadow 0.2s;
  box-shadow: 0 0 0 0 rgba(125,249,255,0);
}
.btn:hover {
  box-shadow: 0 0 18px 2px rgba(125,249,255,0.18);
}
.btn:active {
  transform: translateY(1px);
}

/* Card / panel shadows */
.card, .panel {
  box-shadow: 0 0 20px rgba(0,0,0,.3), inset 0 0 1px #ffffff11;
}

/* Text utilities */
.text-center { text-align: center; }
.text-muted { color: #99a3b7; }
.text-neon { color: #7df9ff; }

/* Fade-in animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in {
  animation: fadeIn 0.6s ease both;
}

/* Chart canvas */
canvas {
  background: linear-gradient(180deg, #0f1725aa, #0c1322aa);
  border: 1px solid #ffffff11;
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

/* Footer tweaks for small screens */
@media (max-width:700px){
  footer{flex-direction:column; text-align:center;}
}