/* =============================================================================
   Macro Outlook page (.macro-outlook-report) + Portfolio News tab
   (.stock-news-*). All rules are scoped under these wrappers — assets/ CSS
   is global in Dash, so nothing here may leak into other pages.
   ============================================================================= */

/* --- Markdown report body (dcc.Markdown output: raw table, heading and
   paragraph tags) ---------------------------------------------------------- */

.macro-outlook-report table {
    border-collapse: collapse;
    margin: 12px 0;
    min-width: 55%;
    display: block;
    overflow-x: auto;   /* wide tables scroll inside their own container */
}

.macro-outlook-report th,
.macro-outlook-report td {
    border: 1px solid var(--bs-border-color, #444);
    padding: 6px 10px;
    text-align: left;
}

.macro-outlook-report th {
    font-weight: 600;
}

.macro-outlook-report h1 { font-size: 1.45rem; margin: 22px 0 10px; }
.macro-outlook-report h2 { font-size: 1.25rem; margin: 20px 0 8px; }
.macro-outlook-report h3 { font-size: 1.05rem; margin: 16px 0 8px; }

.macro-outlook-report code {
    padding: 1px 5px;
    border-radius: 6px;
    background: rgba(127, 127, 127, 0.18);
}

.macro-outlook-tile .macro-outlook-tile-value {
    font-size: 1.35rem;
    font-weight: 600;
}

/* --- Portfolio News tab cards ---------------------------------------------- */

.stock-news-card {
    height: 100%;
}

.stock-news-card .stock-news-headline a {
    text-decoration: none;
    color: inherit;
    font-weight: 600;
}

.stock-news-card .stock-news-headline a:hover {
    text-decoration: underline;
}

.stock-news-card .stock-news-why {
    border-left: 2px solid var(--bs-border-color, #444);
    padding: 2px 0 2px 10px;
}

.stock-news-card .stock-news-read {
    background: rgba(127, 127, 127, 0.12);
    border-radius: 8px;
    padding: 6px 10px;
}

.stock-news-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}