Spaces:
Running
Running
| /* Card Component */ | |
| .card { | |
| background: var(--bg-card); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-lg); | |
| box-shadow: var(--shadow-md); | |
| transition: all var(--transition-base); | |
| } | |
| .card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-lg); | |
| border-color: hsla(var(--primary-hue), 85%, 60%, 0.5); | |
| } | |
| .card-header { | |
| padding-bottom: var(--space-md); | |
| border-bottom: 1px solid var(--border-color); | |
| margin-bottom: var(--space-md); | |
| } | |
| .card-title { | |
| font-size: var(--font-size-lg); | |
| font-weight: 600; | |
| margin: 0; | |
| } | |
| .card-body { | |
| padding: var(--space-sm) 0; | |
| } | |
| /* Summary Cards (Metrics) */ | |
| .summary-card { | |
| background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-glass) 100%); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-xl); | |
| padding: var(--space-xl); | |
| text-align: center; | |
| position: relative; | |
| overflow: hidden; | |
| transition: all var(--transition-base); | |
| } | |
| .summary-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 4px; | |
| background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); | |
| } | |
| .summary-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: var(--shadow-xl); | |
| } | |
| .summary-card.success::before { | |
| background: var(--success-color); | |
| } | |
| .summary-card.danger::before { | |
| background: var(--danger-color); | |
| } | |
| .summary-card.info::before { | |
| background: var(--info-color); | |
| } | |
| .summary-card-icon { | |
| font-size: 3rem; | |
| margin-bottom: var(--space-md); | |
| opacity: 0.8; | |
| } | |
| .summary-card-value { | |
| font-size: var(--font-size-3xl); | |
| font-weight: 700; | |
| margin-bottom: var(--space-xs); | |
| } | |
| .summary-card-label { | |
| font-size: var(--font-size-sm); | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| /* Button Component */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: var(--space-sm); | |
| padding: var(--space-sm) var(--space-lg); | |
| font-size: var(--font-size-base); | |
| font-weight: 600; | |
| border: none; | |
| border-radius: var(--radius-md); | |
| cursor: pointer; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| text-decoration: none; | |
| white-space: nowrap; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .btn:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); | |
| color: white; | |
| box-shadow: 0 4px 12px hsla(var(--primary-hue), 85%, 60%, 0.3); | |
| } | |
| .btn-primary:hover:not(:disabled) { | |
| transform: translateY(-2px) scale(1.02); | |
| box-shadow: 0 8px 24px hsla(var(--primary-hue), 85%, 60%, 0.5); | |
| filter: brightness(1.1); | |
| } | |
| .btn-primary:active:not(:disabled) { | |
| transform: translateY(0) scale(0.98); | |
| box-shadow: 0 4px 12px hsla(var(--primary-hue), 85%, 60%, 0.3); | |
| } | |
| .btn-secondary { | |
| background: var(--bg-tertiary); | |
| color: var(--text-primary); | |
| border: 1px solid var(--border-color); | |
| } | |
| .btn-secondary:hover:not(:disabled) { | |
| background: var(--bg-glass); | |
| border-color: var(--primary-color); | |
| transform: translateY(-2px) scale(1.02); | |
| box-shadow: 0 6px 16px rgba(99, 102, 241, 0.2); | |
| } | |
| .btn-secondary:active:not(:disabled) { | |
| transform: translateY(0) scale(0.98); | |
| } | |
| .btn-success { | |
| background: linear-gradient(135deg, var(--success-color), hsl(145, 70%, 40%)); | |
| color: white; | |
| box-shadow: 0 4px 12px hsla(145, 70%, 50%, 0.3); | |
| } | |
| .btn-success:hover:not(:disabled) { | |
| transform: translateY(-2px) scale(1.02); | |
| box-shadow: 0 8px 24px hsla(145, 70%, 50%, 0.5); | |
| filter: brightness(1.1); | |
| } | |
| .btn-success:active:not(:disabled) { | |
| transform: translateY(0) scale(0.98); | |
| } | |
| .btn-danger { | |
| background: linear-gradient(135deg, var(--danger-color), hsl(0, 75%, 50%)); | |
| color: white; | |
| box-shadow: 0 4px 12px hsla(0, 75%, 60%, 0.3); | |
| } | |
| .btn-danger:hover:not(:disabled) { | |
| transform: translateY(-2px) scale(1.02); | |
| box-shadow: 0 8px 24px hsla(0, 75%, 60%, 0.5); | |
| filter: brightness(1.1); | |
| } | |
| .btn-danger:active:not(:disabled) { | |
| transform: translateY(0) scale(0.98); | |
| } | |
| .btn-sm { | |
| padding: var(--space-xs) var(--space-md); | |
| font-size: var(--font-size-sm); | |
| } | |
| .btn-lg { | |
| padding: var(--space-md) var(--space-xl); | |
| font-size: var(--font-size-lg); | |
| } | |
| .btn-icon { | |
| width: 40px; | |
| height: 40px; | |
| padding: 0; | |
| border-radius: 50%; | |
| } | |
| /* Table Container */ | |
| .table-container { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| box-shadow: var(--shadow-md); | |
| } | |
| .table-wrapper { | |
| max-height: 400px; | |
| overflow-y: auto; | |
| overflow-x: auto; | |
| } | |
| .table-wrapper::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| .table-wrapper::-webkit-scrollbar-track { | |
| background: var(--bg-secondary); | |
| } | |
| .table-wrapper::-webkit-scrollbar-thumb { | |
| background: var(--border-color); | |
| border-radius: 4px; | |
| } | |
| .table-wrapper::-webkit-scrollbar-thumb:hover { | |
| background: var(--primary-color); | |
| } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| thead { | |
| position: sticky; | |
| top: 0; | |
| background: var(--bg-tertiary); | |
| z-index: 10; | |
| } | |
| th { | |
| padding: var(--space-md); | |
| text-align: left; | |
| font-weight: 600; | |
| font-size: var(--font-size-sm); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: var(--text-secondary); | |
| border-bottom: 2px solid var(--border-color); | |
| } | |
| td { | |
| padding: var(--space-md); | |
| border-bottom: 1px solid var(--border-color); | |
| font-size: var(--font-size-sm); | |
| } | |
| tr:hover:not(.total-row) { | |
| background: var(--bg-glass); | |
| } | |
| .total-row { | |
| background: var(--bg-tertiary); | |
| font-weight: 700; | |
| position: sticky; | |
| bottom: 0; | |
| } | |
| .total-row td { | |
| border-top: 2px solid var(--primary-color); | |
| border-bottom: none; | |
| } | |
| /* P&L Color Coding */ | |
| .profit { | |
| color: var(--success-color); | |
| font-weight: 600; | |
| } | |
| .loss { | |
| color: var(--danger-color); | |
| font-weight: 600; | |
| } | |
| .neutral { | |
| color: var(--text-secondary); | |
| } | |
| /* Badge */ | |
| .badge { | |
| display: inline-block; | |
| padding: var(--space-xs) var(--space-sm); | |
| font-size: var(--font-size-xs); | |
| font-weight: 600; | |
| border-radius: var(--radius-sm); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .badge-success { | |
| background: var(--success-light); | |
| color: var(--success-color); | |
| } | |
| .badge-danger { | |
| background: var(--danger-light); | |
| color: var(--danger-color); | |
| } | |
| .badge-primary { | |
| background: hsla(var(--primary-hue), 85%, 60%, 0.2); | |
| color: var(--primary-color); | |
| } | |
| /* Form Elements */ | |
| .form-group { | |
| margin-bottom: var(--space-lg); | |
| } | |
| .form-label { | |
| display: block; | |
| margin-bottom: var(--space-sm); | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| } | |
| .form-input, | |
| .form-select, | |
| .form-textarea { | |
| width: 100%; | |
| padding: var(--space-md); | |
| background: var(--bg-tertiary); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-md); | |
| color: var(--text-primary); | |
| font-size: var(--font-size-base); | |
| transition: all var(--transition-base); | |
| } | |
| .form-input:focus, | |
| .form-select:focus, | |
| .form-textarea:focus { | |
| outline: none; | |
| border-color: var(--border-focus); | |
| box-shadow: 0 0 0 3px hsla(var(--primary-hue), 85%, 60%, 0.1); | |
| } | |
| .form-select { | |
| cursor: pointer; | |
| } | |
| /* Toast Notification */ | |
| .toast { | |
| position: fixed; | |
| top: 80px; | |
| right: 20px; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-lg); | |
| box-shadow: var(--shadow-xl); | |
| z-index: 10000; | |
| min-width: 300px; | |
| animation: slideIn 0.3s ease; | |
| } | |
| .toast.success { | |
| border-left: 4px solid var(--success-color); | |
| } | |
| .toast.error { | |
| border-left: 4px solid var(--danger-color); | |
| } | |
| .toast.info { | |
| border-left: 4px solid var(--info-color); | |
| } | |
| .toast-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: var(--space-sm); | |
| } | |
| .toast-title { | |
| font-weight: 700; | |
| font-size: var(--font-size-base); | |
| } | |
| .toast-close { | |
| background: none; | |
| border: none; | |
| color: var(--text-secondary); | |
| font-size: var(--font-size-xl); | |
| cursor: pointer; | |
| padding: 0; | |
| width: 24px; | |
| height: 24px; | |
| line-height: 1; | |
| } | |
| .toast-body { | |
| color: var(--text-secondary); | |
| font-size: var(--font-size-sm); | |
| } | |
| /* Modal */ | |
| .modal { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.8); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 10000; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| .modal-content { | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-xl); | |
| padding: var(--space-2xl); | |
| max-width: 600px; | |
| width: 90%; | |
| max-height: 80vh; | |
| overflow-y: auto; | |
| box-shadow: var(--shadow-xl); | |
| animation: fadeIn 0.4s ease; | |
| } | |
| .modal-header { | |
| margin-bottom: var(--space-lg); | |
| } | |
| .modal-title { | |
| font-size: var(--font-size-2xl); | |
| margin: 0; | |
| } | |
| .modal-footer { | |
| margin-top: var(--space-lg); | |
| display: flex; | |
| justify-content: flex-end; | |
| gap: var(--space-md); | |
| } | |
| /* Tabs */ | |
| .tabs { | |
| display: flex; | |
| gap: var(--space-sm); | |
| border-bottom: 2px solid var(--border-color); | |
| margin-bottom: var(--space-lg); | |
| } | |
| .tab { | |
| padding: var(--space-md) var(--space-lg); | |
| background: transparent; | |
| border: none; | |
| color: var(--text-secondary); | |
| font-size: var(--font-size-base); | |
| font-weight: 600; | |
| cursor: pointer; | |
| border-bottom: 2px solid transparent; | |
| margin-bottom: -2px; | |
| transition: all var(--transition-base); | |
| } | |
| .tab:hover { | |
| color: var(--primary-color); | |
| } | |
| .tab.active { | |
| color: var(--primary-color); | |
| border-bottom-color: var(--primary-color); | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| /* Checkbox & Radio */ | |
| .checkbox, | |
| .radio { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| cursor: pointer; | |
| margin-bottom: var(--space-sm); | |
| } | |
| .checkbox input, | |
| .radio input { | |
| width: 18px; | |
| height: 18px; | |
| cursor: pointer; | |
| } | |
| /* Alert */ | |
| .alert { | |
| padding: var(--space-lg); | |
| border-radius: var(--radius-md); | |
| margin-bottom: var(--space-lg); | |
| border-left: 4px solid; | |
| } | |
| .alert-success { | |
| background: var(--success-light); | |
| border-color: var(--success-color); | |
| color: var(--success-color); | |
| } | |
| .alert-danger { | |
| background: var(--danger-light); | |
| border-color: var(--danger-color); | |
| color: var(--danger-color); | |
| } | |
| /* User Profile in Header */ | |
| .user-profile { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-md); | |
| padding-left: var(--space-lg); | |
| border-left: 1px solid var(--border-color); | |
| flex-shrink: 0; | |
| } | |
| .user-info { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| font-size: var(--font-size-sm); | |
| color: var(--text-secondary); | |
| } | |
| .user-avatar { | |
| width: 32px; | |
| height: 32px; | |
| background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 0.875rem; | |
| color: white; | |
| font-weight: 700; | |
| box-shadow: 0 2px 8px hsla(var(--primary-hue), 85%, 60%, 0.3); | |
| } | |
| .user-name { | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| .logout-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-xs); | |
| padding: var(--space-sm) var(--space-md); | |
| font-size: var(--font-size-sm); | |
| font-weight: 600; | |
| background: hsla(0, 75%, 60%, 0.12); | |
| color: var(--danger-color); | |
| border: 1px solid hsla(0, 75%, 60%, 0.25); | |
| border-radius: var(--radius-md); | |
| cursor: pointer; | |
| transition: all var(--transition-base); | |
| } | |
| .logout-btn svg { | |
| width: 16px; | |
| height: 16px; | |
| } | |
| .logout-btn:hover { | |
| background: var(--danger-color); | |
| color: white; | |
| border-color: var(--danger-color); | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px hsla(0, 75%, 60%, 0.4); | |
| } | |
| .logout-btn:active { | |
| transform: translateY(0); | |
| } | |
| /* Skeleton Loading */ | |
| .skeleton-pulse { | |
| background: linear-gradient(90deg, | |
| hsla(220, 20%, 25%, 0.4) 0%, | |
| hsla(220, 20%, 30%, 0.6) 50%, | |
| hsla(220, 20%, 25%, 0.4) 100%); | |
| background-size: 200% 100%; | |
| animation: skeleton-loading 1.5s ease-in-out infinite; | |
| pointer-events: none; | |
| cursor: default; | |
| } | |
| @keyframes skeleton-loading { | |
| 0% { | |
| background-position: 200% 0; | |
| } | |
| 100% { | |
| background-position: -200% 0; | |
| } | |
| } | |
| .skeleton-pulse.user-avatar { | |
| background: linear-gradient(90deg, | |
| hsla(var(--primary-hue), 50%, 40%, 0.4) 0%, | |
| hsla(var(--primary-hue), 50%, 50%, 0.6) 50%, | |
| hsla(var(--primary-hue), 50%, 40%, 0.4) 100%); | |
| background-size: 200% 100%; | |
| } | |
| @media (max-width: 768px) { | |
| .user-profile { | |
| padding-left: var(--space-sm); | |
| gap: var(--space-sm); | |
| border-left: none; | |
| } | |
| .user-name { | |
| display: none; | |
| } | |
| .logout-btn span { | |
| display: none; | |
| } | |
| .nav-links { | |
| display: none; | |
| } | |
| } |