Spaces:
Running
Running
| /* Stock Analyzer - Compact, Fast, Tabbed */ | |
| /* Top Bar */ | |
| .analyze-top-bar { | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| border-radius: 4px; | |
| padding: var(--space-md); | |
| margin-bottom: var(--space-md); | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-md); | |
| } | |
| .search-box { | |
| display: flex; | |
| gap: var(--space-sm); | |
| } | |
| .symbol-input { | |
| flex: 1; | |
| max-width: 200px; | |
| padding: var(--space-sm) var(--space-md); | |
| font-size: var(--font-md); | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| background: var(--bg-primary); | |
| border: 1px solid var(--border); | |
| border-radius: 4px; | |
| color: var(--text-primary); | |
| } | |
| .symbol-input:focus { | |
| outline: none; | |
| border-color: var(--accent); | |
| } | |
| /* Symbol Tabs */ | |
| .symbol-tabs { | |
| display: flex; | |
| gap: var(--space-xs); | |
| flex-wrap: wrap; | |
| } | |
| .symbol-tab { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-xs); | |
| padding: var(--space-sm) var(--space-md); | |
| background: var(--bg-primary); | |
| border: 1px solid var(--border); | |
| border-radius: 4px 4px 0 0; | |
| color: var(--text-muted); | |
| font-size: var(--font-sm); | |
| font-weight: 600; | |
| cursor: pointer; | |
| text-transform: uppercase; | |
| transition: all 0.1s; | |
| } | |
| .symbol-tab:hover { | |
| background: var(--border); | |
| color: var(--text-primary); | |
| } | |
| .symbol-tab.active { | |
| background: var(--accent); | |
| border-color: var(--accent); | |
| color: var(--bg); | |
| } | |
| .symbol-tab .close-tab { | |
| font-size: var(--font-xs); | |
| padding: 0 4px; | |
| opacity: 0.7; | |
| } | |
| .symbol-tab .close-tab:hover { | |
| opacity: 1; | |
| } | |
| /* Loading */ | |
| .loading { | |
| display: flex; | |
| justify-content: center; | |
| padding: var(--space-xl); | |
| } | |
| .spinner { | |
| width: 40px; | |
| height: 40px; | |
| border: 3px solid var(--border); | |
| border-top-color: var(--accent); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| /* Symbol Content */ | |
| .symbol-content { | |
| display: none; | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| border-radius: 4px; | |
| padding: var(--space-md); | |
| } | |
| .symbol-content.active { | |
| display: block; | |
| } | |
| /* Company Description */ | |
| .company-description { | |
| background: var(--bg-primary); | |
| border: 1px solid var(--border); | |
| border-radius: 4px; | |
| padding: var(--space-sm); | |
| } | |
| /* Key Stats */ | |
| .key-stats { | |
| margin-bottom: var(--space-md); | |
| } | |
| /* Compact layout - single column */ | |
| .symbol-content > * { | |
| margin-bottom: var(--space-md); | |
| } | |
| /* Metrics Grid - Compact */ | |
| .metrics-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); | |
| gap: var(--space-sm); | |
| } | |
| .metric-item { | |
| background: var(--bg-primary); | |
| border: 1px solid var(--border); | |
| border-left: 3px solid var(--border); | |
| border-radius: 4px; | |
| padding: var(--space-sm); | |
| text-align: center; | |
| } | |
| .metric-item.pass { | |
| border-left-color: var(--positive, #4ade80); | |
| } | |
| .metric-item.warn { | |
| border-left-color: var(--negative, #f87171); | |
| } | |
| .metric-label { | |
| font-size: var(--font-xs); | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| display: block; | |
| margin-bottom: 2px; | |
| } | |
| .metric-value { | |
| font-size: var(--font-md); | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| } | |
| /* Info Sections */ | |
| .info-section { | |
| background: var(--bg-primary); | |
| border: 1px solid var(--border); | |
| border-radius: 4px; | |
| padding: var(--space-sm); | |
| } | |
| .info-section h3 { | |
| margin: 0 0 var(--space-sm) 0; | |
| font-size: var(--font-xs); | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| border-bottom: 1px solid var(--border); | |
| padding-bottom: var(--space-xs); | |
| } | |
| /* Catalyst */ | |
| .catalyst-text { | |
| font-size: var(--font-sm); | |
| color: var(--text-primary); | |
| line-height: 1.4; | |
| } | |
| .catalyst-sentiment { | |
| display: inline-block; | |
| font-size: var(--font-xs); | |
| padding: 2px 6px; | |
| border-radius: 3px; | |
| margin-top: var(--space-xs); | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| } | |
| .catalyst-sentiment.positive, | |
| .catalyst-sentiment.good { | |
| background: rgba(74, 222, 128, 0.2); | |
| color: var(--positive, #4ade80); | |
| } | |
| .catalyst-sentiment.negative, | |
| .catalyst-sentiment.bad { | |
| background: rgba(248, 113, 113, 0.2); | |
| color: var(--negative, #f87171); | |
| } | |
| .catalyst-sentiment.neutral { | |
| background: rgba(142, 142, 147, 0.2); | |
| color: var(--text-muted); | |
| } | |
| /* Filings */ | |
| .filings-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-xs); | |
| max-height: 200px; | |
| overflow-y: auto; | |
| } | |
| .filing-group { | |
| margin-bottom: var(--space-sm); | |
| } | |
| .filing-group-title { | |
| font-size: var(--font-xs); | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| text-transform: uppercase; | |
| padding: var(--space-xs) 0; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .filing-item { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| padding: var(--space-xs); | |
| background: var(--bg-elevated); | |
| border-radius: 4px; | |
| font-size: var(--font-xs); | |
| } | |
| .filing-form { | |
| font-weight: 700; | |
| color: var(--accent); | |
| min-width: 50px; | |
| } | |
| .filing-date { | |
| color: var(--text-muted); | |
| white-space: nowrap; | |
| } | |
| .filing-description { | |
| flex: 1; | |
| color: var(--text-primary); | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .filing-link { | |
| color: var(--accent); | |
| text-decoration: none; | |
| } | |
| /* Cash - MUST SHOW */ | |
| .cash-item { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: var(--space-xs); | |
| background: var(--bg-elevated); | |
| border-radius: 4px; | |
| font-size: var(--font-xs); | |
| } | |
| .cash-label { | |
| color: var(--text-muted); | |
| } | |
| .cash-value { | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| .cash-value.critical { | |
| color: var(--negative, #f87171); | |
| } | |
| .cash-value.warning { | |
| color: var(--warning, #fbbf24); | |
| } | |
| .cash-value.healthy { | |
| color: var(--positive, #4ade80); | |
| } | |
| /* Charts - Compact, at bottom */ | |
| .charts-section { | |
| margin-top: var(--space-lg); | |
| } | |
| .chart-row { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: var(--space-md); | |
| margin-top: var(--space-md); | |
| } | |
| @media (max-width: 1024px) { | |
| .chart-row { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .chart-card { | |
| background: var(--bg-primary); | |
| border: 1px solid var(--border); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 280px; | |
| } | |
| .chart-header { | |
| padding: var(--space-xs) var(--space-sm); | |
| background: var(--bg-elevated); | |
| border-bottom: 1px solid var(--border); | |
| font-size: var(--font-xs); | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| text-transform: uppercase; | |
| } | |
| .chart-container { | |
| height: 250px; | |
| width: 100%; | |
| min-height: 250px; | |
| } | |
| /* Two column layout for content */ | |
| .content-columns { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: var(--space-md); | |
| } | |
| @media (max-width: 1024px) { | |
| .content-columns { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .content-columns { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |