/* 
 * Option Chain Premium Dark Mode Theme
 * Palette: User Defined JSON
 */

 :root {
    /* Backgrounds */
    --oc-bg-dark: #020202;      /* main */
    --oc-bg-card: #11151C;      /* row_alternate / panels */
    --oc-table-hover: #151A22;  /* row_hover */
    --oc-header-bg: #020202;
    --oc-time-col-bg: #0F131A;  /* time_column */

    /* Borders */
    --oc-border: #1F2633;       /* grid */
    --oc-active-border: #2F81F7; /* active.row_border */

    /* Typography */
    --oc-text-main: #E6EDF3;    /* text.primary */
    --oc-text-sec: #9BA3B4;     /* text.secondary */
    --oc-text-muted: #6B7280;   /* text.muted */
    --oc-text-inverse: #0B0E11; /* text.inverse */

    /* Signals (Bullish/Bearish) */
    --oc-signal-bull-bg: #0E3B2C;
    --oc-signal-bull-text: #00C076;
    
    --oc-signal-bear-bg: #3B1519;
    --oc-signal-bear-text: #F23645;

    --oc-signal-neutral-bg: #1A1F2B;
    --oc-signal-neutral-text: #9BA3B4;

    /* Status Colors (Text) */
    --oc-status-strong: #E6EDF3;
    --oc-status-neutral: #9BA3B4;
    --oc-status-avoid: #7A808F;
    --oc-status-stb: #2F81F7;
    --oc-status-mtt: #C9D1D9;

    /* Highlights (Positive/Warning/Negative) */
    --oc-highlight-pos-bg: #0F4C3A;
    --oc-highlight-pos-text: #0B0E11;
    
    --oc-highlight-warn-bg: #E0B400;
    --oc-highlight-warn-text: #0B0E11;
    
    --oc-highlight-neg-bg: #4A1C22;
    --oc-highlight-neg-text: #0B0E11;
    
    /* Legacy Mappings for other files */
    --oc-accent-green: var(--oc-signal-bull-text);
    --oc-accent-red: var(--oc-signal-bear-text);
    --oc-accent-yellow: var(--oc-highlight-warn-bg);
    --oc-strike-blue: var(--oc-status-stb);
}

/* ... (Global Styles Remained Unchanged) ... */

/* 
 * Subtle Background Overrides for SR Backtester 
 * Using User's "Signal" backgrounds for sections
 */
.table tbody td.bg-success-subtle {
    background-color: var(--oc-signal-bull-bg) !important; 
    color: var(--oc-text-main) !important;
    font-weight: 400;
}

.table tbody td.bg-danger-subtle {
    background-color: var(--oc-signal-bear-bg) !important;
    color: var(--oc-text-main) !important;
    font-weight: 400;
}

/* Ensure sticky columns match the basic card background */
.sticky-col {
    background-color: var(--oc-bg-card) !important;
    z-index: 5;
    border-left: 1px solid var(--oc-border) !important;
    border-right: 1px solid var(--oc-border) !important;
}

/* Global Adjustments */
body {
    background-color: var(--oc-bg-dark) !important;
    color: var(--oc-text-main) !important;
    font-family: 'Google Sans', 'Inter', sans-serif !important;
}

/* Table Container */
.table-responsive {
    background-color: var(--oc-bg-dark) !important;
}

/* Table Base Styling */
.table {
    background-color: var(--oc-bg-dark) !important;
    color: var(--oc-text-main) !important;
    border-color: var(--oc-border) !important;
    font-family: 'Google Sans', sans-serif !important; 
}

.table-bordered {
    border: 1px solid var(--oc-border) !important;
}

/* 
 * Header Styling 
 */
.table thead th {
    background-color: var(--oc-header-bg) !important;
    background: var(--oc-header-bg) !important;
    color: var(--oc-text-sec) !important; /* Secondary Text for headers */
    border-bottom: 1px solid var(--oc-border) !important;
    border-right: 1px solid var(--oc-border) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 11px !important;
    padding: 8px 4px !important;
    letter-spacing: 0.5px !important;
}

/* Remove Specific Header Colors */
.table thead th.resistance,
.table thead th.support,
.table thead th.bg-danger,
.table thead th.bg-success,
.table thead th.bg-primary,
.table thead th.bg-opacity-10,
.table thead th.custom-blue {
    background-color: var(--oc-header-bg) !important;
    background: var(--oc-header-bg) !important;
    color: var(--oc-text-main) !important;
    border: 1px solid var(--oc-border) !important;
}

/* Strike Header Specific */
.table thead th.strike-col-header {
    color: var(--oc-strike-blue) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
}

/* 
 * Top Stats Header Styling (New)
 */
.stats-header {
    background-color: var(--oc-bg-card) !important;
    color: var(--oc-text-main) !important;
    padding: 12px 8px !important;
    vertical-align: middle !important;
    border: 1px solid var(--oc-border) !important;
}

.stats-header h6 {
    color: var(--oc-text-main) !important;
    font-size: 11px !important;
    letter-spacing: 0.5px;
}

.stats-header p, 
.stats-header .small {
    color: var(--oc-text-sec) !important;
    font-size: 10px !important;
}

/* Call Side - Red Accent */
.call-header {
    border-top: 2px solid var(--oc-accent-red) !important;
}

/* Put Side - Green Accent */
.put-header {
    border-top: 2px solid var(--oc-accent-green) !important;
}

/* Spot Price / Center */
.spot-price-header {
    background-color: var(--oc-bg-card) !important;
    color: var(--oc-text-main) !important;
    border: 1px solid var(--oc-border) !important;
    border-top: 2px solid var(--oc-strike-blue) !important;
    vertical-align: middle !important;
}

.spot-price-header .date-display {
    color: var(--oc-text-sec) !important;
}


/* 
 * Table Body Styling
 */
.table tbody td {
    background-color: var(--oc-bg-dark); /* Allow inline overrides */
    border-color: var(--oc-border) !important;
    color: var(--oc-text-main) !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    padding: 5px 2px !important;
    line-height: 1.3 !important;
    vertical-align: middle !important;
}

/* Explicit fallback for non-styled cells */
.table tbody td:not([style*="background"]) {
    background-color: var(--oc-bg-dark) !important;
}

/* Muted Text / Percentages */
.table tbody td .percentage, 
.table tbody td small {
    /* DEFAULT: Brighter grey for visibility on dark bg */
    color: var(--oc-text-sec) !important;
}

/* 
 * CRITICAL: When the cell has a background color (inline style), 
 * the text color is usually Black or White. 
 * The percentage MUST inherit this color to be readable.
 */
.table tbody td[style*="background"] .percentage,
.table tbody td[style*="background"] small {
    color: inherit !important;
    opacity: 0.8; /* Slight dim to distinguish from main number, but keep readable */
}

/* 
 * ATM / Spot Price Line Fix
 */
tr[style*="border-bottom: 2px solid red"] {
    border-bottom: 2px solid var(--oc-accent-red) !important;
    position: relative;
    z-index: 10;
}


/* Hover Effect */
/* Make sure the hover is distinct against the dark background */
.table-hover tbody tr:hover {
    background-color: #222b36 !important; /* Brighter Slate for visibility */
    cursor: pointer;
}

/* Ensure hover applies even to cells, BUT allow critical highlights to remain visible */
.table-hover tbody tr:hover td {
    background-color: #222b36 !important;
}

/* Keep highlights visible but slightly tint them to show hover state */
.table-hover tbody tr:hover td[style*="background"] {
   filter: brightness(1.1); /* Brighten highlighted cells on hover instead of replacing bg */
   /* Note: background-color is NOT overridden here so the Red/Green/Yellow stays */
}

/* Break Out / Break Down Styling */
td:contains("BREAK OUT"), 
td:contains("BREAK DOWN") {
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    font-size: 11px !important;
    color: var(--oc-text-sec) !important; /* Muted for these labels */
}

/* Text Colors */
.text-danger { color: var(--oc-accent-red) !important; }
.text-success { color: var(--oc-accent-green) !important; }
.text-white { color: var(--oc-text-main) !important; }
.text-dark { color: var(--oc-text-main) !important; }

/* Strike Price Column Styling */
.table tbody td.strike-col { 
    background-color: var(--oc-bg-card) !important;
    font-weight: 700 !important;
    color: var(--oc-strike-blue) !important;
    font-size: 13px !important;
    border-right: 1px solid var(--oc-border) !important;
    border-left: 1px solid var(--oc-border) !important;
}

/* Top Stats Header - Legacy Support Overrides if needed */
.bg-primary.bg-opacity-10 {
    background-color: var(--oc-bg-card) !important;
    border-bottom: 1px solid var(--oc-border) !important;
    padding: 12px !important;
}

/* Buttons */
.btn-dark {
    background-color: #21262d !important;
    border-color: #30363d !important;
    color: var(--oc-text-main) !important;
    font-size: 11px !important;
    padding: 4px 8px !important;
}

.btn-outline-dark {
    color: var(--oc-text-main) !important;
    border-color: var(--oc-border) !important;
    background-color: transparent !important;
    font-size: 11px !important;
    padding: 4px 8px !important;
}

.btn-outline-dark:hover, .btn-outline-dark:active, .btn-outline-dark.active {
    background-color: var(--oc-border) !important;
    color: white !important;
    border-color: var(--oc-border) !important;
}

.btn-success, .btn-buy {
    background-color: var(--oc-strike-blue) !important; /* Use Blue for Buy/Action */
    border: none !important;
    color: white !important;
    font-size: 10px !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

.btn-danger, .btn-sell {
    background-color: var(--oc-accent-red) !important;
    border: none !important;
    color: white !important;
    font-size: 10px !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

/* Global Bootstrap Overrides for Dark Mode */
.card {
    background-color: var(--oc-bg-card) !important;
    border: 1px solid var(--oc-border) !important;
    color: var(--oc-text-main) !important;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--oc-bg-dark); 
}
 
/* 
 * Subtle Background Overrides for SR Backtester 
 * Replacing Bootstrap defaults with dark-mode friendly tints
 */
/* 
 * Subtle Background Overrides for SR Backtester 
 * Replacing Bootstrap defaults with clean Colored Text
 */
/* 
 * Subtle Background Overrides for SR Backtester 
 * Replacing Bootstrap defaults with Muted, Low-Opacity Tints
 */
.table tbody td.bg-success-subtle {
    background-color: rgba(0, 192, 118, 0.08) !important; /* Very subtle Green tint */
    color: var(--oc-text-main) !important; /* White Text */
    font-weight: 400;
}

.table tbody td.bg-danger-subtle {
    background-color: rgba(242, 54, 69, 0.08) !important; /* Very subtle Red tint */
    color: var(--oc-text-main) !important; /* White Text */
    font-weight: 400;
}

/* Ensure sticky columns match the basic card background */
.sticky-col {
    background-color: var(--oc-bg-card) !important;
    z-index: 5;
    border-left: 1px solid var(--oc-border) !important;
    border-right: 1px solid var(--oc-border) !important;
}

/* 
 * Deep Analysis Overrides
 * Mapping legacy deep-analysis.css classes to User Palette
 */
.bg-dark-blue {
    background-color: var(--oc-header-bg) !important; /* #11151C */
    color: var(--oc-text-main) !important;
    border-bottom: 2px solid var(--oc-border) !important;
}

.bg-dark-red {
    background-color: var(--oc-signal-bear-bg) !important; /* #3B1519 */
    color: var(--oc-text-main) !important;
    border-bottom: 2px solid var(--oc-signal-bear-text) !important;
}

.bg-dark-marroon {
    background-color: var(--oc-highlight-neg-bg) !important; /* #4A1C22 */
    color: var(--oc-text-main) !important;
}

.bg-red {
    background-color: var(--oc-signal-bear-bg) !important;
    color: var(--oc-signal-bear-text) !important;
}

.bg-green {
    background-color: var(--oc-signal-bull-bg) !important;
    color: var(--oc-signal-bull-text) !important;
}

/* Deep Analysis Text Colors */
.text-yellow, .text-yellow td { color: var(--oc-accent-yellow) !important; }
.text-blue, .text-blue td { color: var(--oc-strike-blue) !important; }
.text-green, .text-green td { color: var(--oc-accent-green) !important; }
.text-red, .text-red td { color: var(--oc-accent-red) !important; }
.text-orange, .text-orange td { color: #FF5733 !important; }

/* Ensure Summary Table Headers are dark */
.bg-dark-blue h3, .bg-dark-red h3, .bg-dark-marroon h3 {
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    margin: 0;
    padding: 10px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* UX Polish for Deep Analysis Containers */
.bg-dark-blue, .bg-dark-red, .bg-dark-marroon {
    border-radius: 4px 4px 0 0; /* Rounded top corners for headers */
}

/* Remove double borders in nested tables */
.deep-analysis-wrapper .table {
    margin-bottom: 0;
}

/* Dark Mode Modal Text Fixes */
.modal-content,
.modal-body,
.read-me-content,
.read-me-content h1,
.read-me-content h2,
.read-me-content h3,
.read-me-content h4,
.read-me-content h5,
.read-me-content h6,
.read-me-content p,
.read-me-content span,
.read-me-content div {
    color: var(--oc-text-main) !important;
}

/* Ensure settings modal overrides are specific if needed */
.chart-settings-modal {
    background-color: var(--oc-bg-card) !important;
    border: 1px solid var(--oc-border) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5) !important;
    color: var(--oc-text-main) !important;
}

.settings-modal-header {
    border-bottom: 1px solid var(--oc-border) !important;
    background-color: var(--oc-bg-dark) !important;
}

.settings-modal-title {
    color: var(--oc-text-main) !important;
    font-weight: 700;
}

.settings-modal-close {
    color: var(--oc-text-sec) !important;
}
.settings-modal-close:hover {
    color: var(--oc-text-main) !important;
}

.settings-label {
    color: var(--oc-text-sec) !important;
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 4px;
}

/* Form Controls in Modal */
.chart-settings-modal .form-select,
.chart-settings-modal .form-control {
    background-color: var(--oc-bg-dark) !important;
    border: 1px solid var(--oc-border) !important;
    color: var(--oc-text-main) !important;
}

/* Zone Toggle Container */
.zone-toggle-container {
    background-color: var(--oc-bg-dark) !important;
    border: 1px solid var(--oc-border) !important;
    border-radius: 6px;
    padding: 2px;
}

.sliding-bg {
    background-color: var(--oc-strike-blue) !important;
    border-radius: 4px;
}

.zone-option {
    color: var(--oc-text-sec) !important;
}

.zone-option.active {
    color: white !important;
}

/* Action Cards */
.action-card-btn {
    background-color: var(--oc-bg-dark) !important;
    border: 1px solid var(--oc-border) !important;
    color: var(--oc-text-main) !important;
    border-radius: 6px;
    transition: all 0.2s;
}

.action-card-btn:hover {
    background-color: var(--oc-border) !important;
    color: white !important;
}

.action-card-btn.active {
    background-color: var(--oc-strike-blue) !important;
    border-color: var(--oc-strike-blue) !important;
    color: white !important;
}

/* Read Me Button */
.btn-soft-blue {
    background-color: rgba(49, 121, 245, 0.1) !important;
    color: #3179F5 !important;
    border: 1px solid rgba(49, 121, 245, 0.2) !important;
}
.btn-soft-blue:hover {
    background-color: #3179F5 !important;
    color: white !important;
}