/* ╔══════════════════════════════════════════════════════════╗
   ║  DASHBOARD JARVIS — Oracle UI Override for index.html   ║
   ║  Phase 4 — Project JARVIS                                ║
   ╚══════════════════════════════════════════════════════════╝ */

/* Oracle fonts loaded via <link> in index.html */

/* ── Oracle CSS Variables ── */
:root {
  --oracle-bg: #050a12;
  --oracle-bg-raised: rgba(8, 16, 32, 0.85);
  --oracle-cyan: #00e5ff;
  --oracle-cyan-dim: rgba(0, 229, 255, 0.15);
  --oracle-cyan-glow: 0 0 20px rgba(0, 229, 255, 0.4);
  --oracle-blue: #0a84ff;
  --oracle-gold: #d4af37;
  --oracle-gold-glow: 0 0 15px rgba(212, 175, 55, 0.3);
  --oracle-white: #e0e8f0;
  --oracle-white-dim: rgba(224, 232, 240, 0.5);
  --oracle-red: #ff3a3a;
  --oracle-green: #00ff88;
  --oracle-purple: #b44dff;
  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Rajdhani', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Fade-in: hide body until Oracle styles are applied ── */
body {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* ── Page background ── */
body {
  background: var(--oracle-bg) !important;
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.03) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 0%, rgba(0, 229, 255, 0.05) 0%, transparent 70%) !important;
  background-size: 60px 60px, 60px 60px, 100% 100% !important;
  font-family: var(--font-body) !important;
  color: var(--oracle-white) !important;
}

/* ── Scanline overlay ── */
body::after {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 229, 255, 0.012) 2px,
    rgba(0, 229, 255, 0.012) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

/* ── Sidebar ── */
aside,
[class*="bg-sidebar"] {
  background: rgba(8, 16, 32, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-right-color: rgba(0, 229, 255, 0.12) !important;
}

/* Sidebar border separator */
aside [class*="border-t"],
aside [class*="border-sidebar"],
[class*="bg-sidebar"] [class*="border-t"] {
  border-color: rgba(0, 229, 255, 0.08) !important;
}

/* ── Hide React's original nav items (no nav- ID) — instant, no JS needed ── */
aside nav a:not([id^="nav-"]),
aside nav button:not([id^="nav-"]) {
  display: none !important;
}

/* ── Sidebar Nav Items — Pure CSS (no JS needed) ── */
html body aside nav a,
html body aside nav button,
html body aside a[data-nav],
html body aside button[data-nav],
html body [class*="bg-sidebar"] nav a,
html body [class*="bg-sidebar"] nav button {
  background: transparent !important;
  color: #ffffff !important;
  font-family: 'Orbitron', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border: 1px solid transparent !important;
  border-radius: 2px !important;
  transition: all 0.3s ease !important;
  padding: 10px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer !important;
  margin: 2px 0 !important;
}

/* Force white on all child text within nav items */
html body aside nav a span,
html body aside nav a p,
html body aside nav a div,
html body aside nav a label,
html body aside nav button span,
html body aside nav button p,
html body aside nav button div,
html body aside nav button label {
  color: #ffffff !important;
}

/* Active nav item */
html body aside nav a[class*="bg-primary"],
html body aside nav a[class*="bg-accent"],
html body aside nav a.lbx-nav-active,
html body aside nav a.active,
html body aside nav a[data-active="true"],
html body aside nav a[aria-current],
html body aside nav a[data-state="active"],
html body aside nav button[class*="bg-primary"],
html body aside nav button[class*="bg-accent"],
html body aside nav button.lbx-nav-active,
html body aside nav button.active,
html body aside nav button[data-active="true"],
html body aside nav button[aria-current],
html body aside nav button[data-state="active"] {
  background: rgba(0, 229, 255, 0.25) !important;
  color: #ffffff !important;
  border: 2px solid rgba(0, 229, 255, 0.8) !important;
  box-shadow: 0 0 25px rgba(0, 229, 255, 0.35), inset 0 0 20px rgba(0, 229, 255, 0.08) !important;
  text-shadow: 0 0 12px rgba(0, 229, 255, 0.6) !important;
}

/* Hover state */
html body aside nav a:hover,
html body aside nav button:hover {
  background: rgba(0, 229, 255, 0.12) !important;
  color: #ffffff !important;
  border: 1px solid rgba(0, 229, 255, 0.3) !important;
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.2) !important;
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.3) !important;
  transform: scale(1.02) !important;
}

/* Don't override active styles on hover */
html body aside nav a[class*="bg-primary"]:hover,
html body aside nav a[class*="bg-accent"]:hover,
html body aside nav a.lbx-nav-active:hover,
html body aside nav a[aria-current]:hover,
html body aside nav button[class*="bg-primary"]:hover,
html body aside nav button[class*="bg-accent"]:hover,
html body aside nav button.lbx-nav-active:hover,
html body aside nav button[aria-current]:hover {
  background: rgba(0, 229, 255, 0.25) !important;
  border: 2px solid rgba(0, 229, 255, 0.8) !important;
  box-shadow: 0 0 25px rgba(0, 229, 255, 0.35), inset 0 0 20px rgba(0, 229, 255, 0.08) !important;
  text-shadow: 0 0 12px rgba(0, 229, 255, 0.6) !important;
  transform: none !important;
}

/* Sidebar nav SVG icons */
html body aside nav a svg,
html body aside nav button svg {
  stroke: #00e5ff !important;
  color: #00e5ff !important;
  opacity: 0.6 !important;
  filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.3)) !important;
}

/* Active nav SVG icons — brighter */
html body aside nav a[class*="bg-primary"] svg,
html body aside nav a[class*="bg-accent"] svg,
html body aside nav a.lbx-nav-active svg,
html body aside nav a[aria-current] svg,
html body aside nav button[class*="bg-primary"] svg,
html body aside nav button[class*="bg-accent"] svg {
  opacity: 1 !important;
  filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.6)) !important;
}

/* Hover nav SVG icons — brighter */
html body aside nav a:hover svg,
html body aside nav button:hover svg {
  opacity: 1 !important;
  filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.6)) !important;
}

/* Blacklist item special color */
html body aside nav a#nav-blacklist svg,
html body aside nav button#nav-blacklist svg {
  stroke: #ff3a3a !important;
  color: #ff3a3a !important;
  filter: drop-shadow(0 0 6px rgba(255, 58, 58, 0.5)) !important;
}

/* ── Injected sidebar items — ID-based overrides ── */
#nav-dashboard,
#nav-email-inbox,
#nav-settings,
#nav-oracle,
#nav-blacklist,
#nav-social,
#nav-scripts {
  background: transparent !important;
  color: #ffffff !important;
  font-family: 'Orbitron', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border: 1px solid transparent !important;
  border-radius: 2px !important;
  padding: 10px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
  margin: 2px 0 !important;
}

#nav-dashboard *,
#nav-email-inbox *,
#nav-settings *,
#nav-oracle *,
#nav-blacklist *,
#nav-social *,
#nav-scripts * {
  color: #ffffff !important;
  font-family: 'Orbitron', sans-serif !important;
}

#nav-dashboard:hover,
#nav-email-inbox:hover,
#nav-settings:hover,
#nav-oracle:hover,
#nav-blacklist:hover,
#nav-social:hover,
#nav-scripts:hover {
  background: rgba(0, 229, 255, 0.08) !important;
  border-color: rgba(0, 229, 255, 0.2) !important;
}

#nav-dashboard.lbx-nav-active,
#nav-email-inbox.lbx-nav-active,
#nav-settings.lbx-nav-active,
#nav-oracle.lbx-nav-active,
#nav-blacklist.lbx-nav-active,
#nav-social.lbx-nav-active,
#nav-campaigns.lbx-nav-active,
#nav-scripts.lbx-nav-active {
  background: rgba(0, 229, 255, 0.18) !important;
  border: 2px solid rgba(0, 229, 255, 0.6) !important;
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.25) !important;
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.5) !important;
}

/* ── Top bar / header ── */
[class*="border-b"][class*="items-center"][class*="justify-between"],
header,
div[class*="h-14"][class*="border-b"] {
  background: rgba(8, 16, 32, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom-color: rgba(0, 229, 255, 0.12) !important;
}

/* ── Main content area ── */
main,
[class*="flex-1"][class*="flex-col"][class*="min-w-0"] > div {
  background: transparent !important;
}

/* ── Dashboard title ── */
main h1,
h1.text-2xl {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--oracle-white) !important;
  font-size: 24px !important;
}

/* Subtitle */
main h1 + p,
p.text-muted-foreground {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--oracle-white-dim) !important;
}

/* ── Stat Cards Grid ── */
.grid.gap-4.grid-cols-2,
div[class*="grid"][class*="gap-4"][class*="grid-cols-2"] {
  gap: 16px !important;
}

/* ── Individual Stat Card → Oracle Glass Panel ── */
.rounded-xl.bg-card,
div[class*="rounded-xl"][class*="bg-card"][class*="border"] {
  background: rgba(8, 16, 32, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(0, 229, 255, 0.15) !important;
  border-radius: 4px !important;
  box-shadow:
    0 0 1px rgba(0, 229, 255, 0.3),
    inset 0 0 30px rgba(0, 229, 255, 0.03) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
}

.rounded-xl.bg-card:hover,
div[class*="rounded-xl"][class*="bg-card"]:hover {
  border-color: rgba(0, 229, 255, 0.35) !important;
  box-shadow: 0 0 25px rgba(0, 229, 255, 0.12) !important;
}

/* Stat card label */
.rounded-xl.bg-card span[class*="text-sm"][class*="text-muted"],
div[class*="bg-card"] span[class*="text-muted"] {
  font-family: var(--font-display) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--oracle-white-dim) !important;
}

/* Stat card number */
.rounded-xl.bg-card [class*="text-3xl"],
.rounded-xl.bg-card [class*="text-2xl"],
div[class*="bg-card"] [class*="text-3xl"],
div[class*="bg-card"] [class*="text-2xl"] {
  font-family: var(--font-mono) !important;
  color: var(--oracle-cyan) !important;
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.3) !important;
}

/* Stat card subtitle text */
.rounded-xl.bg-card [class*="text-xs"],
div[class*="bg-card"] [class*="text-xs"] {
  font-family: var(--font-body) !important;
  color: var(--oracle-white-dim) !important;
}

/* Stat card icon */
.rounded-xl.bg-card svg,
div[class*="bg-card"] > div svg {
  stroke: var(--oracle-cyan) !important;
  opacity: 0.5;
  filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.2));
}

/* "Action needed" badge */
[class*="bg-green"],
span[class*="bg-green"] {
  background: rgba(0, 255, 136, 0.15) !important;
  color: var(--oracle-green) !important;
  border: 1px solid rgba(0, 255, 136, 0.3) !important;
  font-family: var(--font-display) !important;
  font-size: 9px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: 2px !important;
}

/* ── Activity / Recent section ── */
main h2,
main [class*="text-lg"][class*="font-semibold"],
main [class*="text-xl"][class*="font-semibold"] {
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--oracle-white) !important;
}

/* Activity list items */
main [class*="border-b"][class*="py-3"],
main [class*="border-b"][class*="py-4"] {
  border-bottom-color: rgba(0, 229, 255, 0.06) !important;
  transition: background 0.2s ease !important;
}

main [class*="border-b"][class*="py-3"]:hover,
main [class*="border-b"][class*="py-4"]:hover {
  background: rgba(0, 229, 255, 0.03) !important;
}

/* Status badges in activity */
[class*="rounded-full"][class*="text-xs"] {
  font-family: var(--font-display) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: 2px !important;
}

/* Pending Review badge */
[class*="bg-yellow"],
[class*="bg-amber"] {
  background: rgba(212, 175, 55, 0.15) !important;
  color: var(--oracle-gold) !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
}

/* Sent badge */
[class*="bg-green"][class*="rounded-full"],
span[class*="bg-green"][class*="text-xs"] {
  background: rgba(0, 229, 255, 0.1) !important;
  color: var(--oracle-cyan) !important;
  border: 1px solid rgba(0, 229, 255, 0.25) !important;
}

/* Skipped badge */
[class*="bg-gray"][class*="rounded-full"] {
  background: rgba(224, 232, 240, 0.06) !important;
  color: var(--oracle-white-dim) !important;
  border: 1px solid rgba(224, 232, 240, 0.12) !important;
}

/* Activity text */
main [class*="font-medium"] {
  color: var(--oracle-white) !important;
  font-family: var(--font-body) !important;
}

main [class*="text-muted"],
main [class*="text-sm"][class*="text-gray"],
main [class*="text-xs"][class*="text-gray"] {
  color: var(--oracle-white-dim) !important;
  font-family: var(--font-body) !important;
}

/* Time stamps */
main [class*="text-xs"][class*="text-muted"],
main [class*="text-sm"][class*="text-muted"] {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: rgba(0, 229, 255, 0.3) !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: rgba(5, 10, 18, 0.5); }
::-webkit-scrollbar-thumb { background: rgba(0, 229, 255, 0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 229, 255, 0.3); }

/* ── Sign out button ── */
aside button[class*="w-full"],
[class*="bg-sidebar"] button[class*="sign-out"],
aside [class*="Sign out"],
aside a[href*="logout"] {
  font-family: var(--font-display) !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--oracle-white-dim) !important;
  border-color: rgba(0, 229, 255, 0.1) !important;
}

/* ── User info at bottom of sidebar ── */
aside [class*="flex"][class*="items-center"][class*="gap"] > span,
aside [class*="truncate"] {
  font-family: var(--font-body) !important;
  color: var(--oracle-white-dim) !important;
}

/* ── Oracle Pulse Hero (injected by JS) ── */
.oracle-hero {
  display: block;
  padding: 0;
  min-height: auto !important;
  height: auto !important;
  margin-bottom: 20px;
  background: rgba(8, 16, 32, 0.5);
  border: 1px solid rgba(0, 229, 255, 0.1);
  border-radius: 4px;
  position: relative;
  overflow: visible !important;
}
.oracle-hero::before,
.oracle-hero::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: var(--oracle-cyan);
  border-style: solid;
}
.oracle-hero::before {
  top: -1px; left: -1px;
  border-width: 2px 0 0 2px;
}
.oracle-hero::after {
  bottom: -1px; right: -1px;
  border-width: 0 2px 2px 0;
}

.oracle-hero-pulse {
  width: 80px;
  height: 80px;
  animation: oracle-pulse-glow 3s ease-in-out infinite;
}
@keyframes oracle-pulse-glow {
  0%, 100% { opacity: 0.5; filter: drop-shadow(0 0 6px rgba(0,229,255,0.3)); }
  50% { opacity: 1; filter: drop-shadow(0 0 16px rgba(0,229,255,0.6)); }
}
.oracle-hero-pulse .arc-outer {
  animation: arc-rotate 8s linear infinite;
  transform-origin: 50% 50%;
}
.oracle-hero-pulse .arc-inner {
  animation: arc-rotate 6s linear infinite reverse;
  transform-origin: 50% 50%;
}
@keyframes arc-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.oracle-hero-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.oracle-hero-status {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--oracle-cyan);
  text-shadow: 0 0 12px rgba(0, 229, 255, 0.4);
}
.oracle-hero-sub {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oracle-white-dim);
}

/* ── Panel corner accents on stat cards ── */
div[class*="bg-card"]::before,
div[class*="bg-card"]::after {
  content: '' !important;
  position: absolute !important;
  width: 12px !important;
  height: 12px !important;
  border-color: rgba(0, 229, 255, 0.3) !important;
  border-style: solid !important;
  pointer-events: none !important;
}
div[class*="bg-card"]::before {
  top: -1px !important; left: -1px !important;
  border-width: 1px 0 0 1px !important;
}
div[class*="bg-card"]::after {
  bottom: -1px !important; right: -1px !important;
  border-width: 0 1px 1px 0 !important;
}

/* ── Outbound table (injected by extras) ── */
table {
  font-family: var(--font-body) !important;
}
table th {
  font-family: var(--font-display) !important;
  font-size: 9px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--oracle-white-dim) !important;
  border-bottom-color: rgba(0, 229, 255, 0.1) !important;
}
table td {
  border-bottom-color: rgba(0, 229, 255, 0.05) !important;
  color: var(--oracle-white-dim) !important;
}
table tr:hover td {
  background: rgba(0, 229, 255, 0.03) !important;
}

/* ── Buttons throughout ── */
button[class*="bg-primary"],
a[class*="bg-primary"] {
  background: transparent !important;
  border: 1px solid rgba(0, 229, 255, 0.3) !important;
  color: var(--oracle-cyan) !important;
  font-family: var(--font-display) !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border-radius: 2px !important;
  transition: all 0.3s ease !important;
}
button[class*="bg-primary"]:hover,
a[class*="bg-primary"]:hover {
  background: rgba(0, 229, 255, 0.1) !important;
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.2) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   NERVE CENTRE — Intelligence Feed Panel
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Section container ── */
.nc-section {
  margin-top: 24px;
  padding: 0;
  opacity: 0;
  animation: nc-fade-in 0.5s ease forwards;
}
@keyframes nc-fade-in {
  to { opacity: 1; }
}

/* ── Header row ── */
.nc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 0 4px;
}
.nc-header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nc-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--oracle-cyan);
  text-shadow: 0 0 12px rgba(0, 229, 255, 0.4);
  margin: 0;
}
.nc-subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  color: var(--oracle-white-dim);
  letter-spacing: 1px;
  margin: 0;
}
.nc-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.nc-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: nc-pulse 2s ease-in-out infinite;
}
.nc-pulse-dot.active {
  background: var(--oracle-green);
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.6);
}
.nc-pulse-dot.delayed {
  background: var(--oracle-gold);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
}
.nc-pulse-dot.offline {
  background: var(--oracle-red);
  box-shadow: 0 0 8px rgba(255, 58, 58, 0.6);
}
@keyframes nc-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.2); }
}
.nc-status-label.active { color: var(--oracle-green); }
.nc-status-label.delayed { color: var(--oracle-gold); }
.nc-status-label.offline { color: var(--oracle-red); }

/* ── Stats strip ── */
.nc-stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.nc-stat-card {
  background: rgba(8, 16, 32, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 229, 255, 0.12);
  border-radius: 4px;
  padding: 14px 16px;
  position: relative;
  box-shadow: 0 0 1px rgba(0, 229, 255, 0.3), inset 0 0 30px rgba(0, 229, 255, 0.03);
  transition: all 0.3s ease;
}
.nc-stat-card::before,
.nc-stat-card::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: rgba(0, 229, 255, 0.25);
  border-style: solid;
  pointer-events: none;
}
.nc-stat-card::before {
  top: -1px; left: -1px;
  border-width: 1px 0 0 1px;
}
.nc-stat-card::after {
  bottom: -1px; right: -1px;
  border-width: 0 1px 1px 0;
}
.nc-stat-card:hover {
  border-color: rgba(0, 229, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.1);
}
.nc-stat-number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--oracle-cyan);
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.3);
  line-height: 1.2;
}
.nc-stat-label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  color: var(--oracle-white-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
}

/* ── Feed cards ── */
.nc-feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.nc-feed-card {
  background: rgba(8, 16, 32, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 229, 255, 0.1);
  border-radius: 4px;
  padding: 16px 18px;
  position: relative;
  cursor: default;
  transition: all 0.3s var(--ease-smooth);
  box-shadow: 0 0 1px rgba(0, 229, 255, 0.2), inset 0 0 30px rgba(0, 229, 255, 0.02);
}
.nc-feed-card::before,
.nc-feed-card::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-style: solid;
  pointer-events: none;
  transition: border-color 0.3s ease;
}
.nc-feed-card::before {
  top: -1px; left: -1px;
  border-width: 1px 0 0 1px;
  border-color: rgba(0, 229, 255, 0.2);
}
.nc-feed-card::after {
  bottom: -1px; right: -1px;
  border-width: 0 1px 1px 0;
  border-color: rgba(0, 229, 255, 0.2);
}
.nc-feed-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 229, 255, 0.08);
}
/* Job type colour coding on hover */
.nc-feed-card[data-type="youtube_analysis"]:hover {
  border-color: rgba(0, 229, 255, 0.4);
}
.nc-feed-card[data-type="youtube_analysis"]:hover::before,
.nc-feed-card[data-type="youtube_analysis"]:hover::after {
  border-color: rgba(0, 229, 255, 0.5);
}
.nc-feed-card[data-type="trend_detection"]:hover {
  border-color: rgba(180, 77, 255, 0.4);
}
.nc-feed-card[data-type="trend_detection"]:hover::before,
.nc-feed-card[data-type="trend_detection"]:hover::after {
  border-color: rgba(180, 77, 255, 0.5);
}
.nc-feed-card[data-type="social_analytics"]:hover {
  border-color: rgba(212, 175, 55, 0.4);
}
.nc-feed-card[data-type="social_analytics"]:hover::before,
.nc-feed-card[data-type="social_analytics"]:hover::after {
  border-color: rgba(212, 175, 55, 0.5);
}
.nc-feed-card[data-type="weekly_synthesis"]:hover {
  border-color: rgba(0, 255, 136, 0.4);
}
.nc-feed-card[data-type="weekly_synthesis"]:hover::before,
.nc-feed-card[data-type="weekly_synthesis"]:hover::after {
  border-color: rgba(0, 255, 136, 0.5);
}

/* Card top row */
.nc-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.nc-type-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.nc-type-dot.youtube_analysis      { background: var(--oracle-cyan);   box-shadow: 0 0 6px rgba(0, 229, 255, 0.5); }
.nc-type-dot.trend_detection       { background: var(--oracle-purple);  box-shadow: 0 0 6px rgba(180, 77, 255, 0.5); }
.nc-type-dot.social_analytics      { background: var(--oracle-gold);    box-shadow: 0 0 6px rgba(212, 175, 55, 0.5); }
.nc-type-dot.weekly_synthesis      { background: var(--oracle-green);   box-shadow: 0 0 6px rgba(0, 255, 136, 0.5); }
.nc-type-dot.oracle_evolution      { background: #00ff88;               box-shadow: 0 0 6px rgba(0, 255, 136, 0.6); }
.nc-type-dot.campaign_proposal     { background: #f97316;               box-shadow: 0 0 6px rgba(249, 115, 22, 0.5); }
.nc-type-dot.oracle_self_prompt    { background: #e0e8f0;               box-shadow: 0 0 6px rgba(224, 232, 240, 0.7); }
.nc-type-dot.daily_micro_prompt    { background: #e0e8f0;               box-shadow: 0 0 6px rgba(224, 232, 240, 0.5); }
.nc-type-dot.health_check          { background: #4fc3f7;               box-shadow: 0 0 6px rgba(79, 195, 247, 0.5); }
.nc-type-dot.customer_health       { background: #00e5ff;               box-shadow: 0 0 6px rgba(0, 229, 255, 0.5); }
.nc-type-dot.email_patterns        { background: #d4af37;               box-shadow: 0 0 6px rgba(212, 175, 55, 0.5); }
.nc-type-dot.campaign_performance  { background: #f97316;               box-shadow: 0 0 6px rgba(249, 115, 22, 0.5); }
.nc-type-dot.kb_hygiene            { background: #6b7280;               box-shadow: 0 0 6px rgba(107, 114, 128, 0.4); }
.nc-type-dot.content_brief         { background: #b44dff;               box-shadow: 0 0 6px rgba(180, 77, 255, 0.5); }
.nc-type-dot.campaign_impact       { background: #00ff88;               box-shadow: 0 0 6px rgba(0, 255, 136, 0.5); }
.nc-type-dot.code_proposal         { background: #e0e8f0;               box-shadow: 0 0 6px rgba(224, 232, 240, 0.7); }
.nc-type-dot.strategic_intelligence { background: #d4af37;              box-shadow: 0 0 6px rgba(212, 175, 55, 0.7); }
.nc-type-dot.prospect_search        { background: #00ff88;               box-shadow: 0 0 6px rgba(0, 255, 136, 0.7); }

.nc-card-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--oracle-white);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nc-card-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--oracle-white-dim);
  flex-shrink: 0;
  white-space: nowrap;
}

/* Card body */
.nc-card-summary {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  color: var(--oracle-white-dim);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
}

/* Card bottom row */
.nc-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nc-model-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  padding: 2px 8px;
  border-radius: 2px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.nc-model-badge.sonnet {
  color: var(--oracle-cyan);
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.2);
}
.nc-model-badge.opus {
  color: var(--oracle-gold);
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.2);
}
.nc-model-badge.haiku {
  color: var(--oracle-green);
  background: rgba(0, 255, 136, 0.08);
  border: 1px solid rgba(0, 255, 136, 0.2);
}
.nc-model-badge.multi {
  color: var(--oracle-purple);
  background: rgba(180, 77, 255, 0.08);
  border: 1px solid rgba(180, 77, 255, 0.2);
}
.nc-view-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--oracle-cyan);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}
.nc-view-btn:hover {
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
}

/* ── Expanded report ── */
.nc-expanded {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease-smooth), opacity 0.3s ease;
  opacity: 0;
}
.nc-feed-card.expanded .nc-expanded {
  max-height: 5000px;
  opacity: 1;
}
.nc-feed-card.expanded .nc-expanded.nc-expand-done {
  max-height: none;
}
.nc-expanded-inner {
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid rgba(0, 229, 255, 0.08);
}
.nc-full-analysis {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--oracle-white-dim);
  line-height: 1.7;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.nc-full-analysis h1,
.nc-full-analysis h2,
.nc-full-analysis h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--oracle-cyan);
  margin: 16px 0 8px 0;
}
.nc-full-analysis h1 { font-size: 16px; }
.nc-full-analysis h2 { font-size: 14px; }
.nc-full-analysis h3 { font-size: 12px; color: var(--oracle-gold, #d4af37); }
.nc-full-analysis strong {
  color: var(--oracle-white);
  font-weight: 600;
}
.nc-full-analysis ul,
.nc-full-analysis ol {
  padding-left: 20px;
  margin: 8px 0;
}
.nc-full-analysis li {
  margin-bottom: 4px;
}
.nc-full-analysis a {
  color: var(--oracle-cyan);
  text-decoration: none;
}
.nc-full-analysis a:hover {
  text-decoration: underline;
}
.nc-full-analysis h2 { border-bottom: 1px solid rgba(0, 229, 255, 0.1); padding-bottom: 6px; }
.nc-full-analysis hr {
  border: none;
  border-top: 1px solid rgba(0, 229, 255, 0.1);
  margin: 20px 0;
}
.nc-full-analysis p,
.nc-full-analysis > div {
  margin-bottom: 16px;
}

/* ── PDF download button ── */
.nc-pdf-btn {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--oracle-gold, #d4af37);
  background: none;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 2px;
  padding: 4px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.nc-pdf-btn:hover {
  background: rgba(212, 175, 55, 0.08);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.15);
}
.nc-pdf-btn.generating {
  opacity: 0.6;
  pointer-events: none;
}
.nc-expanded-top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

/* Insight tags */
.nc-insights {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
}
.nc-insight-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 3px 8px;
  border: 1px solid rgba(0, 229, 255, 0.2);
  border-radius: 2px;
  color: var(--oracle-cyan);
  background: rgba(0, 229, 255, 0.04);
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nc-sources {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--oracle-white-dim);
  margin-top: 10px;
  opacity: 0.6;
}
.nc-collapse-btn {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--oracle-cyan);
  background: none;
  border: 1px solid rgba(0, 229, 255, 0.2);
  border-radius: 2px;
  padding: 6px 16px;
  cursor: pointer;
  margin-top: 14px;
  transition: all 0.2s ease;
}
.nc-collapse-btn:hover {
  background: rgba(0, 229, 255, 0.08);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.15);
}

/* ── Trigger buttons strip ── */
.nc-triggers {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.nc-trigger-btn {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--oracle-cyan);
  background: rgba(8, 16, 32, 0.75);
  border: 1px solid rgba(0, 229, 255, 0.2);
  border-radius: 2px;
  padding: 10px 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  backdrop-filter: blur(8px);
}
.nc-trigger-btn:hover:not(:disabled) {
  background: rgba(0, 229, 255, 0.08);
  border-color: rgba(0, 229, 255, 0.4);
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.15);
}
.nc-trigger-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.nc-trigger-btn.executing {
  animation: nc-btn-pulse 1.5s ease-in-out infinite;
  border-color: rgba(0, 229, 255, 0.5);
}
@keyframes nc-btn-pulse {
  0%, 100% { box-shadow: 0 0 5px rgba(0, 229, 255, 0.15); }
  50% { box-shadow: 0 0 20px rgba(0, 229, 255, 0.3); }
}
.nc-trigger-btn.success {
  border-color: rgba(0, 255, 136, 0.6);
  box-shadow: 0 0 15px rgba(0, 255, 136, 0.2);
}
.nc-trigger-btn.error {
  border-color: rgba(255, 58, 58, 0.6);
  box-shadow: 0 0 15px rgba(255, 58, 58, 0.2);
}

/* ── Empty state ── */
.nc-empty {
  text-align: center;
  padding: 40px 20px;
  position: relative;
}
.nc-empty-text {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--oracle-white-dim);
  margin-bottom: 8px;
}
.nc-empty-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(0, 229, 255, 0.3);
}
.nc-scan-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--oracle-cyan), transparent);
  opacity: 0.3;
  animation: nc-scan 3s ease-in-out infinite;
}
@keyframes nc-scan {
  0% { top: 10%; }
  50% { top: 90%; }
  100% { top: 10%; }
}

/* ── Data refresh fade ── */
.nc-refreshing .nc-stats-strip,
.nc-refreshing .nc-feed {
  opacity: 0.3;
  transition: opacity 0.15s ease;
}
.nc-stats-strip,
.nc-feed {
  transition: opacity 0.3s ease;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .nc-stats-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .nc-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .nc-triggers {
    flex-direction: column;
  }
  .nc-trigger-btn {
    width: 100%;
    text-align: center;
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .nc-pulse-dot,
  .nc-trigger-btn.executing,
  .nc-scan-line {
    animation: none;
  }
  .nc-section {
    animation: none;
    opacity: 1;
  }
  .nc-feed-card:hover {
    transform: none;
  }
}