/* Ensure login overlay fills viewport with no margin/gap.
   Use modern dynamic viewport units (dvh / svh) where available, with
   fallbacks to 100vh and safe-area insets. The fallback extra 200px
   helps cover older browsers or webviews that don't expose safe-area env(). */
#loginDiv {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Overlay background */
    background: #141516;
    z-index: 9999;
    display: block;
    overflow: hidden;
    /* Preferred: dynamic viewport height that adapts to browser UI (dvh).
       Add safe-area inset (env) and a 200px minimum extra to cover legacy cases. */
    height: calc(100dvh + max(env(safe-area-inset-bottom, 0px), 200px));
}

/* If the browser doesn't support dvh, use svh (small viewport height) */
@supports not (height: 100dvh) {
    #loginDiv {
        height: calc(100svh + max(env(safe-area-inset-bottom, 0px), 200px));
    }
}

/* Ultimate fallback: plain 100vh plus safe-area/200px fallback */
@supports not (height: 100svh) {
    #loginDiv {
        height: calc(100vh + max(env(safe-area-inset-bottom, 0px), 200px));
    }
}


html, body, body *, input, button, textarea, select, option, [contenteditable], [contenteditable="true"] {
    font-family: 'GainDay', Arial, sans-serif !important;
    font-weight: normal;
    font-style: normal;
}

html {
    overflow-y: scroll;
}

/* Centralized mobile flag: CSS is the source-of-truth for the mobile breakpoint.
   Default to 0 and flip to 1 when the viewport is at or below 680px. JS reads
   this property via getComputedStyle(document.documentElement). */
:root { --is-mobile: 0; }
@media (max-width: 680px) {
    :root { --is-mobile: 1; }
}

@font-face {
    /* Children Sans: another fallback option */
    font-family: 'GainDay';
    src: url('res/Burbin%20Casual%20NC.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


body {
    font-family: 'GainDay';
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: #181a1b;
    color: #e0e0e0;
    margin: 0;
    padding: 0;
}

/* Hidden state: JS enforces inline styles when needed; avoid using override tokens in stylesheet */
#loginDiv.hidden {
    display: none;
    visibility: hidden;
    pointer-events: none;
}

/* Small-screen fixes: prevent top/left gaps when panel was wider than viewport */
@media (max-width: 680px) {
    /* Ensure the overlay fills viewport and provides top padding so panel isn't flush to top */
    #loginDiv {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        display: flex;
    align-items: center; /* center vertically */
    justify-content: center; /* center horizontally */
        padding-top: 30px; /* give breathing room on small screens */
        overflow-y: auto; /* allow overlay to scroll vertically if panel taller than viewport */
    }

    /* Keep the login panel positioned relatively and centered horizontally */
    #loginPanel {
        position: relative;
        margin: 0 auto;
        width: min(340px, 96vw);
        max-width: 100%;
        min-width: 0; /* allow it to shrink to viewport */
        box-sizing: border-box;
        border-radius: 12px;
        transition: margin-top 180ms ease, width 180ms ease, transform 180ms ease;
    background: rgba(20,21,22,0.91); /* match overlay color */
    /* Increase vertical space: add 50px top & bottom padding to make panel 100px taller */
    padding-top: 74px; /* original inline was 24px; add 50px -> 74px */
    padding-bottom: 74px;
    /* Cap panel height on small viewports and allow internal scroll to avoid layout jumps */
    max-height: calc(100vh - 120px); /* leave 120px for top/bottom margins/padding */
    overflow-y: auto;
    }
}
/* Login box: fixed min-width, not responsive */
.login-box {
        min-width: 340px;
        width: auto;
        max-width: none;
    background: #181a1b;
    border-radius: 18px;
    box-shadow: 0 4px 24px #000a;
    padding: 32px 28px 28px 28px;
    margin: 48px auto 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}
input, button, textarea {
    font-family: inherit;
}

/* Prevent Flash Of Unstyled Text (FOIT/FOIT-like flicker) on inputs/buttons
   by using a stable system font stack for controls. The site body uses a
   custom webfont with `font-display: swap` so it may load shortly after
   paint — forcing controls to a system stack avoids a perceptible font
   change on refresh. Keep font-smoothing for visual parity. */
input, button, textarea, select {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* Disabled login button appearance: greyed out and non-clickable */
#login-form button[disabled], #login-btn[disabled] {
    background: #888;
    color: #eee;
    cursor: not-allowed;
    opacity: 0.9;
}
/* If the browser exposes safe-area insets, ensure the login panel content
     includes that inset as bottom padding so internal controls aren't occluded. */
@supports (padding: env(safe-area-inset-bottom)) {
    #loginPanel {
        padding-bottom: calc( (env(safe-area-inset-bottom, 0px)) + 24px );
    }
}
/* Utility: visually hide elements but keep them available to assistive tech */
.visually-hidden {
    position: absolute;
    height: 1px; width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
    border: 0; padding: 0; margin: -1px;
}
/* Sleek selector styles */
label {
    font-weight: 500;
    color: #f8d47c;
    margin-right: 6px;
    letter-spacing: 0.5px;
}

select {
    background: #23272a;
    color: #f8d47c;
    border: 1.5px solid #444;
    border-radius: 6px;
    padding: 8px 28px 8px 12px;
    font-size: 1em;
    outline: none;
    box-shadow: 0 2px 8px #0004;
    transition: border 0.2s, box-shadow 0.2s;
    appearance: none;
    cursor: pointer;
    width: 100%;
}

/* Consolidated font rules for selects and options.
   The last-authority font-family from the original file (Comic Kids)
   is preserved to avoid changing rendering unexpectedly. */
select, option, select * , option * {
    font-family: 'Comic Kids', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* WebKit specific: keep listbox/font consistency where supported */
select::-webkit-scrollbar, select::-webkit-inner-spin-button {
    font-family: inherit;
}

.select-wrap {
    position: relative;
    min-width: 160px;
    max-width: 300px;
    flex: 1;
}

.selector-bar {
    /* Desktop: stack selector rows so each label + dropdown lives on its own line */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 1.5em;
}
.selector-item {
    display: flex;
    align-items: center;
    gap: 8px; /* reduced gap between label and dropdown */
    width: 100%;
    justify-content: flex-start; /* left align */
}
.selector-item label {
    width: 100px; /* slightly narrower label to give selects more room */
    text-align: left;
}
.selector-item .select-wrap {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none; /* allow dropdown to expand fully */
}

/* Custom select styling (used when native select rendering can't be styled reliably) */
.custom-select-wrapper {
    position: relative;
    width: 100%;
    /* Inherit the global app font so custom selects match body */
    font-family: inherit;
}
.custom-select-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    background: #23272a;
    color: #f8d47c;
    border: 1.5px solid #444;
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    box-shadow: 0 2px 8px #0004;
    font-family: inherit;
    font-size: 1rem;
}
.custom-select-button:focus {
    outline: 2px solid #f8d47c44;
}
.custom-select-list {
    position: absolute;
    left: 0;
    right: 0;
    background: #23272a;
    border: 1px solid #444;
    border-radius: 6px;
    margin-top: 6px;
    max-height: 240px;
    overflow: auto;
    z-index: 3000;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    font-family: inherit;
    font-size: 1rem;
}
.custom-select-list li {
    list-style: none;
    padding: 8px 12px;
    cursor: pointer;
    color: #e0e0e0;
    font-family: inherit;
}
.custom-select-list li[aria-selected="true"],
.custom-select-list li:hover {
    background: #40444b;
    color: #f8d47c;
}

/* Hide native select but keep it accessible for forms */


.select-wrap::after {
    content: '▼';
    font-size: 0.8em;
    color: #f8d47c;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

select:focus {
    border-color: #f8d47c;
    box-shadow: 0 0 0 2px #f8d47c44;
}

select option {
    background: #23272a;
    color: #e0e0e0;
}

#main-logo {
    display: block;
    margin: 0 auto 20px auto;
}

#left-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 60px;
    height: 100vh;
    background: #2c2f33;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    box-shadow: 2px 0 5px rgba(0,0,0,0.3);
    z-index: 100;
}

#left-menu #main-logo {
    max-width: 40px;
    height: auto;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 20px;
}

.menu-items {
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex-grow: 1;
}

.menu-items a, .menu-footer a {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #8e9297;
    text-decoration: none;
    padding: 10px;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
}

.menu-items a svg, .menu-footer a svg {
    stroke: #8e9297;
    transition: stroke 0.2s;
}

.menu-items a:hover svg, .menu-footer a:hover svg {
    stroke: #f8d47c;
}

.menu-items a.active svg, .menu-footer a.active svg {
    stroke: #f8d47c;
}

.menu-items a:hover, .menu-footer a:hover {
    background: #40444b;
    color: #f8d47c;
}

.menu-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#main-content {
    margin-left: 60px;
    padding: 20px;
}

/* Minimal, scoped overlay fix: only active when overlay is shown (not .hidden).
   This avoids broad layout changes while preventing gaps and scrollbar offset issues. */
#loginDiv:not(.hidden) {
     /* Avoid override tokens — rely on selector specificity and inline styles
         when scripts must temporarily enforce a state. */
     position: fixed;
     top: 0;

}

/* Styled tooltip used by Trends panel (replaces native title tooltips) */
.styled-tooltip {
    position: fixed;
    z-index: 10000;
    /* Slightly softer background and subtle border for improved legibility */
    background: rgba(8,10,12,0.72);
    border: 1px solid rgba(248,212,124,0.08);
    color: #f8d47c; /* yellow on dark bg */
    padding: 10px 14px; /* more breathing room */
    border-radius: 10px;
    box-shadow: 0 12px 36px rgba(0,0,0,0.6);
    pointer-events: none;
    font-family: 'GainDay', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.38; /* looser leading to reduce crowding */
    white-space: pre-wrap; /* wrap long lines and preserve newlines */
    word-break: break-word;
    hyphens: auto;
    opacity: 0;
    transform: translateY(6px) scale(0.995);
    transition: opacity 180ms cubic-bezier(.2,.9,.25,1), transform 180ms cubic-bezier(.2,.9,.25,1);
    transform-origin: top left;
    max-width: 420px; /* allow more horizontal room for sentences */
    backdrop-filter: blur(6px) saturate(120%);
}

.styled-tooltip.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Highlight the hovered cell that shows a tooltip with a text-only glow
   so layout/height does not change. Keep color readable and use a soft
   multi-stop text-shadow for a pleasant glow. */
td.has-tooltip.tooltip-hover {
    color: #f8d47c;
    text-shadow: 0 0 8px rgba(248,212,124,0.95), 0 0 18px rgba(248,212,124,0.18);
}
 

    /* Global loading overlay */
    .global-loading-overlay {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(12,12,12,0.6);
        z-index: 20000;
        pointer-events: none; /* non-blocking by default; becomes blocking when visible */
        opacity: 0;
        visibility: hidden;
        transition: opacity 180ms ease, visibility 180ms ease;
    }
    .global-loading-overlay.visible {
        pointer-events: auto;
        opacity: 1;
        visibility: visible;
    }
    .global-loading-box {
        display: flex;
        gap: 12px;
        align-items: center;
        background: rgba(18,18,18,0.95);
        border: 1px solid rgba(255,255,255,0.04);
        padding: 12px 16px;
        border-radius: 10px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    }
    /* Dev-only debug info inside the loading box (hidden by default) */

/* Enforce a fixed height for the login panel (no min/max) as requested.
   We unset any min/max and use a single height so the panel doesn't resize
   unexpectedly. Adjust the `height` value if you want a different fixed size. */
#loginPanel {
    height: 640px;
    min-height: unset;
    max-height: unset;
    overflow: hidden;
}
    .global-loading-box .dbg {
        margin-left: 8px;
        font-size: 12px;
        color: rgba(255,255,255,0.6);
        display: none;
    }
    .global-loading-spinner {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 3px solid rgba(255,255,255,0.08);
        border-top-color: #f8d47c;
        animation: gd-spin 1s linear infinite;
    }
    @keyframes gd-spin { to { transform: rotate(360deg); } }
    .global-loading-message {
        color: #e6e6e6;
        font-size: 15px;
        font-weight: 600;
    }
h1 {
    color: #fff;
}

/* Trends list spacing and subtle separators */
.trends-list {
    display: flex;
    flex-direction: column;
    gap: 6px; /* space between items — shows the list background as a thin line */
    padding: 6px; /* inner padding so separators aren't flush to edges */
    background: #222428; /* slightly darker background that will appear as the thin line */
    border-radius: 8px;
}
.trend-item {
    background: #2c2f33; /* item background (slightly lighter than list bg) */
    border-radius: 6px;
    /* override inline border-bottom used previously */
    border-bottom: none !important;
}

/* Ensure hover highlight respects rounded corners */
.trend-item.tooltip-hover {
    background: rgba(248,212,124,0.03) !important;
}
.stock-block {
    background: #23272a;
    border-radius: 8px;
    box-shadow: 0 2px 8px #0008;
    margin-bottom: 24px;
    padding: 16px;
}
.stock-title {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 8px;
    color: #f8d47c;
}
table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 12px;
    background: #23272a;
    table-layout: fixed;
}
th, td {
    border: 1px solid #444;
    padding: 6px 10px;
    text-align: left;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
th {
    background: #2c2f34;
    color: #f8d47c;
}
tr:nth-child(even) td {
    background: #202225;
}
tr:nth-child(odd) td {
    background: #23272a;
}
a { color: #7ec7ff; }

/* Sign-based coloring used only for today vs yesterday comparisons */
.pos { color: #4caf50; }
.neg { color: #e57373; }
.neutral { color: inherit; }

/* Global responsive defaults */
* {
    box-sizing: border-box;
}

img, svg, video, canvas {
    max-width: 100%;
    height: auto;
}

/* Selector bar: show three stacked selector rows */
.selector-bar label {
    margin-right: 8px;
}
.selector-bar select {
    margin-right: 12px;
}

/* Tables: make scrollable on small screens */
.table-wrap {
    width: 100%;
    overflow-x: hidden;
}
/* Removed min-width to prevent horizontal scroll */

/* Compact key/value tables (nested data) */
.kv-table {
    width: 100%;
    table-layout: fixed;
}
.kv-table td:first-child {
    width: 44%;
}
.kv-table td:last-child {
    width: 56%;
}

/* Make nested event details more compact */
.event-details .kv-table {
    font-size: 0.95em;
}
/* Login box and logo responsive styles */
.login-box {
    /* Consolidated login box: merged properties from duplicated blocks */
    min-width: 340px;
    width: auto;
    max-width: 400px;
    background: rgba(24, 26, 27, 0.9);
    border-radius: 18px;
    box-shadow: 0 4px 24px #000a;
    padding: 32px 28px 28px 28px;
    margin: 48px auto 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}
.login-logo {
    width: 120px;
    max-width: 60vw;
    margin-bottom: 18px;
    display: block;
}

/* Entrance animation for login panel */
@keyframes panelEnter {
    from { opacity: 0; transform: translateY(10px) scale(0.995); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes panelExit {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(6px) scale(0.998); }
}

#loginPanel.animate-enter {
    animation: panelEnter 260ms cubic-bezier(0.2,0.8,0.2,1) both;
}

#loginPanel.animate-exit {
    animation: panelExit 180ms ease both;
}
@media (max-width: 680px) {
    .login-box {
        max-width: 96vw;
        padding: 18px 8vw 18px 8vw;
        margin-top: 18px;
        border-radius: 14px;
    }
    .login-logo {
        width: 80px;
        max-width: 40vw;
        margin-bottom: 12px;
    }
}
 
/* When viewport is narrow, ensure the overlay and panel align to top-left to avoid gaps */
@media (max-width: 680px) {
    #loginDiv {
        display: flex;
        align-items: center; /* center vertically */
        justify-content: center; /* center horizontally */
        padding: 12px;
        overflow-x: hidden;
    }

    /* Override inline styles on #loginPanel to remove centering/margin when narrow */
    #loginPanel {
        position: relative;
        margin: 0;
        left: 0;
        top: 0;
        width: auto;
        max-width: none;
        box-sizing: border-box;
    }
}

/* For viewports narrower than the default panel width (680px), enforce mobile width */
@media (max-width: 680px) {
    /* Center horizontally but align near the top vertically */
    #loginDiv {
        align-items: center; /* center vertically */
        justify-content: center; /* center horizontally */
        padding: 18px;
    }

    /* Make login panel the mobile width (340px) but allow a tiny margin on very small screens */
    #loginPanel {
        min-width: 340px; /* prevent squeezing below 340px */
        width: 340px;
        max-width: none;
        margin: 18px auto 0 auto; /* horizontally center */
        box-sizing: border-box;
    }

    /* If viewport is smaller than 340px, allow the overlay to scroll horizontally so panel keeps its width */
    @media (max-width: 339px) {
        #loginDiv {
            overflow-x: auto;
            padding-left: 12px;
            padding-right: 12px;
        }
    }
}

/* Events panel: two-column layout */
.events-container {
    display: flex;
    gap: 18px;
    align-items: stretch;
    height: 100%; /* allow children to stretch to panel height */
}
.events-calendar {
    width: 380px;
    flex: 0 0 380px;
    background: #23272a;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.events-calendar-list { list-style: none; padding: 0; margin: 8px 0 0 0; display:flex; flex-direction:column; gap:8px; overflow-y: auto; }
.events-calendar-list,
.events-list-wrap {
    /* Keep scroll behavior but hide scrollbars visually */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}
.events-calendar-list::-webkit-scrollbar,
.events-list-wrap::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
    width: 0;
    height: 0;
}
.calendar-day { display:flex; justify-content:space-between; align-items:center; padding:8px; border-radius:6px; cursor:pointer; background:transparent; color:#e0e0e0; }
.calendar-day:hover, .calendar-day.active { background: #40444b; color: #fff; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.45); }

.events-list-view {
    flex: 1 1 auto;
    background: #1e2021;
    border-radius: 8px;
    border: 1px solid #333;
    padding: 12px;
    overflow: hidden;
    display:flex;
    flex-direction: column;
    box-sizing: border-box;
}
.events-list-wrap { overflow-y: auto; padding-right: 6px; max-height: 100%; }
.events-list { list-style:none; padding:0; margin:8px 0 0 0; display:flex; flex-direction:column; gap:12px; }
.events-day { background: #23272a; border: 1px solid #444; border-radius:8px; padding:10px; }
.events-day-header { font-weight:700; color:#f8d47c; margin-bottom:8px; }
.event-item { padding:10px; background: transparent; border-radius:8px; cursor:pointer; }
.event-item:hover, .event-item.active { background:#40444b; transform: translateY(-2px); color:#fff; box-shadow:0 8px 24px rgba(0,0,0,0.45); }

/* Make Events layout stack on narrow screens */
@media (max-width: 680px) {
    .events-container { flex-direction: column; }
    .events-calendar { width: 100%; max-height: 220px; }
}

/* Calendar grid styles (months stacked vertically) */
.calendar-month { margin-bottom: 18px; padding: 12px; background: #1f2122; border-radius: 8px; border: 1px solid #333; }
.month-title { font-weight:700; color:#f8d47c; margin-bottom:8px; }
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.month-grid.header { margin-bottom:6px; }
.month-grid.header .dow { color:#cfcfcf; font-size:0.85em; text-align:center; }

/* Color weekend headers (Sun and Sat) red for emphasis */
.month-grid.header .dow:nth-child(1),
.month-grid.header .dow:nth-child(7) {
    color: #e57373;
    font-weight: 700;
}
.day-cell {
    height: 44px; /* decreased height for a tighter grid */
    border-radius: 6px;
    background: transparent;
    border: 1px solid transparent;
    color: #e0e0e0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* vertically center the contents */
    padding: 6px;
    box-sizing: border-box;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 180ms ease, background 150ms ease, color 150ms ease;
}
.day-cell .day-num {
    font-size: 0.95em;
    font-weight: 600;
    display: block;
    width: 100%;
    text-align: center;
    line-height: 1; /* tighter line height to help centering */
}
.day-cell .day-mark {
    margin-top: 6px; /* keep a small gap below the number instead of pushing it */
    font-size: 0.78em;
    color: #f8d47c;
    opacity: 0.95;
}
.day-empty { background: transparent; pointer-events: none; opacity: 0.05; }
.day-cell:hover {
    background: #40444b;
    transform: translateY(-2px);
    color: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}

/* Active/selected day: make this the yellow highlighted state with black number */
.day-cell.active {
    background: #f8d47c !important;
    transform: translateY(-2px);
    color: #000 !important;
    box-shadow: 0 12px 36px rgba(0,0,0,0.55) !important;
}

/* Color the numeric day for Sundays (first column) and Saturdays (last column)
   Use nth-child math for the grid; also provide a :has()-aware rule so days
   that already show events keep the event color where the browser supports :has(). */
.month-grid.days .day-cell:nth-child(7n+1) .day-num,
.month-grid.days .day-cell:nth-child(7n) .day-num {
    color: #e57373;
}

/* Reliable weekend selector: use explicit weekend class added by JS */
.month-grid.days .day-cell.weekend .day-num {
    color: #e57373;
}

@supports selector(.day-cell:has(.day-mark)) {
    .month-grid.days .day-cell:not(:has(.day-mark.has-events)):nth-child(7n+1) .day-num,
    .month-grid.days .day-cell:not(:has(.day-mark.has-events)):nth-child(7n) .day-num {
        color: #e57373;
    }
}

/* Color and soft glow the visible day number when that day has events.
   Uses modern :has() selector where available; preserves small visual
   fallback by keeping the existing .day-mark styling. */
@supports selector(.day-cell:has(.day-mark)) {
    .day-cell:has(.day-mark.has-events) .day-num {
        color: #f8d47c;
        text-shadow: 0 8px 24px rgba(248,212,124,0.20), 0 0 8px rgba(248,212,124,0.12);
        font-weight: 800;
        transition: color 180ms ease, text-shadow 180ms ease, transform 160ms ease;
    }
    .day-cell:has(.day-mark.has-events):hover .day-num,
    .day-cell:has(.day-mark.has-events).active .day-num {
        transform: translateY(-2px) scale(1.03);
    }
}

/* Highlighted event date: make the OUTER cell the single yellow rounded box
   and ensure the inner number is plain black and visible. Hide any small
   marker elements used as fallbacks. This consolidates previous conflicting
   rules and overrides :has()-based styling where necessary. */
.day-cell.has-event {
    /* event dates: grey rounded box with white numbers */
    background: #40444b !important;
    color: #fff !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45) !important;
}

/* When an event-day is selected/active, show the yellow highlight (override) */
.day-cell.has-event.active,
.day-cell.active {
    background: #f8d47c !important;
    color: #000 !important; /* black text on yellow */
    box-shadow: 0 12px 36px rgba(0,0,0,0.55) !important;
}

/* Ensure the day number appears clean on event cells (no inner marker) */
.month-grid.days .day-cell.has-event .day-num,
.day-cell.has-event .day-num {
    background: transparent !important;
    color: inherit !important; /* inherit white or black depending on active state */
    padding: 0 !important;
    border-radius: 0 !important;
    display: block !important;
    font-weight: 800 !important;
    text-shadow: none !important; /* override glow from :has() rules */
}
/* hide small dot marker and any other markers */
.day-cell.has-event .day-mark { display: none !important; }

/* Make calendar scroll area inside the aside (use inner list as scroller) */
#events-calendar-list { overflow-y: auto; padding-right: 6px; }


/* Mobile adjustments */
@media (max-width: 680px) {
    body {
        padding: 12px;
        font-size: 15px;
    }
    h1 {
        font-size: 1.35rem;
        margin: 0 0 12px 0;
    }
    .selector-bar {
        display: block;
        gap: 0.75em;
    }
    label {
        font-size: 0.95em;
    }
    select {
        width: 100%;
        min-width: 0;
        font-size: 1em;
    }
    .stock-block {
        padding: 12px;
        margin-bottom: 16px;
    }
    table {
        font-size: 0.95em;
    }
    th, td {
        padding: 6px 8px;
    }
}

/* Compact Calendar Events */
.events-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.event-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
    background: #23272a;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 8px 10px;
}
.event-key {
    color: #f8d47c;
    font-weight: 600;
    overflow-wrap: anywhere;
}
.event-val {
    color: #e0e0e0;
    text-align: right;
    overflow-wrap: anywhere;
}
.event-item {
    background: #23272a;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 6px 10px;
}

/* Events panel toolbar: scope pills and Today button */
.events-toolbar { display:flex; align-items:center; justify-content:space-between; }
.scope-label { font-size:0.95em; }
.scope-pill {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.06);
    color: #e0e0e0;
    padding: 6px 12px;
    border-radius: 16px;
    cursor: pointer;
    font-weight: 600;
}
.scope-pill:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,0.45); }
.scope-pill.selected { background: #f8d47c; color: #111; border-color: rgba(0,0,0,0.06); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,0.45); }
.scope-pill:focus { outline: 2px solid rgba(248,212,124,0.12); }
.today-btn { font-weight:700; }
.event-item > summary {
    cursor: pointer;
    list-style: none;
    color: #f8d47c;
    font-weight: 600;
}
.event-item > summary::-webkit-details-marker {
    display: none;
}
.event-details {
    margin-top: 6px;
}

/* Trends list: subtle hover scale (no JS toggling) and per-cell highlight.
   - The hovered list item slightly lifts and scales to give a tactile "game" vibe.
   - Individual cells under the pointer get a soft highlight. Elements that the
     tooltip manager marks with `.tooltip-hover` also receive the same highlight.
   - Respects user preference for reduced motion. */
.trends-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Make the trends header stick to the top of the scrolling panel so column
   labels remain visible while the list scrolls. The top offset matches the
   main content padding to avoid overlapping the page edge. */
.trends-header {
    position: sticky;
    top: 0px; /* matches #main-content padding */
    /* Put the header above hovered items (hovered items use z-index: 9999).
       This ensures the header visually stays in front while list items can
       still lift underneath it. */
    z-index: 12050;
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
    border-radius: 8px;
    background: linear-gradient(180deg, #23272a, #23272a); /* match header bg */
    padding: 6px 8px;
}
/* When header becomes stuck at the top, add a strong dark shadow for
   clear separation from content scrolled underneath. */
.trends-header.stuck {
    box-shadow: 0 28px 80px rgba(0,0,0,0.98), 0 12px 44px rgba(0,0,0,0.9) !important;
    backdrop-filter: blur(6px) saturate(120%);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: box-shadow 220ms cubic-bezier(.2,.9,.25,1), backdrop-filter 220ms ease;
}
.trends-list .trend-item {
    transition: transform 180ms cubic-bezier(.2,.9,.25,1), box-shadow 180ms ease, background-color 120ms linear;
    transform-origin: center top;
    will-change: transform;
    position: relative; /* allow z-index to lift the hovered item */
}
.trends-list .trend-item:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 12px 30px rgba(0,0,0,0.6);
    z-index: 6;
}

/* Highlight the specific cell under pointer. The tooltip manager adds
   .tooltip-hover to elements with data-tooltip; support both that class
   and direct :hover to cover numeric cells and links. */
.trends-list .trend-item .has-tooltip.tooltip-hover,
.trends-list .trend-item .has-tooltip:hover,
.trends-list .trend-item a.trends-symbol-link:hover,
.trends-list .trend-item > div:nth-child(2) div:hover {
    /* Letter-only glow so the row height doesn't change */
    color: #f8d47c;
    text-shadow: 0 0 8px rgba(248,212,124,0.95), 0 0 18px rgba(248,212,124,0.18);
}

/* Reduced motion: disable the transform-based lift/scale to respect preferences */
@media (prefers-reduced-motion: reduce) {
    .trends-list .trend-item,
    .trends-list .trend-item:hover {
        transition: none;
        transform: none;
        box-shadow: none;
    }
}

/* Make sure the trends container does not clip the lifted/expanded list items.
   We only change the immediate container so panel vertical scrolling remains
   handled by the parent .content-panel. This allows the hovered item to "stick
   out" on both left and right while preserving panel scrolling behavior. */
#trends-table-container {
    overflow: visible; /* allow children to overflow when hovered */
    position: relative; /* establish stacking context for lifted items */
}

/* Sortable header column visuals */
.trends-header .col.sortable { cursor: pointer; position: relative; }
.trends-header .col.sortable::after {
    content: '';
    display: inline-block;
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid rgba(255,255,255,0.12);
    position: absolute;
    right: 8px; top: 50%; transform: translateY(-60%);
    opacity: 0; transition: opacity 160ms ease, transform 160ms ease;
}
.trends-header .col.sortable.sort-asc::after {
    border-top-color: rgba(255,255,255,0.9);
    transform: translateY(-140%) rotate(0deg);
    opacity: 1;
}
.trends-header .col.sortable.sort-desc::after {
    /* flip to point down by swapping borders */
    border-top: none;
    border-bottom: 6px solid rgba(255,255,255,0.9);
    transform: translateY(10%) rotate(0deg);
    opacity: 1;
}
.trends-header .col.sortable.active { color: #fff; }

/* Sector filter pills */
.sector-filter {
    margin-bottom: 6px;
    font-size: 0.95em; /* match table text sizing */
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.sector-filter .sector-pill {
    transition: background-color 140ms ease, color 140ms ease, transform 120ms ease;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; /* don't stretch */
}
.sector-filter .sector-pill { color: #e0e0e0; background: transparent; }
.sector-filter .sector-pill:hover { background: rgba(248,212,124,0.06); color: #fff; }
.sector-filter .sector-pill.selected { background: #f8d47c; color: #222; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.35); border-color: rgba(0,0,0,0.08); }
.sector-filter .sector-pill:focus { outline: 2px solid rgba(248,212,124,0.18); }
.sector-filter .sector-actions button { font-weight:600; }

/* Ensure the All toggle visually matches other sector pills */
.sector-filter .sector-toggle-all {
    padding: 6px 10px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.06);
    display: inline-flex; align-items: center; justify-content: center; background: #3a3d41; color: #fff;
    margin-bottom: 6px; cursor: pointer;
}
.sector-filter .sector-toggle-all.selected { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.35); }

/* Also ensure the list itself doesn't clip children (safer fallback). */
.trends-list {
    overflow: visible;
}

/* Ensure the Trends panel allows horizontal overflow so lifted items can stick out
   on both left and right edges. Keep vertical scrolling (overflow-y) intact. */
#trends-panel {
    overflow-x: visible; /* allow horizontal overflow */
    overflow: visible; /* ensure both axes allow overflow */
    position: relative; /* create a stacking context above the left menu */
    z-index: 300; /* above left menu (left-menu uses z-index:100) */
}

/* Mirror the same behavior for the Portfolio panel so hovered/risen items
   can visually lift out of the scrolling container without being clipped. */
#portfolio-list {
    overflow: visible; /* allow children to overflow when hovered */
    position: relative; /* stacking context for lifted items */
}
#portfolio-panel {
    overflow-x: visible;
    overflow: visible;
    position: relative;
    z-index: 300;
}

/* Make sure lifted item z-index is above the left menu (z-index:100). */
.trends-list .trend-item:hover {
    z-index: 9999; /* put the hovered item above most UI chrome */
}

/* Make most UI text non-selectable while preserving selectable form controls
   and contenteditable areas so the app remains usable (inputs, textareas, selects). */
:root, html, body, body * {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

/* Exceptions: allow selection in actual form controls and editable regions */
input, textarea, select, option, [contenteditable], [contenteditable="true"] {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

/* Also ensure that the browser's selection styling for inputs remains usable */
input::selection, textarea::selection {
    background: rgba(248,212,124,0.12);
}

/* When panels are programmatically focused (we call .focus() for a11y),
   browsers may draw a default outline (often white or blue). Replace that
   with a subtle app-themed focus ring via :focus-visible so keyboard users
   still get a clear indicator while mouse interactions are unchanged. */
.content-panel:focus {
    /* fallback for browsers without :focus-visible support */
    outline: none;
}
.content-panel:focus-visible {
    box-shadow: 0 0 0 4px rgba(248,212,124,0.10), 0 6px 18px rgba(0,0,0,0.6);
    border-radius: 8px;
    outline: none;
}

/* Be explicit for named panels to avoid surprises from browser default outlines */
#trends-panel:focus, #portfolio-panel:focus, #financials-panel:focus, #settings-panel:focus {
    outline: none;
}
#trends-panel:focus-visible, #portfolio-panel:focus-visible, #financials-panel:focus-visible, #settings-panel:focus-visible {
    box-shadow: 0 0 0 4px rgba(248,212,124,0.10), 0 6px 18px rgba(0,0,0,0.6);
    border-radius: 8px;
    outline: none;
}