/*
 * rose-theme.css
 * Applies rose.trading design system to TradeLab
 * Colors: #0B0C15 bg, #1C1E2D cards, #998BFF purple, #5F5CFF blue, #E0E0E0 text
 */

/* ── Base ──────────────────────────────────────────────────────────────────── */
:root {
  --rose-bg:        #0B0C15;
  --rose-card:      #1C1E2D;
  --rose-purple:    #998BFF;
  --rose-blue:      #5F5CFF;
  --rose-text:      #E0E0E0;
  --rose-text-dim:  #9094A8;
  --rose-border:    #2A2D3E;
  --rose-green:     #1D9E75;
  --rose-red:       #E05555;
}

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

body {
  background: var(--rose-bg) !important;
  color: var(--rose-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  margin: 0;
}

/* ── Navigation ────────────────────────────────────────────────────────────── */
nav, header, .nav, .navbar, #nav {
  background: var(--rose-card) !important;
  border-bottom: 1px solid var(--rose-border) !important;
}

nav a, header a, .nav a {
  color: var(--rose-text) !important;
}

nav a:hover, header a:hover, .nav a:hover,
nav a.active, header a.active {
  color: var(--rose-purple) !important;
}

/* ── Cards & Containers ────────────────────────────────────────────────────── */
.card, .panel, .box, .container, .stat-card,
[class*="card"], [class*="panel"], [class*="box"],
table, .table-container {
  background: var(--rose-card) !important;
  border: 1px solid var(--rose-border) !important;
  border-radius: 8px !important;
}

/* ── Typography ────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  color: var(--rose-purple) !important;
}

p, span, label, td, th, li {
  color: var(--rose-text) !important;
}

.text-muted, .subtitle, .label, .caption,
[class*="muted"], [class*="secondary"] {
  color: var(--rose-text-dim) !important;
}

/* ── Tables ────────────────────────────────────────────────────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
}

thead, th {
  background: #13152080 !important;
  color: var(--rose-purple) !important;
  border-bottom: 1px solid var(--rose-border) !important;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

tbody tr {
  border-bottom: 1px solid var(--rose-border) !important;
}

tbody tr:hover {
  background: #1C1E2D88 !important;
}

td {
  color: var(--rose-text) !important;
}

/* ── Buttons — exclude calendar day cells ──────────────────────────────────── */
/* Only apply blue background to .btn class and action buttons, NOT .day buttons */
.btn, .pill.action, input[type="submit"], input[type="button"],
button.pill.action, button#clearDays, button#clearSelection,
button#resetAll, button#applyRange, button#clearRange,
button#includeSelection, button#excludeSelection,
button#moveBelowLine, button#clearScenario {
  background: var(--rose-blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 8px 16px !important;
  cursor: pointer !important;
  font-size: 13px !important;
  transition: opacity 0.15s !important;
}

button.pill.action:hover {
  opacity: 0.85 !important;
}

/* Calendar day cells — let JavaScript inline styles control the background */
button.day {
  background: unset;
  color: #f4f1ea !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 16px !important;
  padding: 12px !important;
}

button.day.empty {
  background: rgba(19,21,26,.62) !important;
  color: #696b70 !important;
}

/* Expand buttons on panels */
button.expand {
  background: var(--rose-card) !important;
  color: var(--rose-text) !important;
  border: 1px solid var(--rose-border) !important;
  border-radius: 999px !important;
  padding: 8px 11px !important;
  font-size: 12px !important;
}

button.expand:hover {
  border-color: var(--rose-purple) !important;
  color: #fff !important;
}

/* Close button in modal */
button.close {
  background: var(--rose-card) !important;
  color: var(--rose-text) !important;
  border: 1px solid var(--rose-border) !important;
}

/* ── Inputs ────────────────────────────────────────────────────────────────── */
input, select, textarea {
  background: #13152080 !important;
  border: 1px solid var(--rose-border) !important;
  border-radius: 6px !important;
  color: var(--rose-text) !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
}

input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--rose-purple) !important;
}

/* ── P&L Colors ────────────────────────────────────────────────────────────── */
.good { color: var(--rose-green) !important; }
.bad  { color: var(--rose-red) !important; }

/* ── Charts ────────────────────────────────────────────────────────────────── */
canvas {
  filter: brightness(1.05);
}

/* ── Scrollbar ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--rose-bg); }
::-webkit-scrollbar-thumb { background: var(--rose-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--rose-purple); }

/* ── Links ─────────────────────────────────────────────────────────────────── */
a { color: var(--rose-purple) !important; text-decoration: none !important; }
a:hover { color: var(--rose-blue) !important; }

/* ── Modal / Overlay ───────────────────────────────────────────────────────── */
.modal, .overlay, .dialog, [class*="modal"] {
  background: var(--rose-card) !important;
  border: 1px solid var(--rose-border) !important;
  border-radius: 12px !important;
}

.modal-backdrop, .overlay-bg {
  background: rgba(0, 0, 0, 0.7) !important;
}

/* ── Progress / Stats ──────────────────────────────────────────────────────── */
progress::-webkit-progress-bar { background: var(--rose-border); border-radius: 3px; }
progress::-webkit-progress-value { background: var(--rose-purple); border-radius: 3px; }

/* ── Misc ──────────────────────────────────────────────────────────────────── */
hr, .divider { border-color: var(--rose-border) !important; }
code, pre { background: #13152080 !important; color: var(--rose-purple) !important; }