/* ══════════════════════════════════════════════════════════
   VILCO — COMMAND OPS CONSOLE THEME LAYER
   Loaded after page styles so these variables/rules win the
   cascade and re-skin every page from one place.
   Palette: steel + amber signal. Sharper, more technical HUD.
═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

:root{
  /* Command-console palette: steel + amber signal, cyan as secondary data accent. */
  --cb:#ffb020;--ct:#4fd1ff;--cp:#7d94ac;--cg:#ffb020;--cpk:#4fd1ff;
  --glass:rgba(6,10,18,0.88);--glass2:rgba(4,7,14,0.95);
  --border:rgba(255,176,32,0.30);--border2:rgba(255,176,32,0.13);
  --text:#eef2f6;--text2:#9aa9b6;--text3:#84939f;
  --bg:#04060a;--success:#39ff9e;--danger:#ff4d5e;--amber:#ffb020;
}

/* ── Base surface: near-black steel + technical grid + radar corner ── */
body{
  background-color:var(--bg) !important;
  background-image:
    radial-gradient(ellipse 130% 80% at 50% -20%, rgba(255,176,32,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 90% 70% at 100% 110%, rgba(79,209,255,0.06) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 0% 100%, rgba(125,148,172,0.05) 0%, transparent 55%) !important;
}

/* Fine engineering-grid backdrop, amber-tinted, slow drift */
.vc-hexlayer{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.55;
  background-image:
    linear-gradient(0deg, rgba(255,176,32,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,176,32,0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(79,209,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,209,255,0.02) 1px, transparent 1px);
  background-size:42px 42px,42px 42px,168px 168px,168px 168px;
  background-position:0 0,0 0,0 0,0 0;
  animation:vcGridDrift 46s linear infinite;
}
@keyframes vcGridDrift{0%{background-position:0 0,0 0,0 0,0 0;}100%{background-position:42px 42px,42px 42px,168px 168px,168px 168px;}}

/* Signature element: radar dish tucked in the top-right corner of every page,
   concentric range rings + a slow rotating sweep arm. Made larger and brighter
   so it reads clearly instead of disappearing into the corner. */
.vc-hexlayer::before{
  content:"";position:absolute;top:-140px;right:-140px;width:720px;height:720px;border-radius:50%;
  background:repeating-radial-gradient(circle at center, rgba(255,176,32,0.20) 0px, rgba(255,176,32,0.20) 2px, transparent 2px, transparent 68px);
  -webkit-mask-image:radial-gradient(circle at center, black 62%, transparent 88%);
          mask-image:radial-gradient(circle at center, black 62%, transparent 88%);
}
.vc-hexlayer::after{
  content:"";position:absolute;top:-140px;right:-140px;width:720px;height:720px;border-radius:50%;
  background:conic-gradient(from 0deg, rgba(255,176,32,0.5), rgba(255,176,32,0.12) 12%, transparent 26%, transparent 100%);
  animation:vcRadarSweep 6s linear infinite;
  -webkit-mask-image:radial-gradient(circle at center, black 62%, transparent 88%);
          mask-image:radial-gradient(circle at center, black 62%, transparent 88%);
}
@keyframes vcRadarSweep{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

.vc-scan{position:fixed;left:0;right:0;height:120px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(255,176,32,0.05) 45%,rgba(255,176,32,0.09) 50%,rgba(255,176,32,0.05) 55%,transparent 100%);
  animation:vcScanMove 8s linear infinite;mix-blend-mode:screen;}
@keyframes vcScanMove{0%{top:-120px;}100%{top:100vh;}}

.vc-vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  box-shadow:inset 0 0 170px rgba(0,0,0,0.8),inset 0 0 70px rgba(2,4,9,0.65);}

/* ── Status ribbon: fixed top HUD strip present on every page ── */
.vc-ribbon{position:fixed;top:0;left:0;right:0;height:28px;z-index:2000;
  display:flex;align-items:center;gap:22px;padding:0 18px;
  background:linear-gradient(90deg,rgba(3,5,9,0.97),rgba(5,8,13,0.97));
  border-bottom:1px solid rgba(255,176,32,0.25);
  font-family:'Share Tech Mono',monospace;font-size:10.5px;letter-spacing:1.1px;color:#a9bbc9;
  text-transform:uppercase;overflow:hidden;backdrop-filter:blur(10px);}
.vc-ribbon::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--cb),var(--ct),transparent);
  background-size:200% 100%;opacity:0.75;animation:vcRibbonSweep 6s linear infinite;}
@keyframes vcRibbonSweep{0%{background-position:0% 0;}100%{background-position:200% 0;}}
.vc-ribbon-item{display:flex;align-items:center;gap:6px;white-space:nowrap;}
.vc-ribbon-item i{font-size:9.5px;}
.vc-dot{width:6px;height:6px;border-radius:50%;background:var(--success);box-shadow:0 0 8px var(--success);animation:vcBlink 2s ease-in-out infinite;flex-shrink:0;}
@keyframes vcBlink{0%,100%{opacity:1;}50%{opacity:0.35;}}
.vc-ribbon .vc-op{color:var(--success);}
.vc-ribbon .vc-amber{color:var(--amber);}
.vc-ribbon-spacer{flex:1;}
.vc-clock{font-variant-numeric:tabular-nums;color:var(--cb);letter-spacing:1.5px;}

/* Push existing fixed/positioned layouts down to clear the ribbon */
body{padding-top:28px;}
.sidebar{top:28px !important;height:calc(100vh - 28px) !important;}
.login-card,#particles{ }
@media(max-width:768px){.vc-ribbon{font-size:8px;gap:12px;padding:0 10px;}}

/* ── Sharper HUD panel treatment: tighter corners, harder shadow, amber edge ── */
.login-card,.card-crystal,.crystal-panel,.search-panel,.table-section,.glass,.hv-widget{
  position:relative;
}
.login-card::marker{content:none;}
.login-card,.card-crystal,.crystal-panel,.search-panel,.table-section{
  border-radius:8px !important;
  box-shadow:
    0 0 0 1px rgba(255,176,32,0.09),
    0 24px 70px rgba(0,0,0,0.88),
    0 0 45px rgba(255,176,32,0.06),
    inset 0 1px 0 rgba(255,176,32,0.10) !important;
}
.login-card::before,.card-crystal::before,.crystal-panel::before,.search-panel::before,.table-section::before{
  background:linear-gradient(90deg,transparent,var(--cb),var(--cp),var(--ct),transparent) !important;
}

/* Corner ticks — targeting-reticle marks, now amber and slightly bolder */
.vc-corners{position:absolute;inset:0;pointer-events:none;z-index:2;}
.vc-corners i{position:absolute;width:16px;height:16px;border-color:rgba(255,176,32,0.7);}
.vc-corners .tl{top:6px;left:6px;border-top:2px solid;border-left:2px solid;border-radius:2px 0 0 0;}
.vc-corners .tr{top:6px;right:6px;border-top:2px solid;border-right:2px solid;border-radius:0 2px 0 0;}
.vc-corners .bl{bottom:6px;left:6px;border-bottom:2px solid;border-left:2px solid;border-radius:0 0 0 2px;}
.vc-corners .br{bottom:6px;right:6px;border-bottom:2px solid;border-right:2px solid;border-radius:0 0 2px 0;}

/* ── Facet sheen sweeping across panels on hover, recolored amber ── */
.card-crystal,.crystal-panel,.search-panel,.table-section,.login-card{overflow:hidden;}
.vc-sheen{position:absolute;top:0;left:-60%;width:40%;height:100%;pointer-events:none;z-index:1;
  background:linear-gradient(75deg,transparent 0%,rgba(255,255,255,0.04) 45%,rgba(255,176,32,0.14) 50%,rgba(255,255,255,0.04) 55%,transparent 100%);
  transform:skewX(-18deg);animation:vcSheen 7s ease-in-out infinite;}
@keyframes vcSheen{0%{left:-60%;}35%{left:130%;}100%{left:130%;}}

/* ── Titles/brand: amber-forward gradient, sharper, more insignia than prism ── */
.brand-name,.logo-title,.dash-title h1,.page-heading h2{
  background:linear-gradient(135deg,#ffb020 0%,#ffd166 35%,#4fd1ff 70%,#7d94ac 100%) !important;
  -webkit-background-clip:text !important;-webkit-text-fill-color:transparent !important;background-clip:text !important;
}

/* ── HUD data typography: monospace readouts distinct from Orbitron display type ── */
table th,.header-badge,.vc-seal{font-family:'Share Tech Mono',monospace !important;}
table th{text-shadow:0 0 10px rgba(255,176,32,0.35) !important;}

/* ── Secondary supporting text: slogan, "designed by" line, sidebar sub-label ── */
.dash-title p,.brand-sub,.logo-sub{color:#a9bbc9 !important;opacity:0.9;}

/* ── Official seal watermark corner on primary cards ── */
.vc-seal{position:absolute;bottom:10px;right:14px;font-size:9px;letter-spacing:2px;
  color:rgba(255,176,32,0.32);text-transform:uppercase;
  display:flex;align-items:center;gap:6px;pointer-events:none;z-index:1;}
.vc-seal i{font-size:10px;}

/* ── Footer classification / security strip reused site-wide ── */
.vc-classify{position:fixed;bottom:0;left:0;right:0;height:24px;z-index:1500;
  background:linear-gradient(90deg,rgba(3,5,9,0.96),rgba(5,8,13,0.96));
  border-top:1px solid rgba(255,176,32,0.22);
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:2.2px;color:rgba(154,169,182,0.8);
  text-transform:uppercase;backdrop-filter:blur(10px);}
.vc-classify i{color:rgba(255,176,32,0.65);font-size:9.5px;}
body{padding-bottom:24px;}

@media(max-width:768px){.vc-classify{font-size:7px;letter-spacing:1px;gap:6px;}}