/* ==========================================================================
   DefenderGuard AI — Holographic Glass-Blue Theme
   ========================================================================== */
:root{
  --dg-void:        #050b16;
  --dg-void-2:       #081326;
  --dg-panel:        rgba(13, 27, 51, 0.28);
  --dg-panel-solid:  #0b1930;
  --dg-border:       rgba(90, 190, 255, 0.22);
  --dg-border-bright:rgba(120, 210, 255, 0.55);
  --dg-cyan:         #4fd8ff;
  --dg-cyan-2:       #7ee8ff;
  --dg-blue:         #3f7bff;
  --dg-violet:       #7c6bff;
  --dg-ok:           #35e6a0;
  --dg-warn:         #ffcf4d;
  --dg-crit:         #ff5470;
  --dg-info:         #4fd8ff;
  --dg-text:         #eaf6ff;
  --dg-text-dim:     #93b3d1;
  --dg-text-faint:   #5c7899;
  --dg-font-display: 'Orbitron', 'Rajdhani', sans-serif;
  --dg-font-body:    'Rajdhani', 'Segoe UI', sans-serif;
  --dg-font-mono:    'Share Tech Mono', 'Consolas', monospace;
  --dg-radius:       14px;
  --dg-glow:         0 0 24px rgba(79, 216, 255, 0.25);
}

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

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:
    radial-gradient(1200px 800px at 15% -10%, rgba(63,123,255,0.16), transparent 60%),
    radial-gradient(1000px 700px at 110% 10%, rgba(124,107,255,0.12), transparent 55%),
    linear-gradient(180deg, var(--dg-void) 0%, var(--dg-void-2) 100%);
  color:var(--dg-text);
  font-family:var(--dg-font-body);
  font-size:15px;
  min-height:100%;
  position:relative;
  overflow-x:hidden;
}

/* animated hex-grid backdrop */
body::before{
  content:"";
  position:fixed; inset:-260px;
  background-image:
    linear-gradient(rgba(79,216,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,216,255,0.05) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image: radial-gradient(1200px 800px at 50% 0%, black, transparent 75%);
  pointer-events:none;
  z-index:0;
  will-change: transform;
  animation: dg-grid-drift 40s linear infinite;
}
@keyframes dg-grid-drift{
  0%{transform:translate3d(0,0,0);}
  100%{transform:translate3d(120px,240px,0);}
}

h1,h2,h3,h4{
  font-family:var(--dg-font-display);
  letter-spacing:.04em;
  margin:0;
  font-weight:700;
}
small{color:var(--dg-text-dim); font-size:12px; letter-spacing:.03em;}
a{color:var(--dg-cyan); text-decoration:none;}

/* ---------------- Glass panel primitive ---------------- */
.glass{
  background:var(--dg-panel);
  border:1px solid var(--dg-border);
  border-radius:var(--dg-radius);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: var(--dg-glow), inset 0 1px 0 rgba(255,255,255,0.04);
  position:relative;
}
.glass::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg, rgba(120,210,255,0.35), rgba(124,107,255,0.05) 40%, transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}

/* ---------------- Brand ---------------- */
.brand{display:flex; align-items:center; gap:14px;}
.brand.compact{gap:10px;}
.brand h1{font-size:19px; color:var(--dg-text); text-transform:uppercase;}
.brand h1 span{color:var(--dg-cyan); text-shadow:0 0 14px rgba(79,216,255,0.7);}
.brand-logo{
  width:42px; height:42px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--dg-font-display); font-weight:900; font-size:15px;
  background:linear-gradient(145deg, rgba(79,216,255,0.25), rgba(124,107,255,0.15));
  border:1px solid var(--dg-border-bright);
  box-shadow:0 0 22px rgba(79,216,255,0.45), inset 0 0 10px rgba(79,216,255,0.25);
  color:var(--dg-cyan-2);
}

/* ---------------- Buttons / inputs ---------------- */
button, .btn{
  font-family:var(--dg-font-body); font-weight:600; letter-spacing:.03em;
  color:var(--dg-text); background:rgba(79,216,255,0.08);
  border:1px solid var(--dg-border-bright); border-radius:9px;
  padding:9px 16px; cursor:pointer; transition:.15s ease;
}
button:hover, .btn:hover{
  background:rgba(79,216,255,0.18);
  box-shadow:0 0 16px rgba(79,216,255,0.35);
  transform:translateY(-1px);
}
button.primary{
  background:linear-gradient(135deg, rgba(79,216,255,0.35), rgba(63,123,255,0.35));
}
button.danger{ border-color:rgba(255,84,112,0.6); color:#ffb9c4; }
button.danger:hover{ background:rgba(255,84,112,0.18); box-shadow:0 0 16px rgba(255,84,112,0.35);}
button:disabled{opacity:.45; cursor:not-allowed; transform:none;}

input, select, textarea{
  font-family:var(--dg-font-body); font-size:14px;
  background:rgba(6,16,32,0.65); color:var(--dg-text);
  border:1px solid var(--dg-border); border-radius:8px;
  padding:10px 12px; outline:none; transition:.15s;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--dg-border-bright);
  box-shadow:0 0 12px rgba(79,216,255,0.3);
}
input::placeholder{color:var(--dg-text-faint);}

/* ---------------- Status pills ---------------- */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
}
.pill.ok{color:var(--dg-ok); background:rgba(53,230,160,0.12); border:1px solid rgba(53,230,160,0.4);}
.pill.warn{color:var(--dg-warn); background:rgba(255,207,77,0.12); border:1px solid rgba(255,207,77,0.4);}
.pill.crit{color:var(--dg-crit); background:rgba(255,84,112,0.12); border:1px solid rgba(255,84,112,0.4);}
.pill.info{color:var(--dg-cyan); background:rgba(79,216,255,0.12); border:1px solid rgba(79,216,255,0.4);}
.pill.dim{color:var(--dg-text-dim); background:rgba(147,179,209,0.08); border:1px solid rgba(147,179,209,0.25);}

.ok{color:var(--dg-ok);} .warn{color:var(--dg-warn);} .crit{color:var(--dg-crit);}

/* dot indicator with pulse */
.dot{width:8px; height:8px; border-radius:50%; display:inline-block; position:relative;}
.dot.ok{background:var(--dg-ok); box-shadow:0 0 8px var(--dg-ok);}
.dot.crit{background:var(--dg-crit); box-shadow:0 0 8px var(--dg-crit);}
.dot.ok::after, .dot.crit::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid currentColor; animation:dg-pulse 1.8s ease-out infinite;
}
@keyframes dg-pulse{
  0%{transform:scale(0.6); opacity:.9;}
  100%{transform:scale(2.2); opacity:0;}
}

/* ---------------- Tables ---------------- */
table{width:100%; border-collapse:collapse; font-size:13.5px;}
thead th{
  text-align:left; color:var(--dg-text-dim); font-weight:600; font-size:11px;
  text-transform:uppercase; letter-spacing:.06em; padding:10px 12px;
  border-bottom:1px solid var(--dg-border);
}
tbody td{padding:11px 12px; border-bottom:1px solid rgba(90,190,255,0.08);}
tbody tr{transition:background .15s;}
tbody tr:hover{background:rgba(79,216,255,0.05);}

/* ---------------- Scrollbars ---------------- */
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(79,216,255,0.25); border-radius:8px;}
::-webkit-scrollbar-thumb:hover{background:rgba(79,216,255,0.45);}

/* ---------------- Login / admin card shells ---------------- */
.admin-login{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  position:relative; z-index:1;
}
.admin-card{
  width:min(420px, 100%); padding:34px; display:flex; flex-direction:column; gap:18px;
}
.admin-card p{color:var(--dg-text-dim); font-size:13.5px; line-height:1.5; margin:0;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.err-msg{color:var(--dg-crit); font-size:13px; min-height:16px;}