/* SENTINEL — Shared CSS */

:root, [data-theme="dark"] {
  --bg:#0a1430; --surface:#0e1a3a; --surface2:#142244; --surface3:#1a2a52;
  --border:#1f3060; --border2:#2a3f78;
  --accent:#00f5c4; --accent2:#ff3b5c; --accent3:#4d7cff; --accent4:#ff8c00;
  --text:#c8d8f0; --text-strong:#e8f0ff; --muted:#4a5a78; --muted2:#6a7a98;
  --grid-line:rgba(0,245,196,0.025); --scan-opacity:0.35;
  --header-bg:rgba(5,8,16,0.95); --orb-opacity:0.08;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

body{
  background:var(--bg); color:var(--text);
  font-family:'Barlow',sans-serif; font-weight:300;
  min-height:100vh; overflow-x:hidden;
}

.mono{font-family:'Share Tech Mono',monospace;}

body::before{
  content:''; position:fixed; inset:0;
  background-image:
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:36px 36px; pointer-events:none; z-index:0;
}
body::after{
  content:''; position:fixed; inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.12) 2px,rgba(0,0,0,0.12) 4px);
  pointer-events:none; z-index:999; opacity:var(--scan-opacity);
}

.orb{
  position:fixed; border-radius:50%; filter:blur(100px);
  opacity:var(--orb-opacity); pointer-events:none;
  animation:orbPulse 10s ease-in-out infinite;
}
.orb-1{width:500px;height:500px;background:var(--accent3);top:-150px;right:-100px;}
.orb-2{width:350px;height:350px;background:var(--accent);bottom:-80px;left:-80px;animation-delay:4s;}
@keyframes orbPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

.dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent); animation:blink 1.5s ease-in-out infinite;
  box-shadow:0 0 8px var(--accent); flex-shrink:0;
}
.dot.red{background:var(--accent2);box-shadow:0 0 8px var(--accent2);}
.dot.inline{display:inline-block;margin-right:6px;vertical-align:middle;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}

/* ── HEADER ── */
/* ── TOP BAR: SENTINEL + clock ── */
.top-bar{
  position:relative; z-index:101;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px; height:50px;
  background:#06102a;
  border-bottom:1px solid #1a2540;
  backdrop-filter:blur(12px);
}

/* ── BACK TO MAIN MENU button (works on every shared.css page) ── */
.back-menu{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Share Tech Mono',monospace;
  font-size:0.6rem; letter-spacing:2px; text-transform:uppercase;
  color:#7a90c0; text-decoration:none;
  padding:6px 12px; margin-right:18px;
  border:1px solid #243050; border-radius:6px;
  background:rgba(0,245,196,0.04);
  transition:all .15s ease;
  white-space:nowrap;
}
.back-menu:hover{
  color:var(--accent);
  border-color:var(--accent);
  background:rgba(0,245,196,0.08);
  text-shadow:0 0 8px rgba(0,245,196,0.4);
}
.logo{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.5rem; letter-spacing:6px;
  color:#00f5c4; text-shadow:0 0 30px rgba(0,245,196,0.4);
  white-space:nowrap; user-select:none;
}
#clock{
  font-family:'Share Tech Mono',monospace;
  font-size:0.64rem; color:#4a5a78; white-space:nowrap; letter-spacing:1px;
}

/* ── NAV BAR ── */
.nav-bar{
  position:relative; z-index:100;
  display:flex !important;
  justify-content:center !important;
  align-items:stretch;
  width:100%;
  background:#060c1a;
  border-bottom:1px solid #243050;
  /* flair: glow line along the bottom */
  box-shadow:0 1px 0 0 rgba(0,245,196,0.15), 0 2px 12px rgba(0,245,196,0.04);
  padding:0;
  margin:0;
}
.nav-bar nav{
  display:flex !important;
  flex-direction:row !important;
  align-items:stretch;
  justify-content:center;
  /* frame: solid border all around the nav block */
  border:1px solid #243050;
  border-bottom:none;
  /* flair: accent corners */
  outline:1px solid rgba(0,245,196,0.12);
  outline-offset:2px;
  background:rgba(0,245,196,0.025);
  /* flair: inner glow */
  box-shadow:
    0 0 0 1px rgba(0,245,196,0.05) inset,
    0 -2px 20px rgba(0,245,196,0.04) inset;
  margin:0;
  padding:0;
  gap:0;
}
.nav-bar nav .nav-btn{
  display:flex !important;
  align-items:center;
  justify-content:center;
  color:#4a5a78;
  text-decoration:none;
  font-family:'Share Tech Mono',monospace;
  font-size:0.64rem; letter-spacing:2.5px; text-transform:uppercase;
  padding:13px 28px;
  border:none;
  border-right:1px solid #243050;
  border-left:none; border-top:none; border-bottom:none;
  background:transparent;
  transition:color 0.2s, background 0.2s, text-shadow 0.2s;
  white-space:nowrap;
  position:relative;
}
.nav-bar nav .nav-btn:last-child{ border-right:none; }
.nav-bar nav .nav-btn:hover{
  color:#00f5c4;
  background:rgba(0,245,196,0.06);
  text-shadow:0 0 12px rgba(0,245,196,0.4);
}
.nav-bar nav .nav-btn.active{
  color:#00f5c4;
  background:rgba(0,245,196,0.09);
  text-shadow:0 0 16px rgba(0,245,196,0.5);
}
/* flair: active tab accent line at top */
.nav-bar nav .nav-btn.active::before{
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, #00f5c4, transparent);
}
/* flair: active tab dot indicator at bottom */
.nav-bar nav .nav-btn.active::after{
  content:'';
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%;
  background:#00f5c4;
  box-shadow:0 0 6px #00f5c4;
}

/* ── Mobile ── */
@media(max-width:640px){
  .top-bar{ padding:0 16px; }
  .nav-bar nav .nav-btn{
    padding:12px 0;
    font-size:0.52rem; letter-spacing:1px;
    flex:1; text-align:center;
  }
  .nav-bar nav{
    width:100%;
    outline:none;
  }
}
@media(max-width:360px){
  .nav-bar nav .nav-btn{ font-size:0.48rem; letter-spacing:0; }
  #clock{ display:none; }
}

/* ── SHARED COMPONENTS ── */


.spinner{
  width:24px;height:24px;
  border:2px solid var(--border2);border-top-color:var(--accent);
  border-radius:50%;animation:spin 0.8s linear infinite;margin-bottom:12px;
}
@keyframes spin{to{transform:rotate(360deg)}}

.loading-state{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:60px 20px;gap:12px;
}

.sev-badge{
  font-family:'Share Tech Mono',monospace;
  font-size:0.58rem;padding:2px 8px;
  letter-spacing:2px;text-transform:uppercase;
}
.sev-badge.critical{background:rgba(255,59,92,0.12);color:var(--accent2);border:1px solid rgba(255,59,92,0.25);}
.sev-badge.high{background:rgba(255,140,0,0.1);color:var(--accent4);border:1px solid rgba(255,140,0,0.25);}
.sev-badge.medium{background:rgba(77,124,255,0.1);color:var(--accent3);border:1px solid rgba(77,124,255,0.25);}
.sev-badge.info{background:rgba(0,245,196,0.06);color:var(--accent);border:1px solid rgba(0,245,196,0.18);}

.tag{
  font-family:'Share Tech Mono',monospace;
  font-size:0.58rem;color:var(--muted);
  padding:2px 7px;border:1px solid var(--border);
}

.alert-card{
  padding:16px 20px; border-bottom:1px solid var(--border);
  position:relative; transition:background 0.15s;
}
.alert-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
}
.alert-card.critical::before{background:var(--accent2);}
.alert-card.high::before{background:var(--accent4);}
.alert-card.medium::before{background:var(--accent3);}
.alert-card.info::before{background:var(--accent);}
.alert-card:hover{background:var(--surface2);}

.card-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px;}
.card-title{font-size:0.88rem;font-weight:600;color:var(--text-strong);margin-bottom:6px;line-height:1.4;}
.card-body{font-size:0.78rem;color:var(--muted2);line-height:1.65;margin-bottom:10px;}
.card-footer{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.card-tags{display:flex;gap:5px;flex-wrap:wrap;}
.card-time{font-family:'Share Tech Mono',monospace;font-size:0.6rem;color:var(--muted);margin-left:auto;}
.card-source-link{
  font-family:'Share Tech Mono',monospace;font-size:0.6rem;
  color:var(--accent3);text-decoration:none;
  letter-spacing:1px;transition:opacity 0.2s;margin-left:auto;
}
.card-source-link:hover{opacity:0.7;}

footer{
  position:relative;z-index:10;
  border-top:1px solid var(--border);
  padding:16px 24px; margin-top:40px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
}
@media(max-width:600px){
  footer{flex-direction:column;align-items:center;text-align:center;}
}