Spaces:
Sleeping
Sleeping
| /* Base styles for modern clean UI design - Anyformat inspired */ | |
| :root { | |
| --primary-color: #0067df; | |
| --primary-light: #e6f0ff; | |
| --primary-dark: #004db3; | |
| --success-color: #10b981; | |
| --warning-color: #f59e0b; | |
| --danger-color: #ef4444; | |
| --info-color: #3b82f6; | |
| --text-color: #333333; | |
| --text-secondary: #666666; | |
| --text-light: #8b949e; | |
| --border-color: #e0e4e8; | |
| --background-light: #ffffff; | |
| --background-grey: #f8f9fa; | |
| --background-light-hover: #f5f8fc; | |
| --shadow-sm: 0 1px 3px rgba(0,0,0,0.06); | |
| --shadow-md: 0 4px 6px rgba(0,0,0,0.1); | |
| --radius-sm: 4px; | |
| --radius-md: 8px; | |
| --radius-lg: 12px; | |
| --transition-fast: 150ms ease; | |
| --transition-normal: 250ms ease; | |
| --font-xs: 12px; | |
| --font-sm: 14px; | |
| --font-md: 16px; | |
| --font-lg: 18px; | |
| --font-xl: 20px; | |
| --font-xxl: 24px; | |
| --spacing-xs: 4px; | |
| --spacing-sm: 8px; | |
| --spacing-md: 16px; | |
| --spacing-lg: 24px; | |
| --spacing-xl: 32px; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; | |
| background-color: var(--background-light); | |
| color: var(--text-color); | |
| margin: 0; | |
| padding: 0; | |
| line-height: 1.5; | |
| font-size: var(--font-md); | |
| } | |
| /* Header and Navigation */ | |
| .header { | |
| background-color: var(--background-light); | |
| border-bottom: 1px solid var(--border-color); | |
| box-shadow: var(--shadow-sm); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| width: 100%; | |
| } | |
| .header-container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: var(--spacing-md) var(--spacing-xl); | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .app-logo { | |
| display: flex; | |
| align-items: center; | |
| font-size: var(--font-xl); | |
| font-weight: 600; | |
| color: var(--text-color); | |
| text-decoration: none; | |
| } | |
| .app-logo i { | |
| color: var(--primary-color); | |
| font-size: 24px; | |
| margin-right: 10px; | |
| } | |
| .header-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-md); | |
| } | |
| .huggingface-link { | |
| display: flex; | |
| align-items: center; | |
| text-decoration: none; | |
| color: var(--text-secondary); | |
| font-size: var(--font-sm); | |
| transition: var(--transition-fast); | |
| } | |
| .huggingface-link:hover { | |
| color: var(--primary-color); | |
| } | |
| .huggingface-link img { | |
| height: 20px; | |
| margin-right: 6px; | |
| } | |
| .info-banner { | |
| background: var(--background-grey); | |
| border-bottom: 1px solid var(--border-color); | |
| padding: var(--spacing-xs) var(--spacing-xl); | |
| font-size: var(--font-sm); | |
| color: var(--text-secondary); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .info-sources { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-sm); | |
| flex-wrap: wrap; | |
| } | |
| .source-label, | |
| .limit-label { | |
| font-weight: 600; | |
| color: var(--text-color); | |
| } | |
| .info-divider { | |
| margin: 0 var(--spacing-sm); | |
| color: var(--border-color); | |
| } | |
| .powered-by { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-xs); | |
| } | |
| .huggingface-badge { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .huggingface-badge img { | |
| height: 16px; | |
| } | |
| /* Layout containers */ | |
| .app-container { | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 100vh; | |
| } | |
| .main-content { | |
| flex: 1; | |
| padding: var(--spacing-lg) var(--spacing-xl); | |
| max-width: 1100px; | |
| margin: 0 auto; | |
| width: 100%; | |
| } | |
| /* Tab Navigation */ | |
| .tab-navigation { | |
| margin-bottom: var(--spacing-lg); | |
| overflow-x: auto; | |
| } | |
| .tab-bar { | |
| display: flex; | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| border-bottom: 2px solid var(--border-color); | |
| width: 100%; | |
| } | |
| .tab { | |
| padding: var(--spacing-md) var(--spacing-lg); | |
| cursor: pointer; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| transition: var(--transition-fast); | |
| border-bottom: 2px solid transparent; | |
| margin-bottom: -2px; | |
| white-space: nowrap; | |
| } | |
| .tab:hover { | |
| color: var(--primary-color); | |
| background-color: var(--background-light-hover); | |
| } | |
| .tab.active { | |
| color: var(--primary-color); | |
| border-bottom: 2px solid var(--primary-color); | |
| font-weight: 600; | |
| } | |
| .tab .badge { | |
| background-color: var(--primary-color); | |
| color: white; | |
| font-size: var(--font-xs); | |
| padding: 2px 6px; | |
| border-radius: var(--radius-sm); | |
| margin-left: var(--spacing-xs); | |
| font-weight: 600; | |
| } | |
| /* Content Cards */ | |
| .card, .container { | |
| background: var(--background-light); | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border-color); | |
| box-shadow: var(--shadow-sm); | |
| padding: var(--spacing-lg); | |
| margin: 0 auto var(--spacing-lg) auto; | |
| transition: box-shadow 0.2s ease; | |
| max-width: 950px; | |
| } | |
| .card:hover, .container:hover { | |
| box-shadow: var(--shadow-md); | |
| } | |
| .section-heading { | |
| margin-bottom: var(--spacing-lg); | |
| } | |
| .section-heading h2 { | |
| font-size: var(--font-xl); | |
| font-weight: 600; | |
| margin: 0 0 var(--spacing-xs) 0; | |
| } | |
| .section-heading h3 { | |
| font-size: var(--font-lg); | |
| font-weight: 600; | |
| margin: 0 0 var(--spacing-xs) 0; | |
| } | |
| .section-description { | |
| color: var(--text-secondary); | |
| margin: var(--spacing-xs) 0 0 0; | |
| } | |
| /* Form Elements */ | |
| .form-row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| margin: 0 -8px; | |
| max-width: 900px; | |
| } | |
| .form-group { | |
| margin-bottom: var(--spacing-md); | |
| padding: 0 8px; | |
| flex: 1; | |
| } | |
| .col-md-6 { | |
| width: 50%; | |
| flex: 0 0 50%; | |
| } | |
| .col-md-4 { | |
| width: 33.333333%; | |
| flex: 0 0 33.333333%; | |
| } | |
| @media (max-width: 768px) { | |
| .col-md-6, .col-md-4 { | |
| width: 100%; | |
| flex: 0 0 100%; | |
| } | |
| } | |
| label { | |
| display: block; | |
| margin-bottom: var(--spacing-xs); | |
| color: var(--text-secondary); | |
| font-weight: 500; | |
| font-size: var(--font-sm); | |
| } | |
| .input-field, | |
| input[type="text"], | |
| input[type="number"], | |
| input[type="email"], | |
| input[type="password"], | |
| textarea { | |
| width: 100%; | |
| padding: 10px 14px; | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-sm); | |
| font-size: var(--font-md); | |
| transition: var(--transition-fast); | |
| outline: none; | |
| box-sizing: border-box; | |
| } | |
| .input-field:focus, | |
| input[type="text"]:focus, | |
| input[type="number"]:focus, | |
| input[type="email"]:focus, | |
| input[type="password"]:focus, | |
| textarea:focus { | |
| border-color: var(--primary-color); | |
| box-shadow: 0 0 0 3px rgba(0, 103, 223, 0.15); | |
| } | |
| .select-field, | |
| select { | |
| width: 100%; | |
| padding: 10px 14px; | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-sm); | |
| background-color: white; | |
| font-size: var(--font-md); | |
| transition: var(--transition-fast); | |
| outline: none; | |
| appearance: none; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 11L3 6H13L8 11Z' fill='%23666666'/%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-position: right 14px center; | |
| box-sizing: border-box; | |
| } | |
| .select-field:focus, | |
| select:focus { | |
| border-color: var(--primary-color); | |
| box-shadow: 0 0 0 3px rgba(0, 103, 223, 0.15); | |
| } | |
| /* Buttons */ | |
| .btn-primary, | |
| button[type="submit"] { | |
| background-color: var(--primary-color); | |
| color: white; | |
| border: none; | |
| border-radius: var(--radius-sm); | |
| padding: 10px 16px; | |
| font-weight: 600; | |
| font-size: var(--font-md); | |
| cursor: pointer; | |
| transition: var(--transition-fast); | |
| } | |
| .btn-primary:hover, | |
| button[type="submit"]:hover { | |
| background-color: var(--primary-dark); | |
| } | |
| .btn-secondary { | |
| background-color: var(--background-grey); | |
| color: var(--text-color); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-sm); | |
| padding: 10px 16px; | |
| font-weight: 500; | |
| font-size: var(--font-md); | |
| cursor: pointer; | |
| transition: var(--transition-fast); | |
| } | |
| .btn-secondary:hover { | |
| background-color: var(--border-color); | |
| } | |
| .btn-success { | |
| background-color: var(--success-color); | |
| color: white; | |
| } | |
| .btn-danger { | |
| background-color: var(--danger-color); | |
| color: white; | |
| } | |
| .btn-info { | |
| background-color: var(--info-color); | |
| color: white; | |
| } | |
| .btn-icon { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: var(--spacing-xs); | |
| } | |
| .btn-icon i { | |
| font-size: var(--font-md); | |
| } | |
| .form-actions { | |
| display: flex; | |
| gap: var(--spacing-md); | |
| margin-top: var(--spacing-md); | |
| } | |
| /* Results and Visualization */ | |
| .results-section, | |
| .results-container { | |
| margin-top: var(--spacing-lg); | |
| } | |
| .chart-container, | |
| .chart-area, | |
| .visualization-container { | |
| background-color: white; | |
| border-radius: var(--radius-md); | |
| padding: var(--spacing-md); | |
| margin: var(--spacing-md) auto; | |
| max-width: 850px; | |
| } | |
| .trade-flow-map { | |
| margin: var(--spacing-md) auto; | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-md); | |
| overflow: hidden; | |
| max-width: 850px; | |
| background-color: #ffffff; | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); | |
| } | |
| /* Map container for Leaflet */ | |
| .leaflet-container { | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border-color); | |
| overflow: hidden; | |
| width: 100%; | |
| max-width: 850px ; | |
| margin: 0 auto; | |
| } | |
| .chart-controls, | |
| .chart-control-buttons { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: var(--spacing-sm); | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .chart-type-btn { | |
| background-color: var(--background-grey); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-sm); | |
| padding: 8px 14px; | |
| font-size: var(--font-sm); | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: var(--transition-fast); | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .chart-type-btn:hover { | |
| background-color: var(--background-light-hover); | |
| } | |
| .chart-type-btn.active { | |
| background-color: var(--primary-color); | |
| color: white; | |
| border-color: var(--primary-color); | |
| } | |
| .chart-type-btn i { | |
| font-size: var(--font-md); | |
| } | |
| /* AI Assistant Styles */ | |
| .model-badge { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-xs); | |
| font-size: var(--font-sm); | |
| color: var(--text-secondary); | |
| margin-top: var(--spacing-xs); | |
| } | |
| .hf-logo { | |
| height: 18px; | |
| } | |
| .chat-container { | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-md); | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| height: 500px; | |
| background-color: var(--background-grey); | |
| } | |
| .chat-messages { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: var(--spacing-md); | |
| } | |
| .message { | |
| margin-bottom: var(--spacing-md); | |
| max-width: 85%; | |
| } | |
| .message-assistant { | |
| align-self: flex-start; | |
| } | |
| .message-user { | |
| align-self: flex-end; | |
| margin-left: auto; | |
| } | |
| .message-content { | |
| background-color: white; | |
| border-radius: var(--radius-md); | |
| padding: var(--spacing-md); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .message-assistant .message-content { | |
| border-bottom-left-radius: 0; | |
| } | |
| .message-user .message-content { | |
| background-color: var(--primary-light); | |
| border-bottom-right-radius: 0; | |
| } | |
| .chat-input-container { | |
| display: flex; | |
| padding: var(--spacing-md); | |
| background-color: white; | |
| border-top: 1px solid var(--border-color); | |
| gap: var(--spacing-sm); | |
| } | |
| .chat-input { | |
| flex: 1; | |
| padding: 12px 16px; | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-md); | |
| font-size: var(--font-md); | |
| resize: none; | |
| } | |
| .quick-questions-container { | |
| margin-top: var(--spacing-lg); | |
| } | |
| .section-title { | |
| font-size: var(--font-lg); | |
| font-weight: 600; | |
| margin-bottom: var(--spacing-md); | |
| color: var(--text-color); | |
| } | |
| .quick-question-chips { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: var(--spacing-sm); | |
| margin-bottom: var(--spacing-lg); | |
| } | |
| .quick-question-chip { | |
| background-color: var(--background-light); | |
| border: 1px solid var(--border-color); | |
| border-radius: 50px; | |
| padding: 8px 16px; | |
| font-size: var(--font-sm); | |
| cursor: pointer; | |
| transition: var(--transition-fast); | |
| } | |
| .quick-question-chip:hover { | |
| background-color: var(--primary-light); | |
| border-color: var(--primary-color); | |
| color: var(--primary-color); | |
| } | |
| .assistant-tools { | |
| margin-top: var(--spacing-xl); | |
| } | |
| .tools-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: var(--spacing-md); | |
| margin-top: var(--spacing-md); | |
| } | |
| .tool-card { | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-md); | |
| overflow: hidden; | |
| } | |
| .tool-header { | |
| background-color: var(--background-grey); | |
| padding: var(--spacing-md); | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-sm); | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .tool-header i { | |
| color: var(--primary-color); | |
| font-size: var(--font-lg); | |
| } | |
| .tool-header h4 { | |
| margin: 0; | |
| font-size: var(--font-md); | |
| font-weight: 600; | |
| } | |
| .tool-content { | |
| padding: var(--spacing-md); | |
| } | |
| .form-group { | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .input-with-button { | |
| display: flex; | |
| gap: var(--spacing-sm); | |
| } | |
| .input-with-button input { | |
| flex: 1; | |
| } | |
| /* Cache Management */ | |
| .cache-control-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .panel-title { | |
| font-size: var(--font-lg); | |
| font-weight: 600; | |
| margin: 0; | |
| } | |
| .action-buttons { | |
| display: flex; | |
| gap: var(--spacing-sm); | |
| } | |
| .cached-data-container { | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-md); | |
| background-color: var(--background-light); | |
| min-height: 200px; | |
| } | |
| .loading-indicator { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: var(--spacing-xl); | |
| color: var(--text-secondary); | |
| gap: var(--spacing-md); | |
| } | |
| .loading-indicator i { | |
| font-size: var(--font-xl); | |
| color: var(--primary-color); | |
| } | |
| /* Typography */ | |
| h1, h2, h3, h4, h5, h6 { | |
| color: var(--text-color); | |
| margin-top: 0; | |
| font-weight: 600; | |
| line-height: 1.3; | |
| } | |
| h1 { font-size: 28px; margin-bottom: 24px; } | |
| h2 { font-size: 24px; margin-bottom: 20px; } | |
| h3 { font-size: 20px; margin-bottom: 16px; } | |
| /* Page section headings */ | |
| .section-heading { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| padding-bottom: 8px; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| /* Form elements */ | |
| form label { | |
| display: block; | |
| margin-bottom: 8px; | |
| color: var(--text-color); | |
| font-weight: 500; | |
| font-size: 14px; | |
| } | |
| form input, form select, form textarea { | |
| width: 100%; | |
| padding: 10px 12px; | |
| margin-bottom: 16px; | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-sm); | |
| font-size: 15px; | |
| background-color: var(--background-light); | |
| color: var(--text-color); | |
| transition: all 0.2s ease; | |
| } | |
| form input:focus, form select:focus, form textarea:focus { | |
| outline: none; | |
| border-color: var(--primary-color); | |
| box-shadow: 0 0 0 2px rgba(0, 103, 223, 0.15); | |
| } | |
| /* Buttons */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 8px 16px; | |
| font-size: 14px; | |
| font-weight: 500; | |
| border-radius: var(--radius-sm); | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| text-decoration: none; | |
| border: 1px solid transparent; | |
| } | |
| .btn-primary { | |
| background-color: var(--primary-color); | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| background-color: #0055c4; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
| } | |
| .btn-secondary { | |
| background-color: white; | |
| border-color: var(--border-color); | |
| color: var(--text-color); | |
| } | |
| .btn-secondary:hover { | |
| background-color: var(--background-grey); | |
| border-color: #ccd0d5; | |
| } | |
| /* Form buttons inherit btn styles */ | |
| form button { | |
| width: auto; | |
| padding: 10px 16px; | |
| font-weight: 500; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-top: 8px; | |
| border-radius: var(--radius-sm); | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| background-color: var(--primary-color); | |
| color: white; | |
| border: none; | |
| } | |
| form button:hover { | |
| background-color: #0055c4; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
| } | |
| /* Results and content sections */ | |
| .results-section { | |
| margin-top: 24px; | |
| } | |
| #results, | |
| #predictionResults, | |
| #exportsCountryResults, | |
| #importsCountryResults, | |
| #exportsProductResults, | |
| #importsProductResults, | |
| #rankingsResults, | |
| #bilateralResults, | |
| #dataDownloadStatus { | |
| margin-top: 16px; | |
| font-size: 15px; | |
| } | |
| /* Alerts and notifications */ | |
| .alert { | |
| padding: 12px 16px; | |
| border-radius: var(--radius-sm); | |
| margin-bottom: 16px; | |
| font-weight: 500; | |
| font-size: 14px; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .alert-icon { | |
| margin-right: 12px; | |
| flex-shrink: 0; | |
| } | |
| .alert-danger { | |
| background-color: #FEEFEF; | |
| color: #B42318; | |
| border: 1px solid #FDE2E2; | |
| } | |
| .alert-success { | |
| background-color: #ECFDF3; | |
| color: #027A48; | |
| border: 1px solid #D1FADF; | |
| } | |
| .alert-info { | |
| background-color: #EFF8FF; | |
| color: #175CD3; | |
| border: 1px solid #D1E9FF; | |
| } | |
| .alert-warning { | |
| background-color: #FFFAEB; | |
| color: #B54708; | |
| border: 1px solid #FEF0C7; | |
| } | |
| /* Loading indicators */ | |
| .spinner { | |
| border: 3px solid rgba(0, 103, 223, 0.1); | |
| border-top: 3px solid var(--primary-color); | |
| border-radius: 50%; | |
| width: 24px; | |
| height: 24px; | |
| animation: spin 1s linear infinite; | |
| margin: 16px auto; | |
| display: block; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| /* Tables */ | |
| table { | |
| width: 100%; | |
| border-collapse: separate; | |
| border-spacing: 0; | |
| margin-bottom: 24px; | |
| background: var(--background-light); | |
| border-radius: var(--radius-sm); | |
| overflow: hidden; | |
| font-size: 14px; | |
| border: 1px solid var(--border-color); | |
| } | |
| thead { | |
| background-color: var(--background-grey); | |
| color: var(--text-color); | |
| font-weight: 600; | |
| } | |
| th { | |
| padding: 12px 16px; | |
| text-align: left; | |
| font-weight: 600; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| td { | |
| padding: 12px 16px; | |
| border-bottom: 1px solid var(--border-color); | |
| color: var(--text-secondary); | |
| } | |
| tr:last-child td { | |
| border-bottom: none; | |
| } | |
| tr:hover { | |
| background-color: var(--background-grey); | |
| } | |
| /* Header and Navigation */ | |
| .header { | |
| background-color: var(--background-light); | |
| border-bottom: 1px solid var(--border-color); | |
| padding: 16px 0; | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| } | |
| .header-container { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 16px; | |
| } | |
| .app-logo { | |
| display: flex; | |
| align-items: center; | |
| font-weight: 600; | |
| font-size: 18px; | |
| color: var(--text-color); | |
| text-decoration: none; | |
| } | |
| .app-logo img { | |
| height: 32px; | |
| margin-right: 8px; | |
| } | |
| /* Info banner */ | |
| .info-banner { | |
| background-color: var(--background-grey); | |
| border-bottom: 1px solid var(--border-color); | |
| padding: 8px 16px; | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| /* Tab Navigation */ | |
| .tab-navigation { | |
| border-bottom: 1px solid var(--border-color); | |
| margin-bottom: 24px; | |
| } | |
| .tab-bar { | |
| display: flex; | |
| flex-wrap: wrap; | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| gap: 4px; | |
| } | |
| .tab { | |
| padding: 12px 16px; | |
| font-size: 14px; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| border-bottom: 2px solid transparent; | |
| transition: all 0.2s ease; | |
| background: none; | |
| border-radius: 0; | |
| } | |
| .tab:hover { | |
| color: var(--primary-color); | |
| background-color: var(--primary-light); | |
| } | |
| .tab.active { | |
| color: var(--primary-color); | |
| border-bottom-color: var(--primary-color); | |
| font-weight: 600; | |
| } | |
| .tab-content { | |
| display: none; | |
| padding: 16px 0; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| /* Badges */ | |
| .badge { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 2px 8px; | |
| font-size: 12px; | |
| font-weight: 500; | |
| border-radius: 16px; | |
| margin-left: 6px; | |
| background-color: var(--primary-light); | |
| color: var(--primary-color); | |
| } | |
| /* Charts */ | |
| .chart-container { | |
| background-color: var(--background-light); | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border-color); | |
| padding: 16px; | |
| margin-bottom: 24px; | |
| width: 100%; | |
| } | |
| #tradeChart, | |
| #predictionChart, | |
| #exportsCountryChart, | |
| #importsCountryChart, | |
| #exportsProductChart, | |
| #importsProductChart, | |
| #rankingsChart, | |
| #bilateralChart { | |
| max-width: 100%; | |
| margin-top: 16px; | |
| background: var(--background-light); | |
| border-radius: var(--radius-sm); | |
| } | |
| /* Chart controls */ | |
| .chart-controls { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| margin-bottom: 16px; | |
| } | |
| .chart-type-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 6px 12px; | |
| font-size: 13px; | |
| font-weight: 500; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--border-color); | |
| background-color: var(--background-light); | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .chart-type-btn:hover, | |
| .chart-type-btn.active { | |
| background-color: var(--primary-light); | |
| color: var(--primary-color); | |
| border-color: var(--primary-color); | |
| } | |
| .chart-type-btn i { | |
| margin-right: 6px; | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 900px) { | |
| .container, .card { | |
| width: calc(100% - 32px); | |
| padding: 16px; | |
| margin: 16px; | |
| } | |
| .tab-bar { | |
| overflow-x: auto; | |
| white-space: nowrap; | |
| -webkit-overflow-scrolling: touch; | |
| scrollbar-width: none; /* Firefox */ | |
| } | |
| .tab-bar::-webkit-scrollbar { | |
| display: none; /* Chrome/Safari/Opera */ | |
| } | |
| .tab { | |
| padding: 12px 10px; | |
| font-size: 13px; | |
| } | |
| table { | |
| font-size: 13px; | |
| } | |
| th, td { | |
| padding: 8px 12px; | |
| } | |
| } | |
| .alert-success { background: #e5ffe5; color: #27ae60; border: 1px solid #2ecc71; } | |
| .spinner { | |
| border: 6px solid #f3f3f3; | |
| border-top: 6px solid #3498db; | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| animation: spin 1s linear infinite; | |
| margin: 2em auto; | |
| display: block; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| /* Custom styles for specific components */ | |
| .trade-data-visualization { | |
| margin-top: 24px; | |
| } | |
| .ai-assistant-container { | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border-color); | |
| background-color: var(--background-light); | |
| padding: 16px; | |
| margin-bottom: 24px; | |
| } | |
| .chat-message { | |
| padding: 12px 16px; | |
| margin-bottom: 12px; | |
| border-radius: var(--radius-md); | |
| max-width: 80%; | |
| } | |
| .chat-message-user { | |
| background-color: var(--primary-light); | |
| color: var(--text-color); | |
| margin-left: auto; | |
| } | |
| .chat-message-assistant { | |
| background-color: var(--background-grey); | |
| color: var(--text-color); | |
| margin-right: auto; | |
| } | |