/* ============================================================
   OPIFY STRATEGY BUILDER THEME
   Scoped ONLY to .css-ifkflmnfjk
   ============================================================ */

.css-ifkflmnfjk {
  --theme-bg: #0b0f19;
  --theme-card: #131c2e;
  --theme-card-2: #0f172a;
  --theme-input: #0f172a;
  --theme-border: #1e293b;

  --theme-text: #f8fafc;
  --theme-text-secondary: #cbd5e1;
  --theme-text-muted: #94a3b8;
  --theme-text-subtle: #64748b;

  --theme-hover: #172033;
  --theme-table-hover: rgb(226 232 240 / 18%);
}

/* ============================================================
   LIGHT THEME VARIABLES
   ============================================================ */

.css-ifkflmnfjk.strategy-light {
  --theme-bg: #f8fafc;
  --theme-card: #ffffff;
  --theme-card-2: #f8fafc;
  --theme-input: #ffffff;
  --theme-border: #dbe2ea;

  --theme-text: #0f172a;
  --theme-text-secondary: #334155;
  --theme-text-muted: #64748b;
  --theme-text-subtle: #94a3b8;

  --theme-hover: #f1f5f9;
  --theme-table-hover: rgba(226, 232, 240, 0.65);
}

/* ============================================================
   ROOT BACKGROUND
   ============================================================ */

.css-ifkflmnfjk.strategy-light .bg-darkBg {
  background-color: var(--theme-bg) !important;
}

.css-ifkflmnfjk.strategy-light .bg-cardBg {
  background-color: var(--theme-card) !important;
}

.css-ifkflmnfjk.strategy-light .bg-slate-950 {
  background-color: var(--theme-card-2) !important;
}

.css-ifkflmnfjk.strategy-light .bg-slate-900 {
  background-color: var(--theme-input) !important;
}

.css-ifkflmnfjk.strategy-light .bg-slate-800 {
  background-color: #e2e8f0 !important;
}

/* ============================================================
   OPACITY BACKGROUNDS
   Use [class~="..."] because Tailwind slash classes
   are awkward to target directly.
   ============================================================ */

.css-ifkflmnfjk.strategy-light [class~="bg-slate-950/60"] {
  background-color: #f8fafc !important;
}

.css-ifkflmnfjk.strategy-light [class~="bg-slate-950/70"] {
  background-color: #0606060d !important;
}

.css-ifkflmnfjk.strategy-light [class~="bg-slate-900/80"] {
  background-color: #f1f5f9 !important;
}

.css-ifkflmnfjk.strategy-light [class~="bg-slate-900/70"] {
  background-color: #f8fafc !important;
}

.css-ifkflmnfjk.strategy-light [class~="bg-slate-900/60"] {
  background-color: #fffffff7 !important;
}

.css-ifkflmnfjk.strategy-light [class~="bg-slate-900/50"] {
  background-color: #f8fafc !important;
}

/* ============================================================
   BORDERS
   ============================================================ */

.css-ifkflmnfjk.strategy-light .border-cardBorder,
.css-ifkflmnfjk.strategy-light [class~="border-slate-800"],
.css-ifkflmnfjk.strategy-light [class~="border-slate-700"] {
  border-color: var(--theme-border) !important;
}

.css-ifkflmnfjk.strategy-light .border-cardBorder .entryRuleText{
    color: rgb(0 167 106) !important;
}
.css-ifkflmnfjk.strategy-light .border-cardBorder .exitRuleText{
    color: rgb(255 80 106) !important;
}

.css-ifkflmnfjk.strategy-light [class~="border-cardBorder/50"] {
  border-color: rgba(203, 213, 225, 0.75) !important;
}

/* ============================================================
   TEXT
   ============================================================ */

.css-ifkflmnfjk.strategy-light .text-white,
.css-ifkflmnfjk.strategy-light .text-white-400 {
  color: var(--theme-text) !important;
}

.css-ifkflmnfjk.strategy-light .text-white.css-yhflmfjkf{
    color: white !important;
}

.css-ifkflmnfjk.strategy-light .text-slate-100 {
  color: var(--theme-text) !important;
}

.css-ifkflmnfjk.strategy-light .text-slate-200 {
  color: var(--theme-text-secondary) !important;
}

.css-ifkflmnfjk.strategy-light .text-slate-300 {
  color: var(--theme-text-secondary) !important;
}

.css-ifkflmnfjk.strategy-light .text-slate-400 {
  color: var(--theme-text-muted) !important;
}
.css-ifkflmnfjk.strategy-light .text-slate-400.css-ikflopfffW{
    color: #fffffff7 !important;
}
.css-ifkflmnfjk.strategy-light .css-ikffyujfl{
    color: #ffffffd9 !important;
}

.css-ifkflmnfjk.strategy-light .text-slate-500 {
  color: var(--theme-text-subtle) !important;
}
.css-ifkflmnfjk.strategy-light .text-slate-500.css-ikflmkfE{
    color: #f44336a3 !important;
}
.css-ifkflmnfjk.strategy-light .bg-blue-600{
    color: white !important;
}
/* ============================================================
   INPUTS / SELECTS / TEXTAREA
   ============================================================ */

.css-ifkflmnfjk.strategy-light input,
.css-ifkflmnfjk.strategy-light select,
.css-ifkflmnfjk.strategy-light textarea {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

.css-ifkflmnfjk.strategy-light input::placeholder,
.css-ifkflmnfjk.strategy-light textarea::placeholder {
  color: #94a3b8 !important;
}

.css-ifkflmnfjk.strategy-light option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

/* ============================================================
   DATE INPUTS
   ============================================================ */

.css-ifkflmnfjk.strategy-light input[type="date"],
.css-ifkflmnfjk.strategy-light input[type="time"],
.css-ifkflmnfjk.strategy-light input[type="number"],
.css-ifkflmnfjk.strategy-light input[type="text"] {
  color-scheme: light;
}

/* ============================================================
   SAVE / SECONDARY BUTTONS
   ============================================================ */

.css-ifkflmnfjk.strategy-light button.bg-slate-800 {
  background-color: #e2e8f03b !important;
  color: #334155 !important;
  border-color: #cbd5e1 !important;
}

.css-ifkflmnfjk.strategy-light button.bg-slate-800:hover,
.css-ifkflmnfjk.strategy-light [class~="hover:bg-slate-800"]:hover {
  background-color: #cbd5e11a !important;
  border:1px solid #2196f37a !important;
}

.css-ifkflmnfjk.strategy-light [class~="hover:bg-slate-700"]:hover {
    background-color: #cbd5e11a !important;
    border:1px solid #2196f37a !important;
}

/* ============================================================
   STRATEGY LEG ROW HOVER
   strategy2.js creates:
   hover:bg-slate-900/40
   ============================================================ */

.css-ifkflmnfjk.strategy-light [class~="hover:bg-slate-900/40"]:hover {
  background-color: rgb(226 232 240 / 18%) !important;
}

/* ============================================================
   LEG BUILDER TABLE
   ============================================================ */

.css-ifkflmnfjk.strategy-light table {
  color: var(--theme-text-secondary);
}

.css-ifkflmnfjk.strategy-light thead {
  color: var(--theme-text-muted);
}

.css-ifkflmnfjk.strategy-light tbody {
  color: var(--theme-text-secondary);
}

/* ============================================================
   BACKTEST RESULT TABS
   ============================================================ */

.css-ifkflmnfjk.strategy-light .css-yhfjff {
    background: #e2e8f017 !important;
    border-color: #cbd5e1 !important;
}

.css-ifkflmnfjk.strategy-light .css-yhfjff button:not(.bg-blue-600) {
  color: #64748b !important;
}

.css-ifkflmnfjk.strategy-light .css-yhfjff button:not(.bg-blue-600):hover {
  color: #0f172a !important;
  background-color: #cbd5e1 !important;
}

.css-ifkflmnfjk.strategy-light #resultsSection > div:first-child {
    background-color: #f8fafc !important;

    background-image:
        linear-gradient(
            135deg,
            #eef6ff 0%,
            #ffffff 48%,
            #f1f5ff 100%
        ) !important;

    border-color: #bfdbfe !important;
}

/* ============================================================
   STRATEGY ENTRY / RANGE / TECHNICAL TABS
   ============================================================ */

.css-ifkflmnfjk.strategy-light button.text-slate-400 {
  color: #64748b !important;
}

.css-ifkflmnfjk.strategy-light button.text-slate-400:hover {
  color: #0f172a !important;
}

/* ============================================================
   INFO / HELPER DIVS
   ============================================================ */

.css-ifkflmnfjk.strategy-light [class~="bg-blue-500/10"],
.css-ifkflmnfjk.strategy-light [class~="bg-blue-600/10"] {
  background-color: #eff6ff !important;
}

.css-ifkflmnfjk.strategy-light [class~="bg-blue-600/20"] {
  background-color: #dbeafe !important;
}

.css-ifkflmnfjk.strategy-light [class~="bg-emerald-500/10"],
.css-ifkflmnfjk.strategy-light [class~="bg-emerald-600/10"] {
  background-color: #ecfdf5 !important;
}

.css-ifkflmnfjk.strategy-light [class~="bg-orange-500/10"] {
  background-color: #fff7ed !important;
}

.css-ifkflmnfjk.strategy-light [class~="bg-red-500/10"] {
  background-color: #fef2f2 !important;
}

/* ============================================================
   BACKTEST SUMMARY
   ============================================================ */

.css-ifkflmnfjk.strategy-light #backtestSummaryTab,
.css-ifkflmnfjk.strategy-light #backtestSummaryTab > div {
  color: var(--theme-text);
}

.css-ifkflmnfjk.strategy-light #backtestSummaryTab [class~="bg-slate-950/60"] {
  background-color: #ffffff !important;
}

.css-ifkflmnfjk.strategy-light #backtestSummaryTab [class~="bg-slate-900/70"] {
  background-color: #f8fafc !important;
}

/* ============================================================
   METRIC CARDS
   ============================================================ */

.css-ifkflmnfjk.strategy-light [id^="metric"] {
  color: var(--theme-text);
}

/* ============================================================
   CHART AREA
   ============================================================ */

.css-ifkflmnfjk.strategy-light .backtest-chart-card,
.css-ifkflmnfjk.strategy-light .backtest-chart-toolbar,
.css-ifkflmnfjk.strategy-light .equity-chart-wrapper {
  background-color: #ffffff !important;
  border-color: #dbe2ea !important;
}

.css-ifkflmnfjk.strategy-light .chart-select {
  background-color: #ffffff !important;
  color: #334155 !important;
  border-color: #cbd5e1 !important;
}

/* ============================================================
   TRADE LOGS
   ============================================================ */

.css-ifkflmnfjk.strategy-light .logs,
.css-ifkflmnfjk.strategy-light .trade-logs-table-wrapper {
  background-color: #ffffff !important;
  color: #334155 !important;
  border-color: #dbe2ea !important;
}

.css-ifkflmnfjk.strategy-light .trade-logs-table {
  color: #334155 !important;
}

.css-ifkflmnfjk.strategy-light .trade-logs-table thead {
  color: #64748b !important;
}

.css-ifkflmnfjk.strategy-light .trade-logs-table tbody {
  color: #334155 !important;
}

.css-ifkflmnfjk.strategy-light .trade-logs-table tr:hover {
  background-color: #f1f5f9 !important;
}

.css-ifkflmnfjk.strategy-light .trade-logs-table td {
  border-color: #e2e8f0 !important;
}
.css-ifkflmnfjk.strategy-light .trade-logs-table td .text-emerald-400{
    color: rgb(5 149 97) !important;
}
.css-ifkflmnfjk.strategy-light .trade-logs-table td .text-red-400{
    color: rgb(215 61 61) !important;
}

/* ============================================================
   CALENDAR
   ============================================================ */

.css-ifkflmnfjk.strategy-light .calendar,
.css-ifkflmnfjk.strategy-light .calendar-wrapper,
.css-ifkflmnfjk.strategy-light .calendar-toolbar {
  background-color: #ffffff !important;
  color: #334155 !important;
}

.css-ifkflmnfjk.strategy-light .calendar-month-title {
  color: #0f172a !important;
}

.css-ifkflmnfjk.strategy-light .calendar-weekdays {
  color: #64748b !important;
}

.css-ifkflmnfjk.strategy-light .calendar-nav-btn,
.css-ifkflmnfjk.strategy-light .calendar-select {
  background-color: #ffffff !important;
  color: #334155 !important;
  border-color: #cbd5e1 !important;
}

.css-ifkflmnfjk.strategy-light .calendar-nav-btn:hover {
  background-color: #f1f5f9 !important;
}

/* ============================================================
   CALENDAR DAY CARDS
   ============================================================ */

   .css-ifkflmnfjk.strategy-light #calendarGrid > * {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #334155 !important;

    border-color: #dbe2ea !important;
    box-shadow: none !important;
}


/* Calendar day text */
.css-ifkflmnfjk.strategy-light #calendarGrid .calendar-value.negative{
    color: #ff5762;
}
.css-ifkflmnfjk.strategy-light #calendarGrid .calendar-value.positive{
    color: #00b388;
}

/* Positive P&L */
.css-ifkflmnfjk.strategy-light #calendarGrid
[class*="profit"] {
    background: #f0fdf4 !important;
}


/* Negative P&L */
.css-ifkflmnfjk.strategy-light #calendarGrid
[class*="loss"] {
    background: #fef2f2 !important;
}


/* Hover */
.css-ifkflmnfjk.strategy-light #calendarGrid > *:hover {
    background: #f8fafc !important;
}

/* ============================================================
   PAYOFF / ADJUSTMENT / OTHER MODALS
   ============================================================ */

.css-ifkflmnfjk.strategy-light [id$="Modal"] > div {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #dbe2ea !important;
}

.css-ifkflmnfjk.strategy-light [id$="Modal"] [class~="bg-slate-900/60"],
.css-ifkflmnfjk.strategy-light [id$="Modal"] [class~="bg-slate-950/60"] {
  background-color: #f8fafc !important;
}

.css-ifkflmnfjk.strategy-light [id$="Modal"] .border-cardBorder {
  border-color: #dbe2ea !important;
}

.css-ifkflmnfjk.strategy-light [id$="Modal"] .text-white {
  color: #0f172a !important;
}

.css-ifkflmnfjk.strategy-light [id$="Modal"] .text-slate-300 {
  color: #334155 !important;
}

.css-ifkflmnfjk.strategy-light [id$="Modal"] .text-slate-400 {
  color: #64748b !important;
}

/* ============================================================
   MODAL OVERLAY
   Keep overlay slightly dark even in light theme.
   ============================================================ */

.css-ifkflmnfjk.strategy-light [id$="Modal"].fixed.inset-0 {
  background-color: rgba(15, 23, 42, 0.45) !important;
}

/* ============================================================
   TOGGLE BUTTON
   ============================================================ */

.css-ifkflmnfjk.strategy-light #strategyThemeToggle {
  background-color: #ffffff !important;
  color: #334155 !important;
  border-color: #cbd5e1 !important;
}

.css-ifkflmnfjk.strategy-light #strategyThemeToggle:hover {
  background-color: #f1f5f9 !important;
}

/* ============================================================
   BACKTEST TABS
   Active = Blue background + White text
   Inactive = Light gray background/text
   ============================================================ */



/* ACTIVE TAB */
.css-ifkflmnfjk.strategy-light
.css-yhfjff button.bg-blue-600 {
    background-color: #2563eb !important;
    background-image: none !important;

    color: #ffffff !important;

    border-color: #2563eb !important;

    font-weight: 600 !important;
}


/* ACTIVE TAB HOVER */
.css-ifkflmnfjk.strategy-light
.css-yhfjff button.bg-blue-600:hover {
    background-color: #1d4ed8 !important;
    color: #ffffff !important;
}


/* INACTIVE TABS */
.css-ifkflmnfjk.strategy-light
.css-yhfjff button:not(.bg-blue-600) {
    background-color: transparent !important;
    color: #475569 !important;
}


/* INACTIVE TAB HOVER */
.css-ifkflmnfjk.strategy-light
.css-yhfjff button:not(.bg-blue-600):hover {
    background-color: #cbd5e1 !important;
    color: #0f172a !important;
}