/* css/styles.css */

/* ─── DESIGN TOKENS ─────────────────────────────────────────────────────── */
:root {
    --bg:            hsl(220 18% 10%);
    --surface:       hsl(220 18% 12%);
    --surface-hover: hsl(220 18% 16%);
    --surface-flash: hsl(198 95% 18%);
    --text-1:        hsl(220 18% 96%);
    --text-2:        hsl(220 12% 67%);
    --accent:        hsl(274 100% 63%);
    --add:           hsl(146 70% 55%);
    --rem:           hsl(3   74% 63%);

    --bloomberg: hsl(213 93% 60%);
    --reuters:   hsl(45  97% 55%);
    --wsj:       hsl(162 63% 44%);
    --barrons:   hsl(162 63% 44%);
    --cnbc:      hsl(45  97% 55%);
    --businesswire: hsl(45  97% 55%);
    --macro:     hsl(220  8% 60%);

    --radius:   .5rem;
    --duration-short: .25s;
    --duration-long: 3s;
}

/* ─── RESET / GLOBAL ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text-1);
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
}

/* Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--surface-hover) transparent;
}
*::-webkit-scrollbar { width: .6rem; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--surface-hover);
    border-radius: 1rem;
}

/* ─── HEADER ────────────────────────────────────────────────────────────── */
header {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 1rem 1.5rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(15, 17, 22, .85);
    border-bottom: 1px solid hsl(220 18% 20%);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -.015em;
    display: flex;
    align-items: center;
    gap: .75rem;
}
header::before {
    content: "";
    flex: 0 0 .75rem;
    height: .75rem;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 .5rem .15rem var(--accent);
}

.filter-controls {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}

#search {
    background: var(--surface);
    color: var(--text-1);
    border: 1px solid hsl(220 18% 20%);
    border-radius: var(--radius);
    padding: .35rem .65rem;
    font-size: .875rem;
}
#search:focus {
    outline: 1px solid var(--accent);
}

/* Toggle Switch */
.toggle-switch { display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 500; cursor: pointer; }
.switch { position: relative; display: inline-block; width: 34px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--surface-hover); transition: .4s; border-radius: 20px; }
.slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--accent); }
input:checked + .slider:before { transform: translateX(14px); }

/* ─── MAIN / FEED ───────────────────────────────────────────────────────── */
main {
    flex: 1;
    padding: 0 1.25rem 2rem;
    scroll-behavior: smooth;
}
ul { list-style: none; padding: 0; margin: 0; }

li {
    display: grid;
    grid-template-columns: 1.75rem 6.25rem 5.25rem 2.5rem 1fr auto;
    grid-template-areas: "symbol time ticker indicator headline source";
    align-items: center;
    gap: .8rem;
    padding: 0.6rem .25rem;
    background: var(--surface);
    border-radius: var(--radius);
    margin-block: .3rem;
    transition: background-color var(--duration-short) ease,
                box-shadow var(--duration-short) ease;
    line-height: 1.35;
}

li:hover {
    background: var(--surface-hover);
    box-shadow: 0 2px 8px -2px hsl(220 18% 5% / .6);
}
li.flash { background: var(--surface-flash); animation: flashOut var(--duration-long) forwards; }
li.parent-flash { animation: parentFlash .75s ease-in-out; }
@keyframes flashOut { 0% { background: var(--surface-flash); } 100% { background: var(--surface); } }
@keyframes parentFlash { 0%, 100% { background: var(--surface); } 50% { background: var(--accent); } }

/* cells */
.symbol { grid-area: symbol; font-weight: 600; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; width: 1.75rem; }
.symbol.add { color: var(--add); }
.time { grid-area: time; font-variant-numeric: tabular-nums; color: var(--text-2); font-size: .875rem; white-space: nowrap; }
.ticker { grid-area: ticker; font-weight: 600; font-size: .875rem; text-align: center; padding: .35rem .65rem; border-radius: var(--radius); background: hsl(220 14% 18%); color: hsl(220 18% 96%); text-decoration: none; transition: opacity var(--duration-short); }
.ticker:hover { opacity: .8; }
.headline { grid-area: headline; word-break: break-word; line-height: 1.35; }
.source { grid-area: source; font-size: .70rem; font-weight: 600; padding: .35rem .7rem; border-radius: var(--radius); text-transform: uppercase; letter-spacing: .03em; background: hsl(220 14% 18%); text-decoration: none; transition: opacity var(--duration-short); }
.source:hover { opacity: .8; }
.source.bloomberg { color: var(--bloomberg); }
.source.reuters   { color: var(--reuters); }
.source.wsj       { color: var(--wsj); }
.source.cnbc      { color: var(--cnbc); }
.source.barrons   { color: var(--barrons); }
.source.businesswire { color: var(--businesswire); }
.source.undefined { color: var(--macro); }

/* Indicators & Popover */
/* Indicators & Popover */
.indicator-cell {
    grid-area: indicator;
    position: relative; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.group-bubble {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    background-color: var(--accent);
    color: white;
    box-shadow: 0 0 .5rem 0 var(--accent);
}
.group-bubble:hover {
    background-color: hsl(274, 90%, 70%);
}

#popover-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsla(0, 0%, 0%, 0.6);
    z-index: 19; /* Below the popover */
}

#group-popover {
    display: none; 
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: hsl(220 18% 8%);
    color: var(--text-1);
    padding: 1.5rem 2rem;
    border-radius: var(--radius);
    border: 1px solid hsl(220 18% 20%);
    box-shadow: 0 4px 12px -2px hsl(220 18% 5% / .7);
    z-index: 20;

    /* --- CHANGE #1: Make the popover even wider --- */
    width: 950px; 
    
    max-width: 90vw;
    font-size: .875rem;
    line-height: 1.5;
}

.popover-title {
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 1rem;
    display: block;
    white-space: nowrap;
}

.popover-list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 450px; 
    overflow-y: auto;
}

/* --- UPDATED SECTION START --- */

.popover-list li {
    display: grid;
    grid-template-columns: 6.25rem 5.25rem 1fr;
    grid-template-areas: "time ticker headline";
    align-items: center;
    gap: 1.25rem;
    margin: 0;

    /* --- CHANGE #2: Add horizontal padding for breathing room --- */
    padding: .75rem 1rem; /* Was .75rem 0 */
    
    border-bottom: 1px solid hsl(220 18% 15%);
}

.popover-list li:last-child {
    border-bottom: none;
}

/* Assign each element to its named grid area */
.popover-time {
    grid-area: time;
    font-variant-numeric: tabular-nums;
    color: var(--text-2);
}

.popover-list .ticker {
    grid-area: ticker;
    /* Apply same visual style as main feed's ticker */
    font-weight: 600;
    text-align: center;
    padding: .35rem .65rem;
    border-radius: var(--radius);
    background: hsl(220 14% 18%);
    color: hsl(220 18% 96%);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.popover-list a {
    grid-area: headline;
    text-decoration: none;
    overflow: hidden; 
}

.popover-list .headline {
    color: var(--text-1);
    transition: color .2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.popover-list a:hover .headline {
    color: var(--accent);
    text-decoration: underline;
}

/* ─── SMALL SCREENS ─────────────────────────────────────────────────────── */
@media(max-width: 768px) {
    li {
        grid-template-columns: 1.25rem 2.5rem 1fr auto;
        grid-template-areas: "symbol indicator headline source";
        padding: .8rem;
    }
    .time, .ticker { display: none; }
}