/* ============================================================
   MPN Screener — styles.css
   Global background, form helpers, tooltips, gain/loss refinement
   ============================================================ */

/* ── App background: faint navy grid on near-white ──────── */
body {
    background-color: var(--surface-2) !important;
    background-image:
        linear-gradient(to right,  rgba(51, 92, 129, 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(51, 92, 129, 0.045) 1px, transparent 1px) !important;
    background-size: 38px 38px !important;
}

/* ── Refine the gain/loss spans that mpn.js colours inline ──
   The DataTable renderers output style="color:green|red". These
   overrides upgrade those to the refined semantic tones without
   needing to touch the JavaScript. ----------------------------- */
#company-table span[style*="color:green"],
#company-table span[style*="color: green"] {
    color: var(--gain) !important;
    font-weight: 600;
}
#company-table span[style*="color:red"],
#company-table span[style*="color: red"] {
    color: var(--loss) !important;
    font-weight: 600;
}

/* ── Truncated trend/signal cell + hover tooltip ────────── */
.fixed-width-column {
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: help;
    position: relative;
}
.fixed-width-column:hover::after {
    content: attr(data-full-text);
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, calc(-100% - 8px));
    background: var(--navy-800);
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    white-space: normal;
    z-index: 1000;
    pointer-events: none;
    max-width: 300px;
    width: max-content;
    font-size: 0.78rem;
    line-height: 1.4;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: var(--shadow-md);
}

/* ── Form controls ──────────────────────────────────────── */
.form-select, .form-control {
    font-size: 0.875rem;
    border-color: var(--line);
    border-radius: var(--radius-sm);
}
.form-select:focus, .form-control:focus {
    border-color: var(--navy-500);
    box-shadow: 0 0 0 0.18rem var(--accent-soft);
}
.col-form-label { font-weight: 600; font-size: 0.85rem; color: var(--ink-soft); }

input[type="checkbox"] { accent-color: var(--navy-500); transform: scale(1.1); }

/* ── Legacy filter helpers (kept for compatibility) ─────── */
.filter-container { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.form-group { display: flex; align-items: center; gap: 6px; min-width: 100px; }
.checkbox-group { display: flex; flex-wrap: wrap; gap: 10px; }