/* ================================================================
   stock-components.css — Loading/empty states, animations, skeleton
   loaders, nav styles, search, badges, buttons, checklist, responsive,
   utility classes
   ================================================================ */

    /* ── Loading / Empty ──────────────────────────────────────── */
    .loading-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 80px 40px;
        gap: 16px;
        color: var(--text-secondary);
    }
    .loading-spinner {
        width: 32px;
        height: 32px;
        border: 2px solid var(--border);
        border-top-color: var(--blue);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    .empty-state {
        text-align: center;
        padding: 60px 40px;
        color: var(--text-secondary);
    }
    .empty-state h2 {
        font-family: 'Instrument Serif', serif;
        font-size: 24px;
        color: var(--text);
        margin-bottom: 8px;
    }
    .empty-state a { color: var(--blue); text-decoration: none; }
    .empty-state a:hover { text-decoration: underline; }

    /* ── Animations ───────────────────────────────────────────── */
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(12px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .report-section { animation: fadeInUp 0.4s ease-out both; }
    .report-section:nth-child(2) { animation-delay: 0.05s; }
    .report-section:nth-child(3) { animation-delay: 0.1s; }
    .report-section:nth-child(4) { animation-delay: 0.15s; }
    .report-section:nth-child(5) { animation-delay: 0.2s; }
    .report-section:nth-child(6) { animation-delay: 0.25s; }
    .report-section:nth-child(7) { animation-delay: 0.3s; }
    .report-section:nth-child(8) { animation-delay: 0.35s; }

    /* ── Analysis Panel ────────────────────────────────────────── */
    .analysis-panel {
        background: var(--surface);
        border-bottom: 1px solid var(--border-subtle);
        padding: 16px 32px;
        max-height: 300px;
        overflow-y: auto;
        transition: max-height 0.3s ease;
    }
    .analysis-panel-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
    }
    .analysis-panel-header h3 {
        font-family: var(--font-ui);
        font-size: 14px;
        font-weight: 600;
        color: var(--text);
    }
    .analysis-status {
        font-family: var(--font-mono);
        font-size: 12px;
        color: var(--blue);
    }
    .analysis-log {
        font-family: var(--font-mono);
        font-size: 11px;
        color: var(--text-secondary);
        line-height: 1.6;
        max-height: 200px;
        overflow-y: auto;
    }
    .analysis-log .log-line { padding: 1px 0; }
    .analysis-log .log-line.highlight { color: var(--green); }
    .analysis-log .log-line.error { color: var(--red); }

    /* ── Skeleton Loaders ─────────────────────────────────── */
    @keyframes shimmer {
        0% { background-position: -400px 0; }
        100% { background-position: 400px 0; }
    }
    .skeleton {
        background: linear-gradient(90deg, var(--surface) 25%, var(--surface-elevated) 37%, var(--surface) 63%);
        background-size: 800px 100%;
        animation: shimmer 1.5s ease-in-out infinite;
        border-radius: var(--radius-sm);
    }
    .skeleton-text { height: 14px; margin-bottom: 8px; border-radius: 4px; }
    .skeleton-text.wide { width: 80%; }
    .skeleton-text.medium { width: 60%; }
    .skeleton-text.short { width: 40%; }
    .skeleton-card { height: 120px; border-radius: var(--radius); }
    .skeleton-table-row { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
    .skeleton-table-cell { height: 16px; border-radius: 4px; flex: 1; }
    .skeleton-gauge { width: 140px; height: 140px; border-radius: 50%; margin: 0 auto 12px; }
    .skeleton-section { padding: 24px; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius); }

    /* ── Nav Styles ───────────────────────────────────────────── */
    .nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
    .nav-brand-icon { font-family: 'Instrument Serif', serif; font-size: 24px; color: var(--blue); }
    .nav-brand-text { font-family: 'Instrument Serif', serif; font-size: 16px; color: var(--text); }
    .nav-links { display: flex; gap: 4px; margin-left: 32px; }
    .nav-link { padding: 8px 16px; border-radius: var(--radius-xs); color: var(--text-secondary); text-decoration: none; font-size: 13px; transition: all 0.15s; }
    .nav-link.active { color: var(--text); background: var(--surface); }
    .nav-link:hover { color: var(--text); background: var(--surface); }

    /* ── Search ───────────────────────────────────────────────── */
    .nav-search-wrap { margin-left: auto; position: relative; }
    .nav-search-input {
        font-family: var(--font-mono);
        font-size: 12px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-pill);
        padding: 6px 14px;
        color: var(--text);
        width: 200px;
        outline: none;
        transition: all 0.15s;
    }
    .nav-search-input:focus { border-color: var(--blue); width: 240px; }
    .nav-search-dropdown {
        position: absolute;
        top: 100%;
        right: 0;
        margin-top: 4px;
        background: var(--surface-elevated);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        display: none;
        min-width: 240px;
        z-index: 100;
        max-height: 260px;
        overflow-y: auto;
    }

    .landing-search { position: relative; width: 100%; max-width: 520px; }
    .landing-search input {
        width: 100%;
        font-family: var(--font-mono);
        font-size: 16px;
        background: var(--surface);
        border: 2px solid var(--border);
        border-radius: var(--radius);
        padding: 16px 20px;
        color: var(--text);
        outline: none;
        transition: border-color 0.2s, box-shadow 0.2s;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
    .landing-search input:focus { border-color: var(--blue); box-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 0 0 3px rgba(59,130,246,0.15); }
    .landing-search input::placeholder { color: var(--muted); }
    .landing-search-results {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-top: 4px;
        background: var(--surface-elevated);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        display: none;
        z-index: 100;
        max-height: 280px;
        overflow-y: auto;
    }
    .landing-search-results a {
        display: flex;
        justify-content: space-between;
        padding: 12px 16px;
        color: var(--text);
        text-decoration: none;
        font-size: 14px;
        border-bottom: 1px solid var(--border-subtle);
        transition: background 0.1s;
    }
    .landing-search-results a:hover { background: var(--surface); }
    .landing-search-results .sr-ticker { font-family: var(--font-mono); font-weight: 600; }
    .landing-search-results .sr-name { color: var(--muted); font-size: 13px; }
    .landing-search-row { display: flex; gap: 10px; }
    .landing-analyze-btn {
        font-family: var(--font-mono);
        font-size: 14px;
        font-weight: 600;
        padding: 16px 28px;
        border-radius: var(--radius);
        border: none;
        background: var(--blue);
        color: white;
        cursor: pointer;
        white-space: nowrap;
        transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
        box-shadow: 0 2px 8px rgba(59,130,246,0.25);
    }
    .landing-analyze-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 20px rgba(59,130,246,0.4);
        background: #4b8ff7;
    }

    /* ── Recent analyses ──────────────────────────────────────── */
    .landing-recent { margin-top: 40px; margin-bottom: 72px; width: 100%; max-width: 600px; }
    #landingRecent { margin-top: 40px; margin-bottom: 72px; width: 100%; max-width: 600px; }
    .landing-recent-title {
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--muted);
        margin-bottom: 12px;
    }
    .landing-recent-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
    .landing-recent-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        background: var(--surface);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-sm);
        text-decoration: none;
        color: var(--text);
        font-size: 13px;
        transition: all 0.15s;
    }
    .landing-recent-item:hover { background: var(--surface-elevated); border-color: var(--border); }
    .landing-recent-item .lri-ticker { font-family: var(--font-mono); font-weight: 600; }
    .landing-recent-item .lri-verdict { font-family: var(--font-mono); font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: var(--radius-xs); }

    /* ── Run Analysis Button ──────────────────────────────────── */
    .run-analysis-btn {
        font-family: var(--font-mono);
        font-size: 12px;
        font-weight: 600;
        padding: 8px 16px;
        border-radius: var(--radius-pill);
        border: 1px solid var(--blue-border);
        background: var(--blue-dim);
        color: var(--blue);
        cursor: pointer;
        transition: all 0.15s;
        white-space: nowrap;
    }
    .run-analysis-btn:hover { background: rgba(59,130,246,0.2); }
    .run-analysis-btn:disabled { opacity: 0.5; cursor: not-allowed; }

    /* ── Company Logo ─────────────────────────────────────────── */
    .sidebar-logo { display: flex; justify-content: center; margin: -4px 0 8px; animation: logoFadeIn 0.4s ease; }
    .company-logo-img { width: 56px; height: 56px; border-radius: 14px; object-fit: contain; background: var(--surface-elevated); border: 1px solid var(--border-subtle); padding: 4px; }
    .header-logo-img { width: 32px; height: 32px; border-radius: 8px; object-fit: contain; background: var(--surface-elevated); border: 1px solid var(--border-subtle); padding: 2px; }
    @keyframes logoFadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

    /* ── Sidebar Model Select ─────────────────────────────── */
    .model-select {
        font-family: var(--font-mono);
        font-size: 10px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-xs);
        padding: 4px 8px;
        color: var(--text-secondary);
        outline: none;
    }

    /* ── Factor Checklist (SWS-style) ────────────────────────── */
    .factor-checklist {
        background: var(--surface);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius);
        padding: 16px 20px;
        margin-bottom: 20px;
    }
    .checklist-header {
        font-family: var(--font-mono);
        font-size: 13px;
        font-weight: 600;
        color: var(--text);
        margin-bottom: 12px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--border-subtle);
    }
    .check-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255,255,255,0.04);
        font-size: 13px;
    }
    .check-item:last-child { border-bottom: none; }
    .check-icon {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 700;
        flex-shrink: 0;
    }
    .check-item.pass .check-icon { background: var(--green-dim); color: var(--green); }
    .check-item.fail .check-icon { background: var(--red-dim); color: var(--red); }
    .check-label { flex: 1; color: var(--text); }
    .check-detail { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }

    /* ── Analysis Freshness Badge ─────────────────────────── */
    .analysis-fresh-badge {
        font-family: var(--font-mono);
        font-size: 10px;
        color: var(--green);
        background: var(--green-dim);
        border: 1px solid var(--green-border);
        padding: 3px 8px;
        border-radius: var(--radius-xs);
        letter-spacing: 0.04em;
    }
    .analysis-stale-badge {
        font-family: var(--font-mono);
        font-size: 10px;
        color: var(--muted);
        background: var(--surface);
        border: 1px solid var(--border);
        padding: 3px 8px;
        border-radius: var(--radius-xs);
        letter-spacing: 0.04em;
    }

    /* ── Responsive overrides ─────────────────────────────────── */
    @media (max-width: 900px) {
        .stock-sidebar { display: none; }
        .stock-content { padding: 20px; }
        .overview-grid { grid-template-columns: 1fr; }
    }