/* ============================================================
   MobsterHQ Metrics — dark theme matching dailychartdark
   Background  #161a25  Text  #b2b5be
   Up candle   #089981  Down  #f23645
   ============================================================ */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #161a25;
    color: #b2b5be;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    overflow: hidden;
}

/* ---- TOPBAR ---- */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1c2030;
    border-bottom: 1px solid #2a2e3e;
    padding: 8px 16px;
    height: 52px;
    gap: 16px;
}

.topbar-left, .topbar-center, .topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand {
    font-weight: 600;
    font-size: 14px;
    color: #e0e0e0;
    white-space: nowrap;
}

.ticker-picker {
    position: relative;
}

#ticker-search {
    background: #2a2e3e;
    border: 1px solid #3a3e4e;
    color: #e0e0e0;
    padding: 6px 12px;
    border-radius: 4px;
    width: 260px;
    font-size: 13px;
    outline: none;
}
#ticker-search:focus {
    border-color: #3a9cdb;
}

.ticker-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #2a2e3e;
    border: 1px solid #3a3e4e;
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 360px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.ticker-dropdown.hidden { display: none; }

.ticker-option {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #1c2030;
}
.ticker-option:hover, .ticker-option.highlighted {
    background: #3a3e4e;
}
.ticker-option .key {
    color: #b2b5be;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    text-transform: uppercase;
}
.ticker-option .name {
    color: #e0e0e0;
}

#chart-title {
    font-weight: 600;
    color: #e0e0e0;
    font-size: 14px;
}
#chart-last {
    font-weight: 700;
    font-size: 16px;
    color: #ffffff;
}
#chart-change {
    font-weight: 600;
    font-size: 13px;
}
#chart-change.up { color: #089981; }
#chart-change.down { color: #f23645; }

.timeframe-buttons,
.interval-buttons {
    display: flex;
    gap: 4px;
}
.timeframe-buttons button,
.interval-buttons button {
    background: transparent;
    color: #b2b5be;
    border: 1px solid #3a3e4e;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 12px;
    border-radius: 3px;
    transition: background 0.1s;
}
.timeframe-buttons button:hover,
.interval-buttons button:hover {
    background: #2a2e3e;
}
.timeframe-buttons button.active,
.interval-buttons button.active {
    background: #3a9cdb;
    color: #ffffff;
    border-color: #3a9cdb;
}

/* Visual divider between the two control groups in the topbar. */
.topbar-divider {
    display: inline-block;
    width: 1px;
    height: 22px;
    background: #3a3e4e;
    margin: 0 4px;
}

/* Native <select> dropdowns in the topbar (chart type + interval).
   Native picker is intentional — works perfectly on touch devices
   without any custom JS, and the option list is short enough that a
   fancy custom dropdown would be overkill. */
.topbar-select {
    background: #2a2e3e;
    color: #e0e0e0;
    border: 1px solid #3a3e4e;
    padding: 4px 22px 4px 10px;
    border-radius: 3px;
    font-size: 12px;
    cursor: pointer;
    outline: none;
    /* Custom dropdown arrow (replaces the OS-default) */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23b2b5be' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 7px center;
    transition: background-color 0.1s, border-color 0.1s;
}
.topbar-select:hover {
    background-color: #3a3e4e;
    border-color: #4a4e5e;
}
.topbar-select:focus {
    border-color: #3a9cdb;
}
/* Style the popup options too (Firefox honors this; Chrome partially). */
.topbar-select option {
    background: #1c2030;
    color: #e0e0e0;
}

/* ---- LAYOUT ---- */
.layout {
    display: flex;
    height: calc(100vh - 52px);
}

.chart-pane {
    flex: 1;
    position: relative;
    min-width: 0;
    background: #161a25;
}

#chart {
    width: 100%;
    height: 100%;
}

.chart-overlay {
    position: absolute;
    top: 12px;
    left: 12px;
    /* Children that need clicks set pointer-events:auto. */
    pointer-events: none;
    z-index: 5;
}
.legend-row {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(28, 32, 48, 0.85);
    padding: 4px;
    border-radius: 4px;
    font-size: 11px;
    color: #b2b5be;
    pointer-events: auto;
}
.legend-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    color: inherit;
    cursor: pointer;
    font-size: 11px;
    transition: background 0.1s, opacity 0.1s;
}
.legend-toggle:hover {
    background: rgba(80, 90, 110, 0.4);
    border-color: #3a3e4e;
}
.legend-toggle .eye-on  { display: inline; }
.legend-toggle .eye-off { display: none; }
.legend-toggle .legend-dot,
.legend-toggle span:not(.eye-icon) {
    opacity: 1;
    transition: opacity 0.1s;
}
.legend-toggle:not(.active) {
    opacity: 0.55;
}
.legend-toggle:not(.active) .eye-on  { display: none; }
.legend-toggle:not(.active) .eye-off { display: inline; }
.legend-toggle:not(.active) .legend-dot {
    background: #5a5e6e !important;
}

.legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* Reset-zoom button, bottom-right of chart pane.
   Mirrors TradingView's compact circular button. */
.chart-reset-btn {
    position: absolute;
    bottom: 60px;       /* sits above the time-axis bar */
    right: 70px;        /* sits left of the price-axis labels */
    width: 32px;
    height: 32px;
    background: rgba(28, 32, 48, 0.92);
    border: 1px solid #3a3e4e;
    border-radius: 50%;
    color: #b2b5be;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.chart-reset-btn:hover {
    background: #2a2e3e;
    color: #ffffff;
    border-color: #5a5e6e;
}
.chart-reset-btn:active {
    transform: scale(0.95);
}

/* ---- WATCHLIST ---- */
.watchlist-pane {
    /* Width chosen so 4 columns (Symbol / Last / Chg / Chg%) all fit
       comfortably with K/M/B/T-compacted numbers, plus an 8px
       scrollbar gutter so the rightmost column doesn't get covered. */
    width: 300px;
    flex-shrink: 0;
    background: #1c2030;
    border-left: 1px solid #2a2e3e;
    display: flex;
    flex-direction: column;
    min-height: 0;  /* lets the inner scroll area actually scroll */
}

.watchlist-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #2a2e3e;
    font-weight: 600;
    color: #e0e0e0;
    font-size: 13px;
    flex-shrink: 0;
}

.watchlist-range {
    background: #2a2e3e;
    border: 1px solid #3a3e4e;
    color: #b2b5be;
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 11px;
    cursor: pointer;
    outline: none;
}

.watchlist-table-wrap {
    flex: 1;
    overflow-y: auto;
    /* Reserve space for the scrollbar so it doesn't overlay the
       last column. Works in Chrome/Edge/Firefox 2023+. */
    scrollbar-gutter: stable;
    min-height: 0;
}

.watchlist-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    /* Fixed layout = column widths derived from <colgroup>/first
       row, not from content. Keeps headers and body aligned. */
    table-layout: fixed;
}

/* Column widths — Symbol gets a chunk, the 3 numeric columns share
   the rest. */
.watchlist-table th:nth-child(1),
.watchlist-table td:nth-child(1) { width: 30%; }   /* Symbol */
.watchlist-table th:nth-child(2),
.watchlist-table td:nth-child(2) { width: 25%; }   /* Last   */
.watchlist-table th:nth-child(3),
.watchlist-table td:nth-child(3) { width: 22%; }   /* Chg    */
.watchlist-table th:nth-child(4),
.watchlist-table td:nth-child(4) { width: 23%; }   /* Chg%   */

.watchlist-table th {
    background: #1c2030;
    color: #b2b5be;
    font-weight: 600;
    padding: 8px 8px;
    border-bottom: 1px solid #3a3e4e;
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 2;
    /* Slight shadow under the header so it visually separates from
       scrolling rows. */
    box-shadow: 0 1px 0 #3a3e4e;
}
.watchlist-table th.num {
    text-align: right;
}
.watchlist-table td {
    padding: 7px 8px;
    border-bottom: 1px solid #2a2e3e;
    color: #e0e0e0;
    /* Truncate over-long content with ellipsis rather than wrap or
       overflow horizontally. With compact K/M/B/T format this should
       basically never trigger, but it's a safety net. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.watchlist-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
}
.watchlist-table tbody tr {
    cursor: pointer;
    transition: background 0.08s;
}
.watchlist-table tbody tr:hover {
    background: #252a3c;
}
.watchlist-table tbody tr.active {
    background: #2e3550;
}

.watchlist-table .symbol {
    font-weight: 600;
    color: #e0e0e0;
}
.watchlist-table .pos { color: #089981; }
.watchlist-table .neg { color: #f23645; }
.watchlist-table .na { color: #5a5e6e; }

.loading {
    text-align: center;
    padding: 20px;
    color: #5a5e6e;
}

/* ---- TradingView Lightweight Charts overrides ---- */
/* Their library injects its own canvas; this is just to ensure the
   container fills available space cleanly. */
.tv-lightweight-charts {
    background: #161a25 !important;
}

/* ---- Scrollbars (dark) ---- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #1c2030; }
::-webkit-scrollbar-thumb { background: #3a3e4e; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #4a4e5e; }

/* ============================================================
   MOBILE OVERRIDES — only kick in below 768px wide.
   Desktop layout (everything above this block) is unchanged.
   ============================================================ */
@media (max-width: 768px) {

    /* Let the page scroll naturally on mobile (instead of the
       desktop "everything fits in 100vh, nothing scrolls" model).
       The topbar is made sticky so it follows the scroll. */
    html, body {
        overflow: auto;
        height: auto;
    }

    /* TOPBAR: stack into rows, sticky to top so it stays visible
       while the user scrolls through the watchlist below. */
    .topbar {
        position: sticky;
        top: 0;
        z-index: 100;
        height: auto;
        min-height: 52px;
        flex-wrap: wrap;
        padding: 8px;
        gap: 8px;
    }
    .topbar-left,
    .topbar-center,
    .topbar-right {
        flex-basis: 100%;
        justify-content: center;
        gap: 8px;
    }
    .topbar-left {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .brand {
        font-size: 12px;
        flex-shrink: 0;
    }
    .ticker-picker {
        flex: 1;
        min-width: 0;
    }
    #ticker-search {
        width: 100%;
        max-width: 100%;
    }
    .topbar-center {
        font-size: 12px;
        flex-wrap: wrap;
    }
    #chart-title    { font-size: 13px; }
    #chart-last     { font-size: 14px; }
    #chart-change   { font-size: 11px; }
    .timeframe-buttons {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;       /* Firefox */
    }
    .timeframe-buttons::-webkit-scrollbar { display: none; }  /* WebKit */
    .timeframe-buttons button {
        flex-shrink: 0;
        font-size: 11px;
        padding: 4px 8px;
    }
    .topbar-divider {
        display: none;  /* not enough room on mobile */
    }
    .topbar-select {
        font-size: 11px;
        padding: 4px 20px 4px 8px;
    }

    /* LAYOUT: stack chart over watchlist, let the whole PAGE scroll
       (no nested scroll areas — much more natural on touch). */
    .layout {
        flex-direction: column;
        height: auto;
    }
    .chart-pane {
        /* Chart is the visual anchor — give it a fixed portion of
           the viewport. The user scrolls past it to reach watchlist. */
        height: 55vh;
        min-height: 280px;
        width: 100%;
        flex-shrink: 0;
    }
    .watchlist-pane {
        width: 100%;
        height: auto;
        border-left: none;
        border-top: 1px solid #2a2e3e;
        flex-shrink: 0;
    }
    .watchlist-table-wrap {
        /* Don't trap scrolling inside the table — let the page
           scroll naturally so the user can swipe up to see more
           rows + the chart scrolls off-screen. Header stays sticky
           via the existing `position: sticky` rule. */
        overflow: visible;
        max-height: none;
    }
    /* Re-sticky the watchlist header so it remains visible at the
       top of the watchlist section as the page scrolls past. */
    .watchlist-table th {
        top: 0;  /* relative to nearest scroll container = the body */
    }

    /* SMA TOGGLE PILLS: compact form on mobile.
       - Hide the desktop "SMA 200" text span
       - Show "200" (from data-sma="200") as a ::after pseudo-element
       - Eye icon + colored dot stay, so the affordance is still clear */
    .legend-row {
        gap: 2px;
        padding: 3px;
    }
    .legend-toggle {
        padding: 3px 6px;
        font-size: 10px;
        gap: 3px;
    }
    .legend-toggle > span:not(.eye-icon):not(.legend-dot) {
        display: none;
    }
    .legend-toggle::after {
        content: attr(data-sma);
        font-size: 10px;
        line-height: 1;
    }

    /* RESET BUTTON: nudge in from the edge a bit. */
    .chart-reset-btn {
        bottom: 50px;
        right: 50px;
        width: 28px;
        height: 28px;
    }
}

/* Even narrower phones (iPhone SE / Galaxy Fold cover screen): be
   extra tight on the topbar. */
@media (max-width: 420px) {
    .brand {
        display: none;  /* search bar gets full width */
    }
    .topbar {
        padding: 6px;
    }
    .timeframe-buttons button {
        padding: 3px 6px;
        font-size: 10px;
    }
    .topbar-select {
        font-size: 10px;
        padding: 3px 18px 3px 6px;
    }
}