/**
 * Overview Tab Redesign - Polished Visual Design
 * Clean, minimal aesthetic with strategic sage green accents
 * Design system compliant for dark/light theme compatibility
 */

/* ===================================
   OVERVIEW 2x2 GRID LAYOUT
   =================================== */

.overview-grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
}

@media (max-width: 900px) {
    .overview-grid-2x2 {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
}

/* ===================================
   QUADRANT CARD BASE - POLISHED
   =================================== */

.overview-quadrant {
    background: var(--color-surface);
    border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--motion-dur-std) ease;
}

.overview-quadrant:hover {
    box-shadow: var(--shadow-md);
}

.overview-quadrant__header {
    padding: var(--space-4) var(--space-5);
    background: transparent;
}

.overview-quadrant__title-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.overview-quadrant__icon {
    width: 18px;
    height: 18px;
    color: var(--color-interactive-primary);
    opacity: 0.9;
}

.overview-quadrant__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0;
    letter-spacing: 0.01em;
}

.overview-quadrant__content {
    padding: 0 var(--space-5) var(--space-5);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.overview-quadrant__footer {
    padding: var(--space-3) var(--space-5);
    background: color-mix(in srgb, var(--color-surface-alt) 50%, transparent);
}

/* ===================================
   WHAT HAPPENED - HEADLINES
   =================================== */

.overview-ai-summary {
    padding: var(--space-3) var(--space-4);
    background: color-mix(in srgb, var(--color-interactive-primary) 8%, transparent);
    border-left: 2px solid var(--color-interactive-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin-bottom: var(--space-4);
}

.overview-ai-summary__text {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
}

.overview-ai-summary__text--generated {
    font-style: normal;
}

.overview-headlines {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.overview-headline-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-2);
    margin: 0 calc(var(--space-2) * -1);
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-sm);
    transition: background var(--motion-dur-quick) ease;
}

.overview-headline-item:hover {
    background: color-mix(in srgb, var(--color-surface-alt) 60%, transparent);
}

.overview-headline-item__number {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-tertiary);
    font-family: var(--font-mono);
}

.overview-headline-item__text {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    line-height: 1.5;
    font-weight: var(--font-weight-normal);
}

.overview-empty-inline {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin: 0;
    padding: var(--space-4) 0;
    text-align: center;
}

/* ===================================
   WHO'S AFFECTED - STOCKS & PEOPLE
   =================================== */

.overview-subsection-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-tertiary);
    margin: 0 0 var(--space-2) 0;
    opacity: 0.8;
}

.overview-subsection-icon {
    width: 12px;
    height: 12px;
    opacity: 0.6;
}

/* Compact Stocks List */
.overview-compact-stocks {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.overview-compact-stock {
    display: grid;
    grid-template-columns: 20px 56px 1fr auto;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-2);
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--motion-dur-quick) ease;
}

.overview-compact-stock:hover {
    background: color-mix(in srgb, var(--color-surface-alt) 70%, transparent);
}

.overview-compact-stock__rank {
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-tertiary);
    text-align: center;
    font-family: var(--font-mono);
}

.overview-compact-stock__ticker {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    font-family: var(--font-mono);
}

.overview-compact-stock__name {
    font-size: 11px;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.overview-compact-stock__change {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-mono);
    text-align: right;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.overview-compact-stock__change--positive {
    color: var(--color-sentiment-positive);
    background: color-mix(in srgb, var(--color-sentiment-positive) 10%, transparent);
}

.overview-compact-stock__change--negative {
    color: var(--color-sentiment-negative);
    background: color-mix(in srgb, var(--color-sentiment-negative) 10%, transparent);
}

.overview-compact-stock__change--neutral {
    color: var(--color-text-tertiary);
}

/* Key People Compact */
.overview-compact-people {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: var(--space-3);
}

.overview-compact-person {
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--motion-dur-quick) ease;
}

.overview-compact-person:hover {
    background: color-mix(in srgb, var(--color-surface-alt) 70%, transparent);
}

.overview-compact-person__avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--color-interactive-primary-subtle);
    color: var(--color-interactive-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: var(--font-weight-bold);
}

.overview-compact-person__info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.overview-compact-person__name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.overview-compact-person__role {
    font-size: 10px;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* ===================================
   THE RIPPLE - MINI NETWORK PREVIEW
   =================================== */

.overview-ripple-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
}

.overview-ripple-visual {
    position: relative;
    width: 100%;
    max-width: 280px;
    height: 160px;
}

.overview-ripple-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    background: var(--color-interactive-primary-subtle);
    border: 2px solid var(--color-interactive-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-interactive-primary) 25%, transparent);
}

.overview-ripple-center--topic {
    background: var(--color-interactive-primary-subtle);
    border-color: var(--color-interactive-primary);
}

.overview-ripple-center__ticker {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    font-family: var(--font-mono);
    text-align: center;
    line-height: 1.2;
}

.overview-ripple-connections {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.overview-ripple-node {
    position: absolute;
    display: flex;
    align-items: center;
}

.overview-ripple-node--pos1 {
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: row-reverse;
}

.overview-ripple-node--pos2 {
    right: 5%;
    top: 35%;
    transform: translateY(-50%);
}

.overview-ripple-node--pos3 {
    right: 5%;
    top: 65%;
    transform: translateY(-50%);
}

.overview-ripple-node__line {
    width: 32px;
    height: 1px;
    background: var(--color-border);
}

.overview-ripple-node__content {
    background: var(--color-surface-alt);
    border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.overview-ripple-node__ticker {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    font-family: var(--font-mono);
}

.overview-ripple-node__type {
    font-size: 9px;
    color: var(--color-text-tertiary);
    text-transform: lowercase;
}

.overview-ripple-more {
    text-align: center;
}

.overview-ripple-more__text {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

/* ===================================
   HOW PEOPLE FEEL - SENTIMENT GAUGE
   =================================== */

.overview-sentiment-display {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-3);
    margin-top: auto;
    margin-bottom: auto;
    padding: var(--space-3) var(--space-4);
}

.overview-sentiment-bar {
    position: relative;
    height: 8px;
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--color-sentiment-negative) 20%, transparent) 0%,
        color-mix(in srgb, var(--color-surface-tertiary) 60%, transparent) 50%,
        color-mix(in srgb, var(--color-sentiment-positive) 30%, transparent) 100%
    );
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-3);
}

.overview-sentiment-bar__fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 0.5s ease-out;
}

.overview-sentiment-bar__fill--bearish,
.overview-sentiment-bar__fill--negative {
    background: linear-gradient(90deg, var(--color-sentiment-negative) 0%, color-mix(in srgb, var(--color-sentiment-negative) 70%, white) 100%);
}

.overview-sentiment-bar__fill--neutral {
    background: linear-gradient(90deg, var(--color-sentiment-neutral) 0%, color-mix(in srgb, var(--color-sentiment-neutral) 70%, white) 100%);
}

.overview-sentiment-bar__fill--positive,
.overview-sentiment-bar__fill--bullish {
    background: linear-gradient(90deg, var(--color-sentiment-positive) 0%, color-mix(in srgb, var(--color-sentiment-positive) 70%, white) 100%);
}

.overview-sentiment-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-2);
    padding: 0 var(--space-1);
}

.overview-sentiment-label {
    font-size: 10px;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.02em;
}

.overview-sentiment-label--bearish {
    color: var(--color-sentiment-negative);
}

.overview-sentiment-label--bullish {
    color: var(--color-sentiment-positive);
}

.overview-sentiment-value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.overview-sentiment-insight {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: color-mix(in srgb, var(--color-surface-alt) 70%, transparent);
    border-radius: var(--radius-md);
}

.overview-sentiment-insight__text {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
}

/* ===================================
   PAY ATTENTION TO - INSIGHT CARDS
   =================================== */

.overview-attention-section {
    background: var(--color-surface);
    border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.overview-attention-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
}

.overview-attention-title-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.overview-attention-icon {
    width: 18px;
    height: 18px;
    color: var(--color-interactive-primary);
}

.overview-attention-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0;
}

.overview-attention-badge {
    font-size: 11px;
    color: var(--color-text-muted);
    padding: var(--space-1) var(--space-3);
    background: color-mix(in srgb, var(--color-surface-alt) 70%, transparent);
    border-radius: var(--radius-full);
}

.overview-attention-content {
    padding: 0 var(--space-5) var(--space-5);
}

.overview-attention-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

@media (max-width: 900px) {
    .overview-attention-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .overview-attention-grid {
        grid-template-columns: 1fr;
    }
}

/* Insight Card - Polished */
.overview-insight-card {
    background: color-mix(in srgb, var(--color-surface-alt) 50%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    cursor: pointer;
    transition: all var(--motion-dur-std) ease;
}

.overview-insight-card:hover {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.overview-insight-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.overview-insight-card__stock {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.overview-insight-card__ticker {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    font-family: var(--font-mono);
}

.overview-insight-card__name {
    font-size: 11px;
    color: var(--color-text-muted);
    line-height: 1.3;
}

.overview-insight-card__recommendation {
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.overview-insight-card__recommendation--bullish {
    background: color-mix(in srgb, var(--color-interactive-primary) 20%, transparent);
    color: var(--color-interactive-primary);
}

.overview-insight-card__recommendation--bearish {
    background: color-mix(in srgb, var(--color-sentiment-negative) 15%, transparent);
    color: var(--color-sentiment-negative);
}

.overview-insight-card__recommendation--neutral {
    background: var(--color-surface-tertiary);
    color: var(--color-text-muted);
}

.overview-insight-card__recommendation--cautious {
    background: color-mix(in srgb, var(--color-sentiment-neutral) 15%, transparent);
    color: var(--color-sentiment-neutral);
}

.overview-insight-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-3);
    margin-top: auto;
}

.overview-insight-card__soi {
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    font-family: var(--font-mono);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
}

.overview-insight-card__soi--high {
    background: color-mix(in srgb, var(--color-interactive-primary) 20%, transparent);
    color: var(--color-interactive-primary);
}

.overview-insight-card__soi--medium {
    background: color-mix(in srgb, var(--color-sentiment-neutral) 12%, transparent);
    color: var(--color-sentiment-neutral);
}

.overview-insight-card__soi--low {
    background: var(--color-surface-tertiary);
    color: var(--color-text-muted);
}

.overview-insight-card__arrow {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: var(--radius-full);
    color: var(--color-text-tertiary);
    transition: all var(--motion-dur-quick) ease;
}

.overview-insight-card:hover .overview-insight-card__arrow {
    background: var(--color-surface);
    color: var(--color-interactive-primary);
}

.overview-insight-card__arrow svg {
    width: 14px;
    height: 14px;
}

/* ===================================
   SEE ALL BUTTON - POLISHED
   =================================== */

.overview-see-all-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: none;
    border: none;
    padding: var(--space-2) 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: color var(--motion-dur-quick) ease;
}

.overview-see-all-btn:hover {
    color: var(--color-interactive-primary);
}

.overview-see-all-icon {
    width: 14px;
    height: 14px;
}

/* ===================================
   LOADING STATES
   =================================== */

.overview-key-people-loading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

.overview-key-people-loading__spinner,
.overview-loading-inline__spinner {
    width: 14px;
    height: 14px;
    border: 2px solid color-mix(in srgb, var(--color-border) 50%, transparent);
    border-top-color: var(--color-interactive-primary);
    border-radius: var(--radius-full);
    animation: overview-spin 0.8s linear infinite;
}

.overview-loading-inline {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

.overview-loading-inline__text {
    color: var(--color-text-tertiary);
}

@keyframes overview-spin {
    to { transform: rotate(360deg); }
}