/* =============================================
   MissionCentre — Trading Journal
   Cyberpunk Neon Theme Override
   ============================================= */

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

/* ── Color System ───────────────────────────── */
:root {
  --bg:              #03050d;
  --bg2:             #060b18;
  --bg3:             #0b1527;
  --bg4:             #101e38;
  --border:          #152038;
  --border2:         #1c2e52;
  --text:            #dde9ff;
  --text2:           #4d6a9a;
  --text3:           #253654;
  --accent:          #00d4ff;
  --accent-hover:    #00b2d9;
  --green:           #00f07a;
  --green-bg:        rgba(0, 240, 122, 0.07);
  --red:             #ff2255;
  --red-bg:          rgba(255, 34, 85, 0.07);
  --yellow:          #ffc400;
  --yellow-bg:       rgba(255, 196, 0, 0.08);
  --purple:          #9f5cff;

  --glow-green:  0 0 14px rgba(0, 240, 122, 0.45);
  --glow-red:    0 0 14px rgba(255, 34, 85, 0.45);
  --glow-cyan:   0 0 14px rgba(0, 212, 255, 0.45);
}

/* ── Background grid texture ─────────────────── */
body {
  background: var(--bg);
  background-image:
    linear-gradient(rgba(0, 212, 255, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.012) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ── Sidebar ─────────────────────────────────── */
.sidebar {
  background: linear-gradient(180deg, #040811 0%, #060b18 100%);
  border-right: 1px solid var(--border);
}

.sidebar-logo h1 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 20px rgba(0, 212, 255, 0.55);
}

.sidebar-footer {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text3);
  letter-spacing: 0.5px;
}

.nav-item {
  font-size: 12.5px;
  letter-spacing: 0.2px;
}

.nav-item:hover {
  background: rgba(0, 212, 255, 0.05);
  color: var(--text);
}

.nav-item.active {
  background: rgba(0, 212, 255, 0.07);
  color: var(--accent);
  border-left: 2px solid var(--accent);
  box-shadow: inset 6px 0 20px rgba(0, 212, 255, 0.04);
  padding-left: 14px;
}

/* ── Topbar ──────────────────────────────────── */
.topbar {
  background: rgba(3, 5, 13, 0.97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  position: relative;
}

.topbar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0, 212, 255, 0.4) 50%, transparent 100%);
}

.topbar-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 16px rgba(0, 212, 255, 0.55);
}

/* ── Cards ───────────────────────────────────── */
.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.18), transparent);
  pointer-events: none;
}

/* ── Stat Cards ──────────────────────────────── */
.stat-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.35;
}

.stat-card:hover {
  border-color: rgba(0, 212, 255, 0.22);
  box-shadow: 0 0 28px rgba(0, 212, 255, 0.06);
}

.stat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text2);
}

.stat-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  font-weight: 700;
}

.stat-value.green {
  color: var(--green);
  text-shadow: var(--glow-green);
}

.stat-value.red {
  color: var(--red);
  text-shadow: var(--glow-red);
}

.stat-value.blue {
  color: var(--accent);
  text-shadow: var(--glow-cyan);
}

.stat-value.sub {
  font-size: 13px;
  color: var(--text2);
  text-shadow: none;
}

/* ── Card title labels ───────────────────────── */
.card-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text2);
}

/* ── Data Table ──────────────────────────────── */
.data-table {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
}

.data-table th {
  background: rgba(0, 212, 255, 0.03);
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 1.2px;
  border-bottom: 1px solid var(--border);
}

.data-table td {
  border-bottom: 1px solid rgba(21, 32, 56, 0.7);
  color: var(--text);
}

.data-table tbody tr:hover td {
  background: rgba(0, 212, 255, 0.03);
}

/* ── Badges ──────────────────────────────────── */
.badge-green {
  background: rgba(0, 240, 122, 0.1);
  color: var(--green);
  box-shadow: 0 0 6px rgba(0, 240, 122, 0.18);
}

.badge-red {
  background: rgba(255, 34, 85, 0.1);
  color: var(--red);
  box-shadow: 0 0 6px rgba(255, 34, 85, 0.18);
}

.badge-blue {
  background: rgba(0, 212, 255, 0.1);
  color: var(--accent);
  box-shadow: 0 0 6px rgba(0, 212, 255, 0.18);
}

.badge-yellow {
  background: rgba(255, 196, 0, 0.1);
  color: var(--yellow);
  box-shadow: 0 0 6px rgba(255, 196, 0, 0.18);
}

/* ── Buttons ─────────────────────────────────── */
.btn-primary {
  background: transparent;
  color: var(--accent);
  border: 1px solid rgba(0, 212, 255, 0.45);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.08), inset 0 0 10px rgba(0, 212, 255, 0.03);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.4px;
}

.btn-primary:hover {
  background: rgba(0, 212, 255, 0.1);
  border-color: var(--accent);
  box-shadow: 0 0 22px rgba(0, 212, 255, 0.25), inset 0 0 14px rgba(0, 212, 255, 0.07);
  color: #fff;
}

.btn-ghost {
  background: transparent;
  color: var(--text2);
  border: 1px solid var(--border2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.3px;
}

.btn-ghost:hover {
  background: rgba(0, 212, 255, 0.05);
  color: var(--accent);
  border-color: rgba(0, 212, 255, 0.3);
}

.btn-ghost.active {
  background: rgba(0, 212, 255, 0.07);
  color: var(--accent);
  border-color: rgba(0, 212, 255, 0.4);
}

/* ── Tabs ────────────────────────────────────── */
.tabs {
  border-bottom-color: var(--border);
}

.tab {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.5px;
}

.tab:hover { color: var(--text); }

.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.4);
}

/* ── Form Elements ───────────────────────────── */
label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text2);
}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="file"],
select,
textarea {
  background: var(--bg3);
  border-color: var(--border2);
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.1);
}

/* ── Modals ──────────────────────────────────── */
.modal-overlay {
  background: rgba(0, 0, 0, 0.8);
}

.modal {
  background: var(--bg2);
  border: 1px solid var(--border2);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 212, 255, 0.04);
}

.modal-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
}

.modal-close {
  color: var(--text2);
  font-size: 20px;
}

.modal-close:hover { color: var(--accent); }

/* ── Trade detail section buttons ────────────── */
.detail-section-btn {
  background: rgba(0, 212, 255, 0.04) !important;
  border: 1px solid var(--border) !important;
  color: var(--accent) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11.5px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

.detail-section-btn:hover {
  background: rgba(0, 212, 255, 0.08) !important;
  border-color: rgba(0, 212, 255, 0.35) !important;
  box-shadow: 0 0 14px rgba(0, 212, 255, 0.1) !important;
}

/* ── Notion sync status ──────────────────────── */
#notion-sync-status {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.5px !important;
}

/* ── Scrollbar ───────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 212, 255, 0.3); }

/* ── Paste drop zone ─────────────────────────── */
div[style*="2px dashed"] {
  border-color: rgba(0, 212, 255, 0.2) !important;
  background: rgba(0, 212, 255, 0.02) !important;
}

div[style*="2px dashed"]:hover {
  border-color: rgba(0, 212, 255, 0.4) !important;
  background: rgba(0, 212, 255, 0.04) !important;
}

/* ── Divider ─────────────────────────────────── */
.divider {
  border-top-color: var(--border);
}

/* ── Trade calendar ──────────────────────────── */
#trade-calendar { font-family: 'JetBrains Mono', monospace; }

/* ── Spinner ─────────────────────────────────── */
.spinner {
  border-color: var(--border);
  border-top-color: var(--accent);
}

/* ── Chart period toggle buttons fix ─────────── */
#chart-period-btns .btn.active {
  background: rgba(0, 212, 255, 0.07);
  color: var(--accent);
  border-color: rgba(0, 212, 255, 0.4);
}

/* ── Mobile: keep grid readable ──────────────── */
@media (max-width: 768px) {
  .topbar-title { letter-spacing: 1.5px; font-size: 11px; }
  .stat-value { font-size: 18px; }
  .data-table { font-size: 11px; }

  /* Trade calendar gets its own full row below the two donuts */
  .donuts-calendar-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .donuts-calendar-grid .trade-calendar-card {
    grid-column: 1 / -1;
  }
}