/* backend/static/style.css
   Cyberpunk Neon theme + animated glow + terminal variant
   Drop-in replacement for your existing CSS
*/

/* Load fonts */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;800&family=Share+Tech+Mono&display=swap');

:root{
  --bg-1: #05050a;
  --bg-2: #0b0b17;
  --panel-bg: rgba(12,12,18,0.45);
  --glass-border: rgba(120,90,255,0.12);
  --neon-blue: #23e6f5;
  --neon-pink: #ff00c8;
  --neon-cyan: #00ffd5;
  --neon-green: #7bff7b;
  --neon-yellow: #ffd56b;
  --muted: rgba(255,255,255,0.18);
  --glass-radius: 14px;
  --glass-pad: 20px;
  --glass-blur: 10px;
  --accent: var(--neon-blue);
}

/* Base background & body */
*{box-sizing:border-box}
html,body{height:100%}
body{
  min-height:100%;
  margin:0;
  font-family: 'Orbitron', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:#dfefff;
  background:
    radial-gradient(800px 400px at 10% 10%, rgba(35,230,245,0.06), transparent 8%),
    radial-gradient(600px 300px at 90% 80%, rgba(255,0,200,0.04), transparent 12%),
    linear-gradient(135deg, var(--bg-2) 0%, var(--bg-1) 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-y:auto;
}

/* Subtle animated ambient glow (behind content) */
body::before{
  content:"";
  position:fixed;
  left: -10%;
  top:-20%;
  width:140%;
  height:140%;
  background:
    radial-gradient(40% 30% at 20% 20%, rgba(35,230,245,0.06), transparent 20%),
    radial-gradient(30% 20% at 80% 80%, rgba(255,0,200,0.05), transparent 20%);
  pointer-events:none;
  z-index:0;
  animation:ambientShift 10s linear infinite;
  mix-blend-mode: screen;
}
@keyframes ambientShift {
  0%{ transform: translateY(0) scale(1) }
  50%{ transform: translateY(6%) scale(1.02) }
  100%{ transform: translateY(0) scale(1) }
}

/* Container layout (matches your HTML) */
.container{
  width: calc(100% - 80px);
  max-width:1300px;
  margin: 36px auto;
  position:relative;
  z-index:2;
}

/* Page Title */
h1{
  font-size: 34px;
  margin: 8px 0 28px 0;
  color: #e8f9ff;
  letter-spacing: 0.6px;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.6),
    0 0 12px rgba(35,230,245,0.06);
}

/* Grid layout */
.grid{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 26px;
  align-items:start;
}

/* Panels (glass cards) */
.panel{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: var(--glass-radius);
  padding: var(--glass-pad);
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow:
    0 6px 18px rgba(0,0,0,0.7),
    0 0 24px rgba(35,230,245,0.02) inset;
  backdrop-filter: blur(var(--glass-blur));
  position:relative;
  overflow:hidden;
  transition: transform 220ms cubic-bezier(.2,.9,.3,1), box-shadow 220ms;
}

/* Decorative neon border pulse */
.panel::after{
  content:"";
  position:absolute;
  inset: -2px;
  border-radius: calc(var(--glass-radius) + 2px);
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0));
  pointer-events:none;
  box-shadow: 0 0 18px rgba(35,230,245,0.06), 0 0 40px rgba(255,0,200,0.02);
  mix-blend-mode: screen;
  transition: opacity 300ms;
}

/* Panel hover subtle lift */
.panel:hover{
  transform: translateY(-6px);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.75),
    0 0 40px rgba(35,230,245,0.06) inset;
}
.panel h2{ margin:0 0 12px 0; font-size:20px; color:#cfefff; }

/* Workers table styling */
table{ width:100%; border-collapse:collapse; font-size:15px; }
thead tr th{
  text-align:left;
  padding: 12px 10px;
  color: rgba(255,255,255,0.75);
  font-weight:600;
  letter-spacing:0.6px;
}
tbody tr{ border-top:1px solid rgba(255,255,255,0.03); }
tbody tr td{
  padding: 14px 10px;
  vertical-align: middle;
  color: rgba(220,240,255,0.92);
}

/* Row subtle separators */
tbody tr + tr td { border-top: 1px dashed rgba(255,255,255,0.02); }

/* Button base: neon outline style */
button{
  -webkit-appearance:none;
  appearance:none;
  border: 1px solid rgba(35,230,245,0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
  color: var(--neon-blue);
  padding: 6px 12px;
  border-radius: 8px;
  font-weight:600;
  cursor:pointer;
  margin-right:8px;
  transition:
    transform 160ms cubic-bezier(.2,.9,.3,1),
    box-shadow 160ms,
    background 160ms,
    color 160ms;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
  text-shadow: 0 0 6px rgba(35,230,245,0.06);
}

/* Neon hover/active interactions (futuristic) */
button:hover{
  transform: translateY(-4px);
  box-shadow:
    0 10px 30px rgba(0,0,0,0.75),
    0 0 14px rgba(35,230,245,0.24),
    0 0 40px rgba(255,0,200,0.06);
  background: linear-gradient(90deg, rgba(35,230,245,0.06), rgba(255,0,200,0.03));
  color:#001018;
}
button:active{ transform: translateY(-1px) scale(0.995); }

/* Disabled buttons */
button:disabled{
  opacity:0.35;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
  color: rgba(180,200,220,0.45);
}

/* Color-coded button variants (optional if you add classes) */
button.start{ border-color: rgba(120,255,120,0.25); color: var(--neon-green); }
button.stop{ border-color: rgba(255,60,100,0.23); color: #ff5a85; }
button.pause{ border-color: rgba(255,210,110,0.22); color: var(--neon-yellow); }
button.resume{ border-color: rgba(70,150,255,0.20); color: var(--neon-blue); }
button.delete{ border-color: rgba(255,0,200,0.22); color: var(--neon-pink); }

/* Neon pill badge status */
.status-running{
  color: var(--neon-green);
  font-weight:700;
  text-shadow: 0 0 12px rgba(123,255,123,0.14);
}
.status-paused{
  color: var(--neon-yellow);
  font-weight:700;
  text-shadow: 0 0 12px rgba(255,213,107,0.12);
}
.status-stopped{
  color: #ff5a85;
  font-weight:700;
  text-shadow: 0 0 10px rgba(255,60,100,0.10);
}

/* Form inputs */
input, textarea{
  width:100%;
  padding:10px 12px;
  border-radius:8px;
  border: 1px solid rgba(255,255,255,0.04);
  background: rgba(10,12,16,0.38);
  color: #cfefff;
  outline:none;
  transition: box-shadow 160ms, border 160ms;
}
input::placeholder, textarea::placeholder{ color: rgba(200,220,235,0.2); font-weight:500; }
input:focus, textarea:focus{
  box-shadow: 0 6px 18px rgba(35,230,245,0.06);
  border: 1px solid rgba(35,230,245,0.22);
}

/* Broadcast textarea */
textarea{ min-height:84px; resize:vertical; }

/* Logout & small controls */
.panel .small-btn{ padding:8px 14px; font-size:14px }

/* Title neon flicker (subtle) */
h1{
  animation: titleFlicker 5s linear infinite;
}
@keyframes titleFlicker{
  0%, 95%, 100%{ opacity:1; text-shadow: 0 0 12px rgba(35,230,245,0.08) }
  96%{ opacity:0.96; text-shadow: none }
}

/* footer area & spacing tweaks */
.side { display:flex; flex-direction:column; gap:16px; }
.panel .muted { color: rgba(200,220,230,0.35); font-size:13px }

/* grid/scanline overlays for cyberpunk feel */
.panel::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(transparent 70%, rgba(255,255,255,0.01) 71%),
    linear-gradient(90deg, rgba(255,255,255,0.01) 1px, transparent 1px);
  background-size: 100% 40px, 30px 100%;
  opacity:0.035;
  pointer-events:none;
}

/* Subtle animated top-right cypher glow (optional) */
.panel .cypher{
  position:absolute;
  right:-60px;
  top:-20px;
  width:200px;
  height:200px;
  background: conic-gradient(from 120deg, rgba(255,0,200,0.06), rgba(0,255,213,0.05));
  transform:rotate(20deg);
  filter: blur(24px);
  z-index:0;
  pointer-events:none;
}

/* Responsive */
@media (max-width:900px){
  .grid{ grid-template-columns: 1fr; }
  .container{ padding: 12px; width: calc(100% - 30px); }
}

/* ---------- Terminal / hacker mode (EXTREME) ----------
   Add class "terminal" to the <body> to flip to hacker theme.
   Eg: <body class="terminal"> ... </body>
--------------------------------------------------------*/
body.terminal{
  font-family: 'Share Tech Mono', monospace;
  color: #89ff89;
  background: #000;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.95), rgba(0,0,0,0.95)),
    repeating-linear-gradient(0deg, rgba(0,255,120,0.015) 0 1px, transparent 1px 4px);
}

/* Terminal panels: thin green border, matrix overlay */
body.terminal .panel{
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(0,255,120,0.12);
  box-shadow: 0 12px 40px rgba(0,0,0,0.9), 0 0 20px rgba(0,255,120,0.03) inset;
  backdrop-filter: none;
}
body.terminal h1{ color:#7aff7a; text-shadow: none; letter-spacing:1px; }
body.terminal button{
  color: #7aff7a;
  border-color: rgba(0,255,120,0.12);
  background: rgba(0,0,0,0.35);
  box-shadow: none;
}
body.terminal button:hover{
  background: rgba(0,255,120,0.06);
  box-shadow: 0 0 10px rgba(0,255,120,0.12);
}

/* Terminal flicker & scanline (CRT) */
body.terminal::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background-image: repeating-linear-gradient(rgba(0,255,120,0.02) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
  z-index:1;
}

/* Matrix style vertical bars */
@keyframes matrixFall {
  0%{transform:translateY(-100%)}
  100%{transform:translateY(100%)}
}
/* small decorative matrix elements */
.terminal .matrix {
  position:absolute; left:6px; top:8px; width:24px; height:120px; overflow:hidden; opacity:0.06;
}
.terminal .matrix span {
  display:block; color:#49ff49; font-size:12px; transform:translateY(-100%);
  animation: matrixFall 3s linear infinite;
}

/* small helper to toggle intense glow */
body.intense .panel::after{ opacity:1; filter: blur(14px); box-shadow: 0 0 50px rgba(35,230,245,0.18); }

/* utility spacing */
.mb-8{ margin-bottom:8px }
.mt-4{ margin-top:4px }

/* small: improve table readability on neon */
table thead th { border-bottom: 1px solid rgba(255,255,255,0.02); padding-bottom:10px; }

/* end of theme */