/* =========================================================
   Infinity CC vNext Theme
   Deep Contrast + Neon Accents (Magenta / Cyan)
   Applied as override layer after base embedded <style>.
   ========================================================= */

/* ── Design Tokens ── */
:root {
  --cc-void-0:       #050810;
  --cc-void-1:       #070b15;
  --cc-void-2:       #0c1222;

  --cc-magenta:      #ff2ea6;
  --cc-cyan:         #25f4ff;
  --cc-lime:         #00ff88;   /* status-OK only */
  --cc-warn:         #ffb020;
  --cc-danger:       #ff3b5c;

  --cc-glow-m:       rgba(255,  46, 166, 0.38);
  --cc-glow-c:       rgba( 37, 244, 255, 0.30);
  --cc-glow-m-soft:  rgba(255,  46, 166, 0.18);
  --cc-glow-c-soft:  rgba( 37, 244, 255, 0.14);

  --cc-border-m:     rgba(255,  46, 166, 0.28);
  --cc-border-c:     rgba( 37, 244, 255, 0.22);
  --cc-border-faint: rgba(255, 255, 255, 0.07);

  --cc-focus:  0 0 0 3px rgba(37,244,255,0.22), 0 0 0 1px rgba(255,255,255,0.10);

  /* Component system tokens */
  --cc-border:        rgba(255, 255, 255, 0.08);
  --cc-border-strong: rgba(37,  244, 255, 0.24);
  --cc-radius-xl:     14px;
  --cc-shadow-soft:   0 4px 16px rgba(0,0,0,0.28);
  --cc-shadow:        0 8px 28px rgba(0,0,0,0.45), 0 0 20px rgba(37,244,255,0.08);
  --cc-text:          #e4efe9;
  --cc-glow-magenta:  rgba(255, 46, 166, 0.18);
}

/* ── Page Background — deeper void with neon aurora ── */
body {
  background:
    radial-gradient(1200px 640px at 12% 8%,  rgba(255, 46,166,0.10), transparent 60%),
    radial-gradient(1000px 560px at 88% 20%,  rgba(37,244,255,0.10), transparent 55%),
    radial-gradient(1400px 800px at 50% 130%, rgba(255, 46,166,0.07), transparent 60%),
    linear-gradient(175deg, var(--cc-void-0) 0%, var(--cc-void-2) 100%);
}

/* Subtle tech grain overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(circle at 25% 35%, rgba(255,255,255,0.12) 0 1px, transparent 2px),
    radial-gradient(circle at 75% 65%, rgba(255,255,255,0.08) 0 1px, transparent 2px);
  background-size: 130px 130px, 160px 160px;
}

/* ── Scrollbar — cyan instead of green ── */
::-webkit-scrollbar-track { background: rgba(37,244,255,0.03); }
::-webkit-scrollbar-thumb { background: rgba(37,244,255,0.22); }
::-webkit-scrollbar-thumb:hover { background: rgba(37,244,255,0.42); }

/* ── Brand Logo — white with magenta accent span ── */
.hdr-logo {
  color: var(--cc-cyan);
}
.hdr-logo span {
  /* "INFINITY" span — bump to magenta */
  color: var(--cc-magenta);
  text-shadow: 0 0 18px var(--cc-glow-m);
}

/* ── Apps Launcher Button — magenta → cyan ── */
.btn-apps {
  background: rgba(255, 46, 166, 0.07);
  border-color: rgba(255, 46, 166, 0.30);
  color: var(--cc-magenta);
}
.btn-apps:hover {
  background: rgba(255, 46, 166, 0.14);
  box-shadow: 0 0 18px var(--cc-glow-m-soft), 0 0 1px var(--cc-magenta) inset;
  border-color: rgba(255, 46, 166, 0.50);
  color: var(--cc-magenta);
  transform: translateY(-1px);
}

/* ── Login Button — magenta ── */
.btn-login {
  background: linear-gradient(135deg, rgba(255,46,166,0.12), rgba(37,244,255,0.07));
  border-color: var(--cc-magenta);
  color: var(--cc-magenta);
}
.btn-login:hover {
  background: linear-gradient(135deg, rgba(255,46,166,0.20), rgba(37,244,255,0.10));
  box-shadow: 0 0 22px var(--cc-glow-m);
}

/* Login form focus — cyan */
.field-input:focus {
  border-color: var(--cc-cyan);
  box-shadow: 0 0 0 3px rgba(37,244,255,0.12);
}
.field-input { border-color: rgba(37,244,255,0.14); }

/* Login logo text — cyan instead of green */
.login-logo { color: var(--cc-cyan); }

/* ── Widget Card Header Title — white / text instead of green ── */
.wh-title { color: var(--cc-cyan); }
.widget.pk .wh-title { color: var(--cc-magenta); }
.widget.cy .wh-title { color: var(--cc-cyan); }

/* Refresh button hover — cyan */
.wh-refresh:hover {
  border-color: var(--cc-cyan);
  color: var(--cc-cyan);
}

/* ── Metric Value — cyan instead of green ── */
.metric-val { color: var(--cc-cyan); }

/* Warn/crit stay at existing colors (yellow/orange/red) — don't override */

/* ── Progress Bars — cyan→magenta gradient ── */
.bar-fill {
  background: linear-gradient(90deg, var(--cc-cyan) 0%, var(--cc-magenta) 100%);
  box-shadow: 0 0 14px rgba(37,244,255,0.16), 0 0 10px rgba(255,46,166,0.12);
}
/* warn and crit retain their yellow/orange/red — no override */

/* ── Widget Card — deeper panel + sharper border ── */
.widget {
  background: linear-gradient(180deg, rgba(14, 20, 34, 0.82), rgba(8, 12, 22, 0.80));
  border-color: rgba(255,255,255,0.07);
  backdrop-filter: blur(12px);
}
@media (hover: hover) {
  .widget:hover {
    border-color: rgba(37,244,255,0.24);
    box-shadow: 0 0 24px rgba(37,244,255,0.10), 0 0 14px rgba(255,46,166,0.06);
    transform: translateY(-1px);
  }
  .widget.pk:hover {
    border-color: rgba(255,46,166,0.30);
    box-shadow: 0 0 22px rgba(255,46,166,0.12), 0 0 12px rgba(37,244,255,0.06);
  }
}

/* ── Header chips — de-green default, keep ok/err/warn semantic ── */
.hdr-chip {
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  color: rgba(224,234,255,0.60);
}
/* chip.ok STAYS green — it's a status indicator */
.hdr-chip.ok {
  border-color: rgba(0,255,136,0.35);
  color: #5fffb3;
  background: rgba(0,255,136,0.06);
}

/* Chips-strip top border — neutral instead of green tint */
.hdr-chips-strip { border-top-color: rgba(255,255,255,0.06); }

/* ── Keyboard Shortcut Bar — cyan instead of green ── */
.shortcut-bar {
  background: rgba(37,244,255,0.02);
  border-bottom-color: rgba(37,244,255,0.05);
}
.shortcut-item kbd {
  background: rgba(37,244,255,0.07);
  border-color: rgba(37,244,255,0.18);
  color: var(--cc-cyan);
}

/* ── Loading Spinner — cyan ── */
.spinner {
  border-color: rgba(37,244,255,0.14);
  border-top-color: var(--cc-cyan);
}

/* ── Header Background — deeper ── */
.hdr {
  background: rgba(7, 10, 18, 0.96);
  border-bottom-color: rgba(255,255,255,0.07);
}

/* ── Apps Drawer ── */
.drawer-title { color: var(--cc-cyan); }
.drawer-search:focus {
  border-color: var(--cc-cyan);
  box-shadow: 0 0 0 3px rgba(37,244,255,0.10);
}
.drawer-section-label { color: var(--cc-cyan); opacity: 0.75; }

/* ── Command Palette ── */
.cmd-icon { color: var(--cc-magenta); }
.cmd-item.selected { background: rgba(37,244,255,0.07); }
.cmd-item.selected .cmd-icon { color: var(--cc-cyan); }

/* ── Event Timeline — ok border stays lime (status) ── */
/* .event-row.ok → keep green border (status meaning) */

/* ── Focus ring global — cyan ── */
:focus-visible {
  outline-color: var(--cc-cyan);
}

/* ── Status badges — badge-ok stays green (status-only) ── */
/* .badge-ok keeps its existing green styles — DO NOT override */
/* Only add enhanced glow */
.badge-ok {
  box-shadow: 0 0 12px rgba(0,255,136,0.14);
}
.badge-err {
  box-shadow: 0 0 12px rgba(255,51,85,0.14);
}

/* ── Tile buttons in Quick Launch widget ── */
.tile-btn {
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.tile-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

/* ── Textarea focus (command palette search) ── */
.cmd-input:focus {
  outline: none;
  border-color: var(--cc-cyan);
  box-shadow: 0 0 0 2px rgba(37,244,255,0.12);
}

/* ── App tiles in drawer ── */
.app-tile {
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.app-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.40);
}

/* ── Avatar button — magenta instead of cyan tint ── */
.hdr-avatar-btn {
  background: rgba(255, 46, 166, 0.08);
  border-color: rgba(255, 46, 166, 0.28);
  color: var(--cc-magenta);
}
.hdr-avatar-btn:hover {
  background: rgba(255, 46, 166, 0.16);
  box-shadow: 0 0 14px var(--cc-glow-m-soft);
}

/* =========================================================
   CC Component System (cc-*)
   ========================================================= */

/* ---- Card ---- */
.cc-card {
  background: linear-gradient(180deg, rgba(16,22,36,0.78), rgba(10,14,24,0.74));
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-xl);
  padding: 20px;
  box-shadow: var(--cc-shadow-soft);
  backdrop-filter: blur(10px);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.cc-card:hover {
  border-color: var(--cc-border-strong);
  box-shadow: var(--cc-shadow);
}

/* ---- Section Titles ---- */
.cc-section-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cc-cyan);
}

/* ---- Metric ---- */
.cc-metric {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--cc-cyan);
}

/* Within metric-header context, keep the compact size */
.metric-header .cc-metric {
  font-size: inherit;
  font-weight: inherit;
}

/* ---- Pill ---- */
.cc-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(10,14,24,0.65);
  border: 1px solid rgba(255,255,255,0.10);
  font-size: 0.8rem;
  color: var(--cc-text);
}
.cc-pill.primary {
  border-color: rgba(255,46,166,0.30);
  box-shadow: 0 0 18px var(--cc-glow-magenta);
}
.cc-pill.ok,
.cc-pill.badge-ok {
  border-color: rgba(140,255,91,0.30);
  box-shadow: 0 0 18px rgba(140,255,91,0.12);
}
.cc-pill.warn,
.cc-pill.badge-warn {
  border-color: rgba(255,176,32,0.30);
}
.cc-pill.danger,
.cc-pill.badge-err {
  border-color: rgba(255,59,92,0.30);
}
.cc-pill.badge-neutral {
  border-color: rgba(170,0,255,0.25);
}

/* ---- Button ---- */
.cc-btn {
  border-radius: 12px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(10,14,24,0.75);
  color: var(--cc-text);
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.cc-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(37,244,255,0.28);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}
.cc-btn.primary {
  border-color: rgba(255,46,166,0.30);
}
.cc-btn.primary:hover {
  box-shadow: 0 0 20px var(--cc-glow-magenta);
}

/* ---- Progress ---- */
.cc-progress {
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  overflow: hidden;
  height: 8px;
}
.cc-progress .cc-fill,
.cc-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cc-cyan), var(--cc-magenta));
  box-shadow: 0 0 16px rgba(37,244,255,0.18);
}

/* ---- Motion Layer — subtle lift + fade-in ---- */
@keyframes cc-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cc-card {
  animation: cc-fade-up 280ms ease both;
}

/* stagger cards in the grid */
.dashboard-grid .cc-card:nth-child(1) { animation-delay: 0ms; }
.dashboard-grid .cc-card:nth-child(2) { animation-delay: 40ms; }
.dashboard-grid .cc-card:nth-child(3) { animation-delay: 80ms; }
.dashboard-grid .cc-card:nth-child(4) { animation-delay: 120ms; }
.dashboard-grid .cc-card:nth-child(5) { animation-delay: 160ms; }
.dashboard-grid .cc-card:nth-child(6) { animation-delay: 200ms; }
.dashboard-grid .cc-card:nth-child(7) { animation-delay: 240ms; }
.dashboard-grid .cc-card:nth-child(8) { animation-delay: 280ms; }

/* ---- Theme Toggle Control ---- */
.cc-theme-toggle {
  position: relative;
}
.cc-theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(10,14,24,0.70);
  color: var(--cc-text, #e4efe9);
  cursor: pointer;
  font-size: 0.8rem;
  font-family: inherit;
  letter-spacing: 0.04em;
  transition: border-color 120ms ease, background 120ms ease;
  white-space: nowrap;
}
.cc-theme-btn:hover {
  border-color: rgba(37,244,255,0.28);
  background: rgba(37,244,255,0.05);
}
.cc-theme-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 130px;
  background: rgba(8,12,22,0.96);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
  z-index: 500;
}
.cc-theme-menu.open {
  display: flex;
}
.cc-theme-opt {
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(228,239,233,0.70);
  cursor: pointer;
  font-size: 0.82rem;
  font-family: inherit;
  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
.cc-theme-opt:hover {
  background: rgba(37,244,255,0.06);
  color: var(--cc-cyan);
  border-color: rgba(37,244,255,0.14);
}
.cc-theme-opt.active {
  background: rgba(255,46,166,0.07);
  color: var(--cc-magenta);
  border-color: rgba(255,46,166,0.22);
}