/* Wall Street dark theme. Loaded after each page's own styles so it wins on equal specificity. */
:root {
    color-scheme: dark;

    /* Variable names used across the page templates, remapped to one palette. */
    --bg: #07090d;
    --bg-strong: #0b0f15;
    --page-bg: #07090d;
    --card: #0e131a;
    --card-alt: #141b24;
    --surface: #0e131a;
    --surface-raised: #141b24;
    --panel: #0e131a;
    --panel-line: rgba(148, 163, 184, 0.16);
    --line: rgba(148, 163, 184, 0.16);
    --text: #e8edf3;
    --muted: #8d9bad;
    --primary: #4da3ff;
    --primary-dark: #2f86e6;
    --blue: #4da3ff;
    --secondary: #dbe5f1;
    --success: #26d07c;
    --green: #26d07c;
    --warning: #ffb020;
    --error: #ff5c5c;
    --shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
    --shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.4);
}

body {
    background: radial-gradient(ellipse at 50% -25%, rgba(77, 163, 255, 0.12), transparent 55%), #07090d !important;
    color: var(--text);
    font-family: "Segoe UI", Inter, Arial, sans-serif;
}

/* Prices and figures line up like a market terminal. */
td,
th,
.valuation-value,
.valuation-metric strong,
.summary-value,
[data-card-intrinsic],
[data-card-mos],
[data-company-price-summary] {
    font-variant-numeric: tabular-nums;
}

h1,
h2,
h3 {
    letter-spacing: -0.01em;
}

::selection {
    background: rgba(77, 163, 255, 0.35);
}

.freshness-fresh { color: #26d07c; }
.freshness-reported { color: var(--muted); }
.freshness-stale { color: #ffb020; font-weight: 700; }
.freshness-unknown { color: #ff8a8a; }

/* Panels */
.container,
.signup-card,
.login-card,
.company-card,
.mini-company,
.summary-card,
.valuation-card {
    background-color: var(--card);
    border-color: var(--line);
}

/* Forms: the add-company page was light */
.form-control,
input[type="text"],
input[type="search"],
input[type="number"],
input[type="password"],
input[type="email"],
select,
textarea {
    background-color: #0a0e14;
    color: var(--text);
    border: 1px solid rgba(148, 163, 184, 0.28);
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.22);
}

::placeholder {
    color: #627084;
}

select option {
    background: #0e131a;
    color: var(--text);
}

label {
    color: var(--secondary);
}

.submit-btn {
    background: var(--success);
    color: #04140c;
}

.errorlist {
    color: var(--error);
}

/* Banners that used pale backgrounds on the light pages */
.success {
    background: rgba(38, 208, 124, 0.1);
    color: #9be9c1;
    border-left-color: var(--success);
}

#ticker-status {
    background: rgba(77, 163, 255, 0.1) !important;
    border-left-color: var(--primary) !important;
    color: #bcd9ff !important;
}

/* Tables: data health and any other plain tables */
table {
    color: var(--text);
}

th {
    color: var(--muted);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

th,
td {
    border-bottom-color: var(--line);
}

.summary {
    color: var(--muted);
}

.error {
    color: var(--error);
}

.warning {
    color: var(--warning);
}

hr {
    border-color: var(--line);
}

/* Shared app bar (screener, watchlist, portfolio) */
.app-sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: 220px; z-index: 50; display: flex; flex-direction: column; gap: 20px; padding: 20px 14px; background: var(--card); border-right: 1px solid var(--line); overflow-y: auto; }
body:has(.app-sidebar) { padding-left: 244px !important; }
.app-brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; font-weight: 800; letter-spacing: -0.02em; padding: 4px 4px 16px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.app-brand-name { font-size: 1.2rem; line-height: 1.1; max-width: 6.5em; background: linear-gradient(90deg, #fff, #b9c8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.app-brand-mark img { display: block; width: 40px; height: 40px; }
.app-brand-mark { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 6px 18px rgba(92, 124, 255, 0.35); }
.app-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.app-nav a { padding: 10px 14px; border-radius: 8px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 0.92rem; transition: background .15s, color .15s; }
.app-nav a:hover { color: var(--text); background: var(--card-alt); }
.app-nav a.active { color: #fff; background: rgba(77, 163, 255, 0.18); box-shadow: inset 0 -2px 0 var(--primary); }
.app-account { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.app-account form { margin: 0; }
.app-user { color: var(--muted); font-size: 0.85rem; }
.app-link-btn { background: none; border: 1px solid var(--line); color: var(--secondary); border-radius: 8px; padding: 6px 12px; font-size: 0.85rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.app-link-btn:hover { border-color: var(--primary); color: #fff; }

/* Page header, cards and tables for the three pages */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head h1 { margin: 0 0 4px; font-size: 1.8rem; }
.page-head .summary { margin: 0; max-width: 70ch; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.data-page .container { background: transparent; border: 0; box-shadow: none; padding: 0; max-width: 1200px; }
.data-page .table-wrap { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 4px 8px; }
.data-page tbody tr:hover { background: rgba(77, 163, 255, 0.06); }
.data-page td a { text-decoration: none; font-weight: 700; }
.data-page .btn { display: inline-block; padding: 9px 16px; border-radius: 10px; font-weight: 600; font-size: 0.9rem; text-decoration: none; background: var(--card-alt); color: var(--text); border: 1px solid var(--line); }
.data-page .btn:hover { border-color: var(--primary); }
.data-page .btn-primary { background: var(--primary-dark); border-color: var(--primary); color: #fff; }
.data-page .filters-panel { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 18px; }
.data-page .filters input, .data-page .filters select { background: #0a0e14; color: var(--text); border-color: rgba(148, 163, 184, 0.28); }
.data-page .pos { color: var(--success); }
.data-page .neg { color: var(--error); }
.data-page .banner, .data-page .alert { background: rgba(255, 176, 32, 0.12); border-color: rgba(255, 176, 32, 0.4); color: #ffd48a; }
.data-page .message { background: rgba(77, 163, 255, 0.1); color: #bcd9ff; }
.data-page .chip { background: var(--card-alt); color: var(--text); }
.data-page .alert-form input { background: #0a0e14; color: var(--text); border-color: rgba(148, 163, 184, 0.28); }
@media (max-width: 640px) { .page-head h1 { font-size: 1.5rem; } }

.site-footer { max-width: 1200px; margin: 40px auto 0; padding: 20px 4px 28px; border-top: 1px solid var(--line); color: #7f93ab; font-size: 0.82rem; line-height: 1.5; }
.site-footer p { margin: 0 0 8px; }
.site-footer a { color: #9db0c6; text-decoration: none; margin-right: 16px; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; border: 1px solid transparent; }
.badge-high { background: rgba(62, 207, 142, 0.14); color: #5ee6a8; border-color: rgba(62, 207, 142, 0.4); }
.badge-medium { background: rgba(255, 176, 32, 0.14); color: #ffd48a; border-color: rgba(255, 176, 32, 0.4); }
.badge-low { background: rgba(255, 138, 138, 0.14); color: #ff8a8a; border-color: rgba(255, 138, 138, 0.4); }
.info-page { max-width: 820px; margin: 0 auto; padding: 8px 4px; line-height: 1.65; }
.info-page h1 { margin: 0 0 6px; }
.info-page h2 { margin: 28px 0 8px; font-size: 1.15rem; }
.info-page p, .info-page li { color: #c3d0e0; }
.info-page .lead { color: #9db0c6; font-size: 1.05rem; }
.info-page .note { padding: 12px 14px; border-radius: 10px; background: rgba(255, 176, 32, 0.1); border: 1px solid rgba(255, 176, 32, 0.35); color: #ffd48a; }

/* Data health cards and remaining pages on the shared bar */
.data-page .run, .panel-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.data-page .source, .data-page .summary { color: var(--muted); }
.data-page .error { color: var(--error); }
.data-page .warning { color: #ffd48a; }
.data-page th, .data-page td { border-bottom-color: var(--line); }
.data-page details summary { cursor: pointer; }

/* Mobile pass */
@media (max-width: 900px) {
    body:has(.app-sidebar) { padding-left: 12px !important; }
    .app-sidebar { position: static; width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; overflow: visible; }
    .app-nav { order: 3; flex: 1 1 100%; flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .app-nav::-webkit-scrollbar { display: none; }
    .app-nav a { white-space: nowrap; padding: 8px 12px; }
    .app-account { margin-left: auto; padding-top: 0; border-top: 0; gap: 8px; }
    .app-user { display: none; }
}
@media (max-width: 720px) {
    .page-head { align-items: flex-start; }
    .page-actions { width: 100%; }
    .data-page .table-wrap, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .data-page table { min-width: 560px; }
    .data-page .runs { grid-template-columns: 1fr; }
    body { overflow-wrap: anywhere; }
    img, svg, canvas { max-width: 100%; height: auto; }
}