/* =========================================================
   Gift Nifty — Front-end enhancements
   Scope: market data tables (.table) + live-price output.
   Class-scoped so it applies regardless of theme wrapper, but
   specific enough not to touch TablePress / Elementor UI tables.
   Safe to remove (deactivate plugin) to fully revert.
   ========================================================= */

:root {
    --gn-up: #15a34a;          /* gains  */
    --gn-up-bg: rgba(21,163,74,.10);
    --gn-down: #dc2626;        /* losses */
    --gn-down-bg: rgba(220,38,38,.10);
    --gn-ink: #0f172a;
    --gn-muted: #64748b;
    --gn-line: #e6eaf0;
    --gn-head: #0b1f3a;        /* table header bg */
    --gn-head-ink: #f8fafc;
    --gn-zebra: #f7f9fc;
    --gn-hover: #eef4ff;
    --gn-radius: 12px;
    --gn-shadow: 0 1px 3px rgba(16,24,40,.06), 0 8px 24px -12px rgba(16,24,40,.18);
}

/* ---------- Table container: rounded card + horizontal scroll on mobile ---------- */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 1.5rem;
    border-radius: var(--gn-radius);
    box-shadow: var(--gn-shadow);
    background: #fff;
}
.table-responsive > table.table { box-shadow: none; margin-bottom: 0; }

/* ---------- The data tables ---------- */
table.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0 0 1.5rem;
    font-size: 15px;
    color: var(--gn-ink);
    background: #fff;
    border-radius: var(--gn-radius);
    box-shadow: var(--gn-shadow);
    overflow: hidden;
}
table.table th,
table.table td {
    padding: 11px 14px;
    text-align: left;
    border: none;
    border-bottom: 1px solid var(--gn-line);
    white-space: nowrap;
    vertical-align: middle;
}

/* Sticky, high-contrast header */
table.table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--gn-head);
    color: var(--gn-head-ink);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .02em;
    text-transform: uppercase;
    border-bottom: none;
}

/* Zebra + hover */
table.table.table-striped tbody tr:nth-child(odd)  { background: var(--gn-zebra); }
table.table tbody tr:hover { background: var(--gn-hover); }
table.table tbody tr:last-child td { border-bottom: none; }

/* Numbers read better tabular */
table.table td { font-variant-numeric: tabular-nums; }

/* ---------- Market color-coding ----------
   The plugins emit inline style="color: green|red".
   Upgrade those harsh colors to a refined palette. */
td[style*="color: green"], td[style*="color:green"],
span[style*="color: green"], span[style*="color:green"] {
    color: var(--gn-up) !important;
    font-weight: 600;
}
td[style*="color: red"], td[style*="color:red"],
span[style*="color: red"], span[style*="color:red"] {
    color: var(--gn-down) !important;
    font-weight: 600;
}

/* JS-tagged change cells get a soft pill background */
td.gn-up   { background: var(--gn-up-bg)   !important; }
td.gn-down { background: var(--gn-down-bg) !important; }
.gn-arrow { font-style: normal; margin-left: 2px; }

/* ---------- Live-price emphasis ---------- */
.prices, .high-price, .low-price {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.high-price { color: var(--gn-up); }
.low-price  { color: var(--gn-down); }

/* Performance bar (day / 52-week range) */
.performance-bar {
    background: linear-gradient(90deg, var(--gn-down) 0%, #f59e0b 50%, var(--gn-up) 100%);
    border-radius: 999px;
    height: 8px;
    position: relative;
    margin: 10px 0;
}

/* ---------- Live status pill (used by Phase-2 widgets, harmless if unused) ---------- */
.gn-status {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; padding: 4px 10px;
    border-radius: 999px; background: #f1f5f9; color: var(--gn-muted);
}
.gn-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.gn-status.is-open   { background: var(--gn-up-bg);   color: var(--gn-up); }
.gn-status.is-closed { background: var(--gn-down-bg); color: var(--gn-down); }

/* ---------- Chart canvas ---------- */
#lineChart { max-width: 100%; }

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
    table.table { font-size: 13.5px; }
    table.table th,
    table.table td { padding: 9px 10px; }
}