/* =============================================================================
 * realtime-component.css - MERGED + theme-aware
 *
 * Replaces BOTH styles.css and realtime-component-dark.css for this
 * component. Merge audit (JS class census):
 *   - live classes all came from the dark sheet; styles.css was the
 *     prototype - its only living rule (.chart-loader) is salvaged here.
 *   - styles.css's body{}/*{} resets and both sheets' generic :root vars
 *     (--primary-color, --background-color, --chart-bg, ...) are REMOVED:
 *     the two files defined the same names with different values, and the
 *     JS references none of them (verified).
 *
 * THEMING SCOPE: everything themes via --rt-* under .dark-theme /
 * .light-theme (dark = v2 navy palette). Wells + table flip too:
 * RealtimeDashboard.getChartPalette() (realtime-component.js) resolves
 * Highcharts label/tooltip colors per theme at chart creation - CSS and
 * JS must stay in step. Palette is captured when a chart is built, so a
 * live theme toggle without reload re-themes CSS instantly but existing
 * charts only on re-render.
 * ========================================================================== */

.dark-theme {
    /* RETONED (was the pre-v2 pure-black family): dark now sits on the
       v2 navy surface palette so the drawer matches the portal theme. */
    --rt-max-height: 600px;
    --rt-wrapper-bg: rgba(15, 23, 34, 0.55);
    --rt-wrapper-shadow: 0 -2px 12px rgba(0, 0, 0, 0.45);
    --rt-panel-bg: rgba(15, 23, 34, 0.6);
    --rt-header-bg: rgba(29, 39, 54, 0.6);
    --rt-header-brd: var(--border-default, rgba(148, 163, 184, .14));
    --rt-strip-bg: rgba(15, 23, 34, 0.7);
    --rt-scroll-bg: rgba(15, 23, 34, 0.45);
    --rt-scrollthumb: #2A3A52;
    --rt-fg: var(--text-primary, #E7EEF8);
    --rt-fg-dim: var(--text-secondary, #9AA7BA);
    --rt-arrow-bg: rgba(29, 39, 54, 0.85);
    --rt-arrow-bg-hover: rgba(41, 54, 73, 0.95);
    --rt-arrow-sep: var(--border-default, rgba(148, 163, 184, .14));
    /* v2 design pass */
    --rt-handle-bg: var(--surface-raised, #1D2736);
    --rt-handle-brd: var(--border-default, rgba(148, 163, 184, .18));
    --rt-handle-fg: var(--text-secondary, #9AA7BA);
    --rt-handle-fg-hover: var(--text-primary, #E7EEF8);
    --rt-live: #2ecc71;
    /* wells (now themed - JS palette flips chart internals to match) */
    --rt-well-bg: rgba(13, 20, 31, 0.97);
    --rt-well-brd: rgba(255, 255, 255, 0.08);
    --rt-well-fg: #e7eef8;
    --rt-well-title: #9fb0c3;
    --rt-table-bg: rgba(13, 20, 31, 0.8);
    --rt-th-bg: rgba(29, 39, 54, 0.55);
    --rt-thead-bg: rgba(29, 39, 54, 0.15);
    --rt-well-line-strong: rgba(255, 255, 255, 0.10);
    --rt-well-line: rgba(255, 255, 255, 0.05);
    --rt-zebra: rgba(255, 255, 255, 0.03);
    --rt-row-hover: rgba(255, 255, 255, 0.06);
}

.light-theme {
    --rt-max-height: 600px;
    --rt-wrapper-bg: rgba(255, 255, 255, 0.35);
    --rt-wrapper-shadow: 0 -2px 10px rgba(16, 32, 60, 0.12);
    --rt-panel-bg: rgba(255, 255, 255, 0.6);
    --rt-header-bg: rgba(255, 255, 255, 0.8);
    --rt-header-brd: var(--border-strong, rgba(20, 40, 75, .22));
    --rt-strip-bg: rgba(238, 242, 248, 0.8);
    --rt-scroll-bg: rgba(238, 242, 248, 0.6);
    --rt-scrollthumb: #b9c2d2;
    --rt-fg: var(--text-primary, #13213B);
    --rt-fg-dim: var(--text-faint, #8694AC);
    --rt-arrow-bg: rgba(255, 255, 255, 0.78);
    --rt-arrow-bg-hover: rgba(255, 255, 255, 0.97);
    --rt-arrow-sep: rgba(20, 40, 75, 0.15);
    /* v2 design pass */
    --rt-handle-bg: var(--surface-card, #FFFFFF);
    --rt-handle-brd: var(--border-strong, rgba(20, 40, 75, .22));
    --rt-handle-fg: var(--text-secondary, #566782);
    --rt-handle-fg-hover: var(--text-primary, #13213B);
    --rt-live: #16a34a;
    /* wells (light) */
    --rt-well-bg: var(--surface-card, #FFFFFF);
    --rt-well-brd: var(--border-strong, rgba(20, 40, 75, .18));
    --rt-well-fg: var(--text-primary, #13213B);
    --rt-well-title: var(--text-secondary, #566782);
    --rt-table-bg: rgba(20, 40, 75, 0.03);
    --rt-th-bg: rgba(20, 40, 75, 0.06);
    --rt-thead-bg: rgba(20, 40, 75, 0.03);
    --rt-well-line-strong: rgba(20, 40, 75, 0.14);
    --rt-well-line: rgba(20, 40, 75, 0.08);
    --rt-zebra: rgba(20, 40, 75, 0.04);
    --rt-row-hover: rgba(20, 40, 75, 0.07);
}

.real-time-wrapper {
    /*background-color: var(--rt-wrapper-bg);*/
    background-color:transparent;
    box-shadow: var(--rt-wrapper-shadow);
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
}

/* ROOT-CAUSE FIX (stale-constant class, cf. ReportRepo P11): the strip
   was calc(100% - 25px) against a fixed 260px while the header's REAL
   box is ~42px (25px height + padding + border, content-box) - the
   overflow got clipped at the wrapper, eating exactly the bottom
   padding. Cure: no assumed constants - header and strip size
   themselves, container height follows content. */
#main-container {
    height: auto;
}

/* GRAB HANDLE (horizontal variant of the portal-wide pattern):
   the strip stays full-width for an easy click target but paints
   nothing; the visible handle is the ::after pill - 64x16, raised
   surface, rounded AWAY from the drawer (up), flush where it meets
   the drawer edge. FA caret glyphs + retone-on-hover; hover fill via
   the opaque-base + gradient trick (pattern-standard). */
.slide-bar {
    height: 22px;
    background: transparent;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

    .slide-bar::after {
        content: "\f0d8"; /* FA caret-up: collapsed -> expand */
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 11px;
        line-height: 16px;
        width: 64px;
        height: 16px;
        text-align: center;
        color: var(--rt-handle-fg);
        background-color: var(--rt-handle-bg);
        border: 1px solid var(--rt-handle-brd);
        border-bottom: none;
        border-radius: 8px 8px 0 0;
        transition: color 0.15s, background-image 0.15s;
    }

    .slide-bar.expanded::after {
        content: "\f0d7"; /* FA caret-down: expanded -> collapse */
    }

    .slide-bar:hover::after {
        color: var(--rt-handle-fg-hover);
        background-image: linear-gradient(var(--state-hover-bg, rgba(255, 255, 255, .07)), var(--state-hover-bg, rgba(255, 255, 255, .07)));
    }

.real-time-container {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease;
    position: relative;
    transform-origin: bottom;
    background-color: var(--rt-panel-bg);
}

    .real-time-container.expanded {
        height: auto;
        max-height: var(--rt-max-height);
    }

    .real-time-container .header {
        background-color: var(--rt-header-bg);
        color: var(--rt-fg);
        padding: 8px 15px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        border-bottom: 1px solid var(--rt-header-brd);
        display: flex;
        align-items: center;
    }

        /* live pulse dot - same green family both themes */
        .real-time-container .header::before {
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: var(--rt-live);
            margin-right: 8px;
            flex: 0 0 auto;
            animation: blink 1.5s infinite;
        }

.scroll-area-container {
    display: flex;
    flex-direction: row;
    background-color: var(--rt-strip-bg);
    position: relative;
}

.realtime-scroll-container {
    flex: 1;
    display: flex;
    overflow-x: hidden;
    scroll-behavior: smooth;
    padding: 12px 0; /* equal top/bottom by construction */
    -webkit-overflow-scrolling: touch;
    background-color: var(--rt-scroll-bg);
    scrollbar-width: thin;
    scrollbar-color: var(--rt-scrollthumb) transparent;
}

    .realtime-scroll-container::-webkit-scrollbar {
        height: 6px;
        background: transparent;
    }

    .realtime-scroll-container::-webkit-scrollbar-thumb {
        background: var(--rt-scrollthumb);
        border-radius: 3px;
    }

/* ---- CHART WELLS: now THEMED (RealtimeDashboard.getChartPalette()
   flips Highcharts label/tooltip colors to match). Bases stay OPAQUE
   (compositing lesson, cf. alarm zebra): well color is self-contained,
   not borrowed from the backdrop. ---- */
.realtime-box {
    min-width: calc(33.333% - 20px);
    margin-right: 15px;
    height: 205px;
    background-color: var(--rt-well-bg);
    border: 1px solid var(--rt-well-brd);
    border-radius: 10px;
    padding: 6px 10px 2px;
    position: relative;
}

    .realtime-box:last-child {
        margin-right: 0;
    }

.realtime-placeholder {
    font-weight: bold;
    color: var(--rt-well-fg); /* JS palette keeps Highcharts labels in step */
    font-size: 12px;
    height: calc(100% - 32px);
}

.realtime-box .title {
    color: var(--rt-well-title);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 2px;
}

@keyframes pulse {
    0% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.6;
    }
}

@keyframes blink {
    0% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.6;
    }
}

/* ---- scroll arrows: chip buttons (themed chrome) ---- */
.scroll-arrow {
    flex: 0 0 26px;
    height: 48px;
    background-color: var(--rt-arrow-bg);
    border: 1px solid var(--rt-arrow-sep);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    align-self: center;
    transition: background-color 0.15s;
}

    .scroll-arrow:hover {
        background-color: var(--rt-arrow-bg-hover);
    }

.scroll-left {
    margin-left: 6px;
}

.scroll-right {
    margin-right: 6px;
}

.scroll-arrow::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--rt-fg);
    border-right: 2px solid var(--rt-fg);
}

.scroll-left::before {
    transform: rotate(-135deg);
    margin-left: 4px;
}

.scroll-right::before {
    transform: rotate(45deg);
    margin-right: 4px;
}

/* ---- table variant: themed with its well ---- */
.realtime-table {
    width: 100%;
    overflow-y: auto;
}

    .realtime-table table {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
        font-family: inherit;
        font-size: 12px;
        color: var(--rt-well-fg);
        text-align: left;
        background-color: var(--rt-table-bg);
    }

    /* kvtable-style micro-label header, constant-dark variant */
    .realtime-table th {
        text-align: left;
        padding: 5px 10px;
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--rt-well-title);
        border-bottom: 1px solid var(--rt-well-line-strong);
        background-color: var(--rt-th-bg);
    }

    .realtime-table td {
        text-align: left;
        padding: 4px 10px;
        border-bottom: 1px solid var(--rt-well-line);
    }

    .realtime-table thead {
        background-color: var(--rt-thead-bg);
    }

    .realtime-table tbody tr:hover td {
        background-color: var(--rt-row-hover);
    }

    .realtime-table tbody tr:nth-child(even) {
        background-color: transparent;
    }

    .realtime-table tbody tr:nth-child(odd) {
        background-color: var(--rt-zebra);
    }

    .realtime-table th:nth-child(2),
    .realtime-table th:nth-child(3),
    .realtime-table td:nth-child(2),
    .realtime-table td:nth-child(3) {
        text-align: right;
    }

    .realtime-table th:nth-child(3),
    .realtime-table td:nth-child(3) {
        width: 55px;
        text-align: right;
    }

/* ---- salvaged from styles.css (only rule the JS still uses) ---- */
.chart-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    font-size: 14px;
    color: var(--rt-fg-dim);
    background-color: rgba(0, 0, 0, 0.05);
    padding: 8px 16px;
    border-radius: 4px;
}