/**
 * NEWZEEFY BSE SENSEX PORTAL STYLES (sensex.css)
 * Complete Light & Dark Mode CSS Variable System
 */

:root,
[data-theme="light"] {
    --sensex-bg: #f5f7fb;
    --sensex-surface: #ffffff;
    --sensex-surface-subtle: #f8fafc;
    --sensex-text-primary: #0f172a;
    --sensex-text-secondary: #475569;
    --sensex-text-muted: #64748b;
    --sensex-border: #e2e8f0;
    --sensex-table-bg: #ffffff;
    --sensex-table-header: #f1f5f9;
    --sensex-input-bg: #ffffff;
    --sensex-input-text: #0f172a;
    --sensex-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] {
    --sensex-bg: #081426;
    --sensex-surface: #142238;
    --sensex-surface-subtle: #0f172a;
    --sensex-text-primary: #f8fafc;
    --sensex-text-secondary: #cbd5e1;
    --sensex-text-muted: #94a3b8;
    --sensex-border: #2b3a51;
    --sensex-table-bg: #142238;
    --sensex-table-header: #0d192b;
    --sensex-input-bg: #0c192c;
    --sensex-input-text: #f8fafc;
    --sensex-card-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

body {
    background-color: var(--sensex-bg) !important;
    color: var(--sensex-text-primary) !important;
}

.sensex-hero-card {
    background: linear-gradient(135deg, #0b1329 0%, #1e293b 50%, #0f172a 100%);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    position: relative;
    overflow: hidden;
}

.sensex-card {
    background-color: var(--sensex-surface) !important;
    color: var(--sensex-text-primary) !important;
    border: 1px solid var(--sensex-border) !important;
    box-shadow: var(--sensex-card-shadow) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sensex-card:hover {
    transform: translateY(-3px);
}

.sensex-card h1, .sensex-card h2, .sensex-card h3, .sensex-card h4, .sensex-card h5, .sensex-card h6 {
    color: var(--sensex-text-primary) !important;
}

.sensex-card p, .sensex-card .text-muted {
    color: var(--sensex-text-muted) !important;
}

.bg-light-subtle, .bg-light {
    background-color: var(--sensex-surface-subtle) !important;
    color: var(--sensex-text-primary) !important;
}

/* List group dark mode fix for Gainers & Losers */
.list-group-item {
    background-color: var(--sensex-surface) !important;
    color: var(--sensex-text-primary) !important;
    border-color: var(--sensex-border) !important;
}

.list-group-item strong {
    color: var(--sensex-text-primary) !important;
}

/* Table Dark & Light Mode Overrides */
#sensexConstituentsTable {
    background-color: var(--sensex-table-bg) !important;
    color: var(--sensex-text-primary) !important;
}

#sensexConstituentsTable thead {
    background-color: var(--sensex-table-header) !important;
}

#sensexConstituentsTable th {
    color: var(--sensex-text-secondary) !important;
    border-bottom-color: var(--sensex-border) !important;
}

#sensexConstituentsTable td {
    color: var(--sensex-text-primary) !important;
    border-bottom-color: var(--sensex-border) !important;
}

#sensexConstituentsTable tbody tr:hover {
    background-color: var(--sensex-surface-subtle) !important;
}

/* Input Fields Dark & Light Mode */
#sensexSearchConstituent {
    background-color: var(--sensex-input-bg) !important;
    color: var(--sensex-input-text) !important;
    border-color: var(--sensex-border) !important;
}

#sensexSearchConstituent::placeholder {
    color: var(--sensex-text-muted) !important;
}

/* Modal Dark Mode Overrides */
.modal-content {
    background-color: var(--sensex-surface) !important;
    color: var(--sensex-text-primary) !important;
    border: 1px solid var(--sensex-border) !important;
}

.modal-content h5, .modal-content strong {
    color: var(--sensex-text-primary) !important;
}

.modal-content .bg-light, .modal-content .bg-white {
    background-color: var(--sensex-surface-subtle) !important;
    color: var(--sensex-text-primary) !important;
    border-color: var(--sensex-border) !important;
}

/* Accordion Dark Mode */
.accordion-button {
    color: var(--sensex-text-primary) !important;
}

.accordion-button:not(.collapsed) {
    background-color: transparent !important;
    color: #4f46e5 !important;
}

.accordion-body {
    color: var(--sensex-text-secondary) !important;
}

/* Progress Bars */
.sensex-range-bar-wrap {
    height: 8px;
    background: var(--sensex-border);
    border-radius: 999px;
    position: relative;
    overflow: hidden;
}

.sensex-range-progress {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6 0%, #10b981 100%);
    border-radius: 999px;
    transition: width 0.6s ease;
}

/* Pulse dots */
.pulse-dot-green {
    width: 10px;
    height: 10px;
    background-color: #10b981;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: pulseDotGreen 1.8s infinite;
}

.pulse-dot-red {
    width: 10px;
    height: 10px;
    background-color: #ef4444;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    animation: pulseDotRed 1.8s infinite;
}

@keyframes pulseDotGreen {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

@keyframes pulseDotRed {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}