/**
 * NEWZEEFY NSE NIFTY 50 PORTAL STYLES (nifty.css)
 * Complete Light & Dark Mode CSS Variable System
 */

:root,
[data-theme="light"] {
    --page-bg: #f4f7fb;
    --surface: #ffffff;
    --surface-secondary: #f8fafc;
    --surface-tertiary: #eef2f7;
    --text-primary: #172033;
    --text-secondary: #566174;
    --text-muted: #7b8798;
    --border: #dfe5ec;
    --input-bg: #ffffff;
    --input-text: #172033;
    --table-bg: #ffffff;
    --table-header: #f4f7fb;
    --table-row: #ffffff;
    --positive: #059669;
    --negative: #dc3545;
    --accent: #1677ff;
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] {
    --page-bg: #081426;
    --surface: #17253a;
    --surface-secondary: #101d31;
    --surface-tertiary: #0c182b;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --border: #2c3b52;
    --input-bg: #0d192b;
    --input-text: #f8fafc;
    --table-bg: #17253a;
    --table-header: #0c182b;
    --table-row: #17253a;
    --positive: #34d399;
    --negative: #fb7185;
    --accent: #60a5fa;
    --card-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

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

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

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

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

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

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

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

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

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

.gainers-card,
.losers-card,
.gainers-list,
.losers-list {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
}

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

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

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

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

#niftyConstituentsTable tbody tr {
    background-color: var(--table-row) !important;
}

#niftyConstituentsTable tbody tr:hover {
    background-color: var(--surface-tertiary) !important;
}

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

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

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

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

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

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

.accordion-button:not(.collapsed) {
    background-color: transparent !important;
    color: var(--accent) !important;
}

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

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

.nifty-range-progress {
    height: 100%;
    background: linear-gradient(90deg, var(--positive) 0%, var(--accent) 100%);
    border-radius: 999px;
    transition: width 0.6s ease;
}

/* Pulse dots */
.pulse-dot-green {
    width: 10px;
    height: 10px;
    background-color: var(--positive);
    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: var(--negative);
    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); }
}