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

:root,
[data-theme="dark"] {
  --bg-base:            #0A0C0F;
  --bg-raised:          #0F1217;
  --bg-float:           #141820;
  --bg-input:           #141820;
  --surface-default:    #1E2430;
  --surface-raised:     #242B3A;
  --surface-sunken:     #1A1F2A;
  --bg-overlay:         rgba(0,0,0,0.65);
  --border-subtle:      #1E2430;
  --border-default:     #2A3245;
  --border-strong:      #3D4A62;
  --border-focus:       #2DD4BF;
  --brand-primary:      #2DD4BF;
  --brand-hover:        #14B8A6;
  --brand-active:       #0D9488;
  --brand-ghost:        rgba(45,212,191,0.10);
  --accent-primary:     #818CF8;
  --accent-ghost:       rgba(129,140,248,0.12);
  --text-primary:       #F0F3FA;
  --text-secondary:     #C8D0E2;
  --text-tertiary:      #8A94A8;
  --text-muted:         #5A6475;
  --color-bull:         #22C55E;
  --color-bull-bg:      rgba(34,197,94,0.08);
  --color-bear:         #EF4444;
  --color-bear-bg:      rgba(239,68,68,0.08);
  --color-warn:         #F59E0B;
  --color-warn-bg:      rgba(245,158,11,0.08);
  --color-info:         #3B82F6;
  --color-info-bg:      rgba(59,130,246,0.08);
  --shadow-sm:          0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:          0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:          0 12px 40px rgba(0,0,0,0.6);
  --font-sans:          'DM Sans', system-ui, sans-serif;
  --font-mono:          'IBM Plex Mono', 'Fira Code', monospace;
}

[data-theme="light"] {
  /* ── Background layers ─────────────────────────────────────────── */
  --bg-base:            #F0F4F8;
  --bg-raised:          #FFFFFF;
  --bg-float:           #FFFFFF;
  --bg-input:           #FFFFFF;
  --surface-default:    #FFFFFF;
  --surface-raised:     #F5F7FF;
  --surface-sunken:     #EBEEf8;
  --bg-overlay:         rgba(15,22,35,0.40);

  /* ── Borders ───────────────────────────────────────────────────── */
  --border-subtle:      #D4D9E8;
  --border-default:     #C0CADC;
  --border-strong:      #8896B4;
  --border-focus:       #0D9488;

  /* ── Brand ─────────────────────────────────────────────────────── */
  --brand-primary:      #0D9488;
  --brand-hover:        #0F766E;
  --brand-active:       #115E59;
  --brand-ghost:        rgba(13,148,136,0.09);

  /* ── Accent ────────────────────────────────────────────────────── */
  --accent-primary:     #4F46E5;
  --accent-ghost:       rgba(79,70,229,0.08);

  /* ── Text ──────────────────────────────────────────────────────── */
  --text-primary:       #0D1526;
  --text-secondary:     #2A3352;
  --text-tertiary:      #5E6B8A;
  --text-muted:         #8E9AB8;

  /* ── Semantic colors ───────────────────────────────────────────── */
  --color-bull:         #15803D;
  --color-bull-bg:      rgba(21,128,61,0.08);
  --color-bear:         #C81E1E;
  --color-bear-bg:      rgba(200,30,30,0.08);
  --color-warn:         #92400E;
  --color-warn-bg:      rgba(146,64,14,0.08);
  --color-info:         #1D4ED8;
  --color-info-bg:      rgba(29,78,216,0.08);

  /* ── Shadows — layered for depth ───────────────────────────────── */
  --shadow-sm:          0 1px 2px rgba(15,22,35,0.06), 0 1px 4px rgba(15,22,35,0.04);
  --shadow-md:          0 2px 8px rgba(15,22,35,0.07), 0 6px 20px rgba(15,22,35,0.08);
  --shadow-lg:          0 8px 24px rgba(15,22,35,0.10), 0 20px 48px rgba(15,22,35,0.12);

  /* ── Glass effect helpers ──────────────────────────────────────── */
  --glass-blur:         blur(16px) saturate(180%);
  --glass-blur-sm:      blur(8px) saturate(160%);
  --glass-border:       rgba(255,255,255,0.70);
  --glass-bg:           rgba(255,255,255,0.72);
  --glass-bg-strong:    rgba(255,255,255,0.88);

  /* ── Gradient backgrounds ──────────────────────────────────────── */
  --gradient-page:      linear-gradient(135deg, #EAF0F5 0%, #E4EDF5 40%, #EBF0F8 100%);
  --gradient-card:      linear-gradient(145deg, rgba(255,255,255,0.95) 0%, rgba(248,250,255,0.88) 100%);
  --gradient-sidebar:   linear-gradient(180deg, #0F766E 0%, #0D6B64 30%, #0A5E58 65%, #095550 100%);
  --gradient-header:    linear-gradient(90deg, rgba(255,255,255,0.98) 0%, rgba(250,253,255,0.97) 100%);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg-base:#F0F4F8; --bg-raised:#FFFFFF; --bg-float:#FFFFFF;
    --bg-input:#FFFFFF; --surface-default:#FFFFFF;
    --surface-raised:#F5F7FF; --surface-sunken:#EBEEF8;
    --bg-overlay:rgba(15,22,35,0.40); --border-subtle:#D4D9E8;
    --border-default:#C0CADC; --border-strong:#8896B4;
    --border-focus:#0D9488; --brand-primary:#0D9488; --brand-hover:#0F766E;
    --brand-active:#115E59; --brand-ghost:rgba(13,148,136,0.09);
    --accent-primary:#4F46E5; --accent-ghost:rgba(79,70,229,0.08);
    --text-primary:#0D1526; --text-secondary:#2A3352; --text-tertiary:#5E6B8A;
    --text-muted:#8E9AB8; --color-bull:#15803D; --color-bull-bg:rgba(21,128,61,0.08);
    --color-bear:#C81E1E; --color-bear-bg:rgba(200,30,30,0.08);
    --color-warn:#92400E; --color-warn-bg:rgba(146,64,14,0.08);
    --color-info:#1D4ED8; --color-info-bg:rgba(29,78,216,0.08);
    --shadow-sm:0 1px 2px rgba(15,22,35,0.06),0 1px 4px rgba(15,22,35,0.04);
    --shadow-md:0 2px 8px rgba(15,22,35,0.07),0 6px 20px rgba(15,22,35,0.08);
    --shadow-lg:0 8px 24px rgba(15,22,35,0.10),0 20px 48px rgba(15,22,35,0.12);
    --glass-blur:blur(16px) saturate(180%); --glass-blur-sm:blur(8px) saturate(160%);
    --glass-border:rgba(255,255,255,0.70); --glass-bg:rgba(255,255,255,0.72);
    --glass-bg-strong:rgba(255,255,255,0.88);
    --gradient-page:linear-gradient(135deg,#EAF0F5 0%,#E4EDF5 40%,#EBF0F8 100%);
    --gradient-card:linear-gradient(145deg,rgba(255,255,255,0.95) 0%,rgba(248,250,255,0.88) 100%);
    --gradient-sidebar:linear-gradient(180deg,#0F766E 0%,#0D6B64 30%,#0A5E58 65%,#095550 100%);
    --gradient-header:linear-gradient(90deg,rgba(255,255,255,0.98) 0%,rgba(250,253,255,0.97) 100%);
  }
}

html { font-family: var(--font-sans); }
body { background-color: var(--bg-base); color: var(--text-primary); }

/* ── Global scrollbar — dark (default) ──────────────────────────── */
:root,
[data-theme="dark"] {
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) var(--bg-raised);
}
:root::-webkit-scrollbar,
[data-theme="dark"] ::-webkit-scrollbar,
html::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
:root::-webkit-scrollbar-track,
[data-theme="dark"] ::-webkit-scrollbar-track,
html::-webkit-scrollbar-track {
  background: var(--bg-raised);
}
:root::-webkit-scrollbar-thumb,
[data-theme="dark"] ::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: 4px;
  border: 2px solid var(--bg-raised);
}
:root::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover,
html::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
}
:root::-webkit-scrollbar-corner,
[data-theme="dark"] ::-webkit-scrollbar-corner,
html::-webkit-scrollbar-corner {
  background: var(--bg-raised);
}

/* ── .custom-scrollbar — dark overrides ─────────────────────────── */
[data-theme="dark"] .custom-scrollbar {
  scrollbar-color: var(--border-default) var(--surface-sunken);
}
[data-theme="dark"] .custom-scrollbar::-webkit-scrollbar-track {
  background: var(--surface-sunken);
  border-radius: 9999px;
}
[data-theme="dark"] .custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border: 1px solid var(--surface-sunken);
  border-radius: 9999px;
}
[data-theme="dark"] .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
}

/* ── .oc-table-wrap — dark overrides ────────────────────────────── */
[data-theme="dark"] .oc-table-wrap {
  scrollbar-color: var(--border-default) transparent;
}
[data-theme="dark"] .oc-table-wrap::-webkit-scrollbar-track {
  background: transparent;
}
[data-theme="dark"] .oc-table-wrap::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: 3px;
}
[data-theme="dark"] .oc-table-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
}

/* ── Trading semantic badges ─────────────── */
.badge-bull {
  background: var(--color-bull-bg); color: var(--color-bull);
  border: 0.5px solid rgba(34,197,94,0.25); font-family: var(--font-mono);
  font-size: 10px; padding: 2px 7px; border-radius: 3px;
  letter-spacing: .04em; display: inline-flex;
}
.badge-bear {
  background: var(--color-bear-bg); color: var(--color-bear);
  border: 0.5px solid rgba(239,68,68,0.25); font-family: var(--font-mono);
  font-size: 10px; padding: 2px 7px; border-radius: 3px;
  letter-spacing: .04em; display: inline-flex;
}
.badge-warn {
  background: var(--color-warn-bg); color: var(--color-warn);
  font-family: var(--font-mono); font-size: 10px;
  padding: 2px 7px; border-radius: 3px; display: inline-flex;
}
.badge-brand {
  background: var(--brand-ghost); color: var(--brand-primary);
  border: 0.5px solid rgba(45,212,191,0.3); font-family: var(--font-mono);
  font-size: 10px; padding: 2px 7px; border-radius: 3px; display: inline-flex;
}

/* ── Mono data values ────────────────────── */
.data-val      { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--text-primary); }
.data-val-bull { font-family: var(--font-mono); font-weight: 600; color: var(--color-bull); }
.data-val-bear { font-family: var(--font-mono); font-weight: 600; color: var(--color-bear); }
.data-val-warn { font-family: var(--font-mono); font-weight: 600; color: var(--color-warn); }

/* ── SIT card ────────────────────────────── */
/* Targets both explicit .sit-card and the Tailwind card pattern used in views */
.sit-card,
.rounded-2xl.border-sit-border.bg-surface {
  position: relative; /* required for ::before accent line */
  /* Subtle gradient lift */
  background-image: linear-gradient(
    160deg,
    var(--surface-raised) 0%,
    var(--surface-default) 60%
  );
  /* Layered shadow: ambient + directional + inset glass edge */
  box-shadow:
    0 1px 2px rgba(0,0,0,0.06),
    0 4px 12px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.06);
  transition:
    transform 0.18s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

/* Top-edge brand accent line — fades in on hover (excluded from overflow-hidden cards) */
.sit-card:not(.overflow-hidden)::before,
.rounded-2xl.border-sit-border.bg-surface:not(.overflow-hidden)::before {
  content: '';
  position: absolute;
  top: 0; left: 16px; right: 16px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--brand-primary) 40%,
    var(--brand-primary) 60%,
    transparent 100%
  );
  opacity: 0;
  border-radius: 1px;
  transition: opacity 0.18s ease;
}

.sit-card:hover,
.rounded-2xl.border-sit-border.bg-surface:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.08),
    0 8px 24px rgba(0,0,0,0.14),
    0 0 0 1px var(--border-strong),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.sit-card:not(.overflow-hidden):hover::before,
.rounded-2xl.border-sit-border.bg-surface:not(.overflow-hidden):hover::before {
  opacity: 0.7;
}

/* Dark-mode: brand teal glow on hover */
[data-theme="dark"] .sit-card:hover,
[data-theme="dark"] .rounded-2xl.border-sit-border.bg-surface:hover {
  box-shadow:
    0 2px 4px rgba(0,0,0,0.3),
    0 8px 28px rgba(0,0,0,0.45),
    0 0 20px rgba(45,212,191,0.06),
    0 0 1px var(--brand-primary),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Light-mode card overrides are in light-theme.css (loaded after this file) */

/* ── SIT input ───────────────────────────── */
.sit-input {
  background: var(--bg-input); border: 1px solid var(--border-default);
  border-radius: 6px; color: var(--text-secondary); font-family: var(--font-sans);
  font-size: 13px; padding: 7px 10px; outline: none;
  transition: border-color .12s; width: 100%;
}
.sit-input:focus { border-color: var(--border-focus); }
.sit-input::placeholder { color: var(--text-muted); }

/* ── SIT buttons ─────────────────────────── */
.sit-btn-primary {
  background: var(--brand-primary); color: #fff; border: none;
  border-radius: 6px; font-family: var(--font-sans); font-size: 12px;
  font-weight: 600; padding: 7px 16px; cursor: pointer; transition: background .12s;
}
.sit-btn-primary:hover { background: var(--brand-hover); }

.sit-btn-ghost {
  background: var(--brand-ghost); color: var(--brand-primary);
  border: 1px solid rgba(45,212,191,0.3); border-radius: 6px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  padding: 7px 16px; cursor: pointer;
}

.sit-btn-bear {
  background: var(--color-bear-bg); color: var(--color-bear);
  border: 1px solid rgba(239,68,68,0.25); border-radius: 6px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  padding: 7px 16px; cursor: pointer;
}

.sit-btn-secondary {
  background: transparent; color: var(--text-secondary);
  border: 1px solid var(--border-default); border-radius: 6px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  padding: 7px 16px; cursor: pointer; transition: background .12s;
}
.sit-btn-secondary:hover { background: var(--surface-raised); }

/* ── Option chain table ──────────────────── */
.oc-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 11px; }
.oc-table th {
  padding: 6px 8px; font-size: 8px; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 500;
  border-bottom: 1px solid var(--border-default);
  text-align: center; color: var(--text-muted);
}
.oc-table td {
  padding: 7px 8px; text-align: center;
  border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary);
}
.oc-table .oc-calls-hdr { color: var(--color-bull); background: var(--color-bull-bg); }
.oc-table .oc-puts-hdr  { color: var(--color-bear); background: var(--color-bear-bg); }
.oc-table .oc-strike    { background: var(--surface-sunken); color: var(--text-primary); font-weight: 600; }
.oc-table .oc-atm       { background: var(--brand-ghost); }
.oc-table .oc-atm-strike{ background: var(--brand-ghost); color: var(--brand-primary); font-weight: 600; }