| |
| |
| |
| |
|
|
| |
| .gradient-text { |
| background: linear-gradient(135deg, #1E88E5, #64B5F6); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| color: transparent; |
| } |
|
|
| .shadow-text { |
| text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1); |
| } |
|
|
| |
| h1.hero-title { |
| font-size: 2.5rem; |
| font-weight: 800; |
| color: #1E88E5; |
| line-height: 1.2; |
| margin-bottom: 1.5rem; |
| position: relative; |
| padding-right: 1rem; |
| text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1); |
| background: linear-gradient(135deg, #1E88E5, #64B5F6); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| color: transparent; |
| } |
|
|
| h1.hero-title::before { |
| content: ''; |
| position: absolute; |
| right: 0; |
| top: 0; |
| bottom: 0; |
| width: 5px; |
| background: linear-gradient(180deg, #1E88E5, #64B5F6); |
| border-radius: 5px; |
| } |
|
|
| |
| .card-enhanced { |
| background: white; |
| border-radius: 15px; |
| padding: 1.5rem; |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); |
| transition: transform 0.3s ease, box-shadow 0.3s ease; |
| overflow: hidden; |
| position: relative; |
| z-index: 1; |
| } |
|
|
| .card-enhanced::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| right: 0; |
| width: 100%; |
| height: 5px; |
| background: linear-gradient(90deg, #1E88E5, #64B5F6); |
| z-index: 2; |
| } |
|
|
| .card-enhanced:hover { |
| transform: translateY(-10px); |
| box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); |
| } |
|
|
| |
| .button-enhanced { |
| padding: 0.8rem 1.5rem; |
| border-radius: 50px; |
| font-weight: bold; |
| transition: all 0.3s ease; |
| cursor: pointer; |
| border: none; |
| position: relative; |
| overflow: hidden; |
| z-index: 1; |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); |
| } |
|
|
| .button-enhanced::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| right: 0; |
| width: 0; |
| height: 100%; |
| background: rgba(255, 255, 255, 0.2); |
| transition: width 0.3s ease; |
| z-index: -1; |
| } |
|
|
| .button-enhanced:hover::before { |
| width: 100%; |
| right: auto; |
| left: 0; |
| } |
|
|
| .button-primary-enhanced { |
| background: linear-gradient(135deg, #1E88E5, #1565C0); |
| color: white; |
| } |
|
|
| .button-secondary-enhanced { |
| background: linear-gradient(135deg, #F5F9FF, #E3F2FD); |
| color: #1565C0; |
| border: 1px solid rgba(30, 136, 229, 0.3); |
| } |
|
|
| .button-success-enhanced { |
| background: linear-gradient(135deg, #4CAF50, #2E7D32); |
| color: white; |
| } |
|
|
| .button-warning-enhanced { |
| background: linear-gradient(135deg, #FFC107, #FFA000); |
| color: white; |
| } |
|
|
| .button-danger-enhanced { |
| background: linear-gradient(135deg, #F44336, #C62828); |
| color: white; |
| } |
|
|
| |
| .metric-card-enhanced { |
| background: white; |
| border-radius: 15px; |
| padding: 1.5rem; |
| box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05); |
| text-align: center; |
| position: relative; |
| overflow: hidden; |
| z-index: 1; |
| } |
|
|
| .metric-card-enhanced::before { |
| content: ''; |
| position: absolute; |
| right: 0; |
| top: 0; |
| width: 100%; |
| height: 5px; |
| background: linear-gradient(90deg, var(--metric-color, #1E88E5), var(--metric-color-light, #64B5F6)); |
| z-index: 2; |
| } |
|
|
| .metric-value-enhanced { |
| font-size: 3rem; |
| font-weight: 800; |
| line-height: 1; |
| margin-bottom: 0.5rem; |
| background: linear-gradient(135deg, var(--metric-color, #1E88E5), var(--metric-color-light, #64B5F6)); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| color: transparent; |
| } |
|
|
| .metric-label-enhanced { |
| font-size: 1rem; |
| color: #666; |
| font-weight: 500; |
| } |
|
|
| |
| .tabs-enhanced { |
| display: flex; |
| margin-bottom: 1.5rem; |
| position: relative; |
| } |
|
|
| .tabs-enhanced::after { |
| content: ''; |
| position: absolute; |
| bottom: 0; |
| right: 0; |
| width: 100%; |
| height: 1px; |
| background-color: #ddd; |
| z-index: 1; |
| } |
|
|
| .tab-item-enhanced { |
| padding: 1rem 1.5rem; |
| cursor: pointer; |
| position: relative; |
| font-weight: 500; |
| z-index: 2; |
| transition: all 0.3s ease; |
| } |
|
|
| .tab-item-enhanced::after { |
| content: ''; |
| position: absolute; |
| bottom: 0; |
| right: 0; |
| width: 0; |
| height: 3px; |
| background: linear-gradient(90deg, #1E88E5, #64B5F6); |
| transition: width 0.3s ease; |
| z-index: 3; |
| } |
|
|
| .tab-item-enhanced.active { |
| color: #1E88E5; |
| } |
|
|
| .tab-item-enhanced.active::after { |
| width: 100%; |
| } |
|
|
| .tab-item-enhanced:hover::after { |
| width: 100%; |
| } |
|
|
| |
| .alert-enhanced { |
| padding: 1.2rem; |
| border-radius: 10px; |
| margin-bottom: 1.5rem; |
| position: relative; |
| display: flex; |
| align-items: flex-start; |
| overflow: hidden; |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); |
| } |
|
|
| .alert-enhanced::before { |
| content: ''; |
| position: absolute; |
| right: 0; |
| top: 0; |
| bottom: 0; |
| width: 5px; |
| background: linear-gradient(180deg, var(--alert-color, #1E88E5), var(--alert-color-light, #64B5F6)); |
| border-radius: 0 5px 5px 0; |
| } |
|
|
| .alert-icon-enhanced { |
| margin-left: 1rem; |
| font-size: 1.8rem; |
| color: var(--alert-color, #1E88E5); |
| } |
|
|
| .alert-content-enhanced { |
| flex: 1; |
| } |
|
|
| .alert-title-enhanced { |
| font-weight: bold; |
| margin-bottom: 0.3rem; |
| color: var(--alert-color, #1E88E5); |
| } |
|
|
| .alert-message-enhanced { |
| margin: 0; |
| color: #333; |
| } |
|
|
| |
| .table-enhanced { |
| width: 100%; |
| border-collapse: separate; |
| border-spacing: 0; |
| margin-bottom: 1.5rem; |
| background-color: white; |
| border-radius: 10px; |
| overflow: hidden; |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); |
| } |
|
|
| .table-enhanced th { |
| background: linear-gradient(135deg, #1E88E5, #1565C0); |
| color: white; |
| font-weight: bold; |
| padding: 1.2rem 1rem; |
| text-align: right; |
| } |
|
|
| .table-enhanced td { |
| padding: 1rem; |
| text-align: right; |
| border-bottom: 1px solid #f0f0f0; |
| } |
|
|
| .table-enhanced tr:last-child td { |
| border-bottom: none; |
| } |
|
|
| .table-enhanced tr:nth-child(even) { |
| background-color: #f9fbfe; |
| } |
|
|
| .table-enhanced tr:hover { |
| background-color: #f0f7ff; |
| } |
|
|
| |
| .search-bar-enhanced { |
| position: relative; |
| margin-bottom: 1.5rem; |
| } |
|
|
| .search-input-enhanced { |
| width: 100%; |
| padding: 1rem 3rem; |
| border: none; |
| border-radius: 50px; |
| font-size: 1rem; |
| transition: all 0.3s ease; |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); |
| } |
|
|
| .search-input-enhanced:focus { |
| box-shadow: 0 4px 20px rgba(30, 136, 229, 0.2); |
| outline: none; |
| } |
|
|
| .search-icon-enhanced { |
| position: absolute; |
| right: 1.2rem; |
| top: 50%; |
| transform: translateY(-50%); |
| color: #1E88E5; |
| font-size: 1.2rem; |
| } |
|
|
| |
| .progress-container-enhanced { |
| width: 100%; |
| height: 15px; |
| background-color: #f0f0f0; |
| border-radius: 10px; |
| overflow: hidden; |
| margin-bottom: 1rem; |
| box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05); |
| } |
|
|
| .progress-bar-enhanced { |
| height: 100%; |
| background: linear-gradient(90deg, var(--progress-color, #1E88E5), var(--progress-color-light, #64B5F6)); |
| border-radius: 10px; |
| transition: width 0.5s ease; |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .progress-bar-enhanced::after { |
| content: ''; |
| position: absolute; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| left: 0; |
| background: linear-gradient( |
| 45deg, |
| rgba(255, 255, 255, 0.2) 25%, |
| transparent 25%, |
| transparent 50%, |
| rgba(255, 255, 255, 0.2) 50%, |
| rgba(255, 255, 255, 0.2) 75%, |
| transparent 75%, |
| transparent |
| ); |
| background-size: 30px 30px; |
| animation: progressAnimation 2s linear infinite; |
| border-radius: 10px; |
| } |
|
|
| @keyframes progressAnimation { |
| 0% { |
| background-position: 0 0; |
| } |
| 100% { |
| background-position: 30px 0; |
| } |
| } |
|
|
| |
| .project-card-enhanced { |
| position: relative; |
| overflow: hidden; |
| border-radius: 15px; |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); |
| transition: transform 0.3s ease, box-shadow 0.3s ease; |
| margin-bottom: 1.5rem; |
| } |
|
|
| .project-card-enhanced::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| right: 0; |
| width: 5px; |
| height: 100%; |
| background: linear-gradient(180deg, var(--project-color, #1E88E5), var(--project-color-light, #64B5F6)); |
| } |
|
|
| .project-card-enhanced:hover { |
| transform: translateY(-10px); |
| box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1); |
| } |
|
|
| .project-header-enhanced { |
| padding: 1.5rem; |
| border-bottom: 1px solid #f0f0f0; |
| position: relative; |
| } |
|
|
| .project-title-enhanced { |
| font-weight: bold; |
| font-size: 1.4rem; |
| margin-bottom: 0.5rem; |
| color: #333; |
| } |
|
|
| .project-subtitle-enhanced { |
| font-size: 0.9rem; |
| color: #666; |
| } |
|
|
| .project-content-enhanced { |
| padding: 1.5rem; |
| } |
|
|
| .project-footer-enhanced { |
| padding: 1rem 1.5rem; |
| background-color: #f9fbfe; |
| border-top: 1px solid #f0f0f0; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
|
|
| |
| .task-list-enhanced { |
| margin-bottom: 1.5rem; |
| } |
|
|
| .task-item-enhanced { |
| padding: 1.2rem; |
| background-color: white; |
| border-radius: 10px; |
| margin-bottom: 1rem; |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); |
| display: flex; |
| align-items: center; |
| transition: transform 0.2s ease, box-shadow 0.2s ease; |
| } |
|
|
| .task-item-enhanced:hover { |
| transform: translateY(-3px); |
| box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); |
| } |
|
|
| .task-checkbox-enhanced { |
| margin-left: 1rem; |
| width: 24px; |
| height: 24px; |
| flex-shrink: 0; |
| } |
|
|
| .task-content-enhanced { |
| flex: 1; |
| } |
|
|
| .task-title-enhanced { |
| font-weight: 500; |
| margin-bottom: 0.3rem; |
| color: #333; |
| font-size: 1.1rem; |
| } |
|
|
| .task-description-enhanced { |
| font-size: 0.9rem; |
| color: #666; |
| } |
|
|
| .task-meta-enhanced { |
| display: flex; |
| align-items: center; |
| font-size: 0.8rem; |
| color: #888; |
| margin-top: 0.8rem; |
| } |
|
|
| .task-meta-item-enhanced { |
| display: flex; |
| align-items: center; |
| margin-left: 1.2rem; |
| } |
|
|
| .task-meta-icon-enhanced { |
| margin-left: 0.3rem; |
| color: var(--task-color, #1E88E5); |
| } |
|
|
| |
| .icon-enhanced { |
| width: 40px; |
| height: 40px; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| border-radius: 50%; |
| background: linear-gradient(135deg, var(--icon-color, #1E88E5), var(--icon-color-light, #64B5F6)); |
| color: white; |
| box-shadow: 0 4px 10px rgba(var(--icon-color-rgb, 30, 136, 229), 0.3); |
| margin-left: 1rem; |
| flex-shrink: 0; |
| } |
|
|
| |
| .profile-card-enhanced { |
| background-color: white; |
| border-radius: 15px; |
| padding: 1.5rem; |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); |
| display: flex; |
| align-items: center; |
| margin-bottom: 1.5rem; |
| } |
|
|
| .profile-avatar-enhanced { |
| width: 80px; |
| height: 80px; |
| border-radius: 50%; |
| background: linear-gradient(135deg, #1E88E5, #64B5F6); |
| color: white; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| font-size: 2rem; |
| font-weight: bold; |
| margin-left: 1.5rem; |
| box-shadow: 0 5px 15px rgba(30, 136, 229, 0.3); |
| flex-shrink: 0; |
| } |
|
|
| .profile-info-enhanced { |
| flex: 1; |
| } |
|
|
| .profile-name-enhanced { |
| font-size: 1.4rem; |
| font-weight: bold; |
| margin-bottom: 0.3rem; |
| color: #333; |
| } |
|
|
| .profile-role-enhanced { |
| font-size: 0.9rem; |
| color: #1E88E5; |
| margin-bottom: 0.8rem; |
| } |
|
|
| .profile-stats-enhanced { |
| display: flex; |
| margin-top: 1rem; |
| } |
|
|
| .profile-stat-enhanced { |
| margin-left: 1.5rem; |
| text-align: center; |
| } |
|
|
| .profile-stat-value-enhanced { |
| font-size: 1.2rem; |
| font-weight: bold; |
| color: #1E88E5; |
| } |
|
|
| .profile-stat-label-enhanced { |
| font-size: 0.8rem; |
| color: #666; |
| } |
|
|
| |
| .list-enhanced { |
| list-style-type: none; |
| padding: 0; |
| margin: 0 0 1.5rem 0; |
| } |
|
|
| .list-item-enhanced { |
| position: relative; |
| padding-right: 2rem; |
| margin-bottom: 1rem; |
| } |
|
|
| .list-item-enhanced::before { |
| content: ''; |
| position: absolute; |
| top: 0.5rem; |
| right: 0; |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| background: linear-gradient(135deg, #1E88E5, #64B5F6); |
| } |
|
|
| |
| .hero-section { |
| background: linear-gradient(135deg, #f8f9fa, #f0f7ff); |
| padding: 3rem 2rem; |
| border-radius: 15px; |
| margin-bottom: 2rem; |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); |
| text-align: center; |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .hero-section::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| right: 0; |
| width: 100%; |
| height: 5px; |
| background: linear-gradient(90deg, #1E88E5, #64B5F6); |
| } |
|
|
| .hero-title { |
| font-size: 2.5rem; |
| font-weight: 800; |
| margin-bottom: 1rem; |
| background: linear-gradient(135deg, #1E88E5, #64B5F6); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| color: transparent; |
| } |
|
|
| .hero-subtitle { |
| font-size: 1.2rem; |
| color: #666; |
| margin-bottom: 2rem; |
| max-width: 700px; |
| margin-right: auto; |
| margin-left: auto; |
| } |
|
|
| .hero-actions { |
| display: flex; |
| justify-content: center; |
| gap: 1rem; |
| } |
|
|
| |
| .chart-container-enhanced { |
| background-color: white; |
| border-radius: 15px; |
| padding: 1.5rem; |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); |
| margin-bottom: 2rem; |
| position: relative; |
| } |
|
|
| .chart-header-enhanced { |
| margin-bottom: 1.5rem; |
| text-align: center; |
| } |
|
|
| .chart-title-enhanced { |
| font-size: 1.4rem; |
| font-weight: bold; |
| color: #333; |
| margin-bottom: 0.3rem; |
| } |
|
|
| .chart-subtitle-enhanced { |
| font-size: 0.9rem; |
| color: #666; |
| } |
|
|
| |
| .timeline-enhanced { |
| margin-bottom: 2rem; |
| position: relative; |
| } |
|
|
| .timeline-enhanced::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| right: 24px; |
| bottom: 0; |
| width: 2px; |
| background: linear-gradient(180deg, #1E88E5, #64B5F6); |
| } |
|
|
| .timeline-item-enhanced { |
| position: relative; |
| padding-right: 50px; |
| padding-bottom: 1.5rem; |
| } |
|
|
| .timeline-point-enhanced { |
| position: absolute; |
| top: 0; |
| right: 20px; |
| width: 12px; |
| height: 12px; |
| border-radius: 50%; |
| background: linear-gradient(135deg, #1E88E5, #64B5F6); |
| transform: translateX(50%); |
| box-shadow: 0 0 0 4px rgba(30, 136, 229, 0.2); |
| z-index: 2; |
| } |
|
|
| .timeline-content-enhanced { |
| background-color: white; |
| border-radius: 10px; |
| padding: 1.2rem; |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); |
| } |
|
|
| .timeline-date-enhanced { |
| font-size: 0.8rem; |
| color: #1E88E5; |
| margin-bottom: 0.5rem; |
| } |
|
|
| .timeline-title-enhanced { |
| font-weight: 500; |
| margin-bottom: 0.5rem; |
| color: #333; |
| } |
|
|
| .timeline-description-enhanced { |
| font-size: 0.9rem; |
| color: #666; |
| } |
|
|
| |
| .service-grid { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 1.5rem; |
| margin-bottom: 2rem; |
| } |
|
|
| .service-item { |
| background-color: white; |
| border-radius: 10px; |
| padding: 1.5rem; |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); |
| transition: transform 0.3s ease, box-shadow 0.3s ease; |
| text-align: center; |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .service-item:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
| } |
|
|
| .service-item::after { |
| content: ''; |
| position: absolute; |
| top: 0; |
| right: 0; |
| width: 100%; |
| height: 4px; |
| background: linear-gradient(90deg, #1E88E5, #64B5F6); |
| } |
|
|
| .service-icon { |
| width: 60px; |
| height: 60px; |
| background: linear-gradient(135deg, #1E88E5, #64B5F6); |
| border-radius: 50%; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| margin: 0 auto 1rem auto; |
| color: white; |
| font-size: 1.5rem; |
| box-shadow: 0 5px 15px rgba(30, 136, 229, 0.3); |
| } |
|
|
| .service-title { |
| font-weight: bold; |
| margin-bottom: 0.5rem; |
| color: #333; |
| } |
|
|
| .service-description { |
| font-size: 0.9rem; |
| color: #666; |
| } |
|
|
| |
| @media (max-width: 768px) { |
| .service-grid { |
| grid-template-columns: repeat(2, 1fr); |
| } |
| |
| .hero-title { |
| font-size: 2rem; |
| } |
| |
| .chart-container-enhanced { |
| padding: 1rem; |
| } |
| |
| .project-card-enhanced { |
| margin-bottom: 1rem; |
| } |
| } |
|
|
| @media (max-width: 576px) { |
| .service-grid { |
| grid-template-columns: 1fr; |
| } |
| |
| .hero-actions { |
| flex-direction: column; |
| } |
| |
| .profile-card-enhanced { |
| flex-direction: column; |
| text-align: center; |
| } |
| |
| .profile-avatar-enhanced { |
| margin: 0 0 1rem 0; |
| } |
| |
| .profile-stats-enhanced { |
| justify-content: center; |
| } |
| } |
|
|
| |
| .tender-card { |
| background-color: white; |
| border-radius: 15px; |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); |
| margin-bottom: 1.5rem; |
| position: relative; |
| overflow: hidden; |
| transition: transform 0.3s ease, box-shadow 0.3s ease; |
| } |
|
|
| .tender-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1); |
| } |
|
|
| .tender-card::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| right: 0; |
| width: 5px; |
| height: 100%; |
| background: linear-gradient(180deg, #1E88E5, #64B5F6); |
| } |
|
|
| .tender-header { |
| padding: 1.5rem; |
| border-bottom: 1px solid #f0f0f0; |
| } |
|
|
| .tender-title { |
| font-size: 1.4rem; |
| font-weight: bold; |
| margin-bottom: 0.5rem; |
| color: #333; |
| } |
|
|
| .tender-meta { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 1rem; |
| margin-top: 1rem; |
| } |
|
|
| .tender-meta-item { |
| display: flex; |
| align-items: center; |
| font-size: 0.8rem; |
| color: #666; |
| } |
|
|
| .tender-meta-icon { |
| margin-left: 0.5rem; |
| color: #1E88E5; |
| } |
|
|
| .tender-body { |
| padding: 1.5rem; |
| } |
|
|
| .tender-section { |
| margin-bottom: 1.5rem; |
| } |
|
|
| .tender-section-title { |
| font-weight: bold; |
| margin-bottom: 0.8rem; |
| color: #333; |
| padding-bottom: 0.5rem; |
| border-bottom: 1px solid #f0f0f0; |
| } |
|
|
| .tender-footer { |
| padding: 1rem 1.5rem; |
| background-color: #f9fbfe; |
| border-top: 1px solid #f0f0f0; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
|
|
| .tender-actions { |
| display: flex; |
| gap: 0.8rem; |
| } |
|
|
| |
| .items-table-enhanced { |
| width: 100%; |
| border-collapse: separate; |
| border-spacing: 0; |
| margin-bottom: 1.5rem; |
| background-color: white; |
| border-radius: 10px; |
| overflow: hidden; |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); |
| } |
|
|
| .items-table-enhanced th { |
| background: linear-gradient(135deg, #1E88E5, #1565C0); |
| color: white; |
| font-weight: bold; |
| padding: 1rem; |
| text-align: right; |
| } |
|
|
| .items-table-enhanced td { |
| padding: 0.8rem 1rem; |
| text-align: right; |
| border-bottom: 1px solid #f0f0f0; |
| } |
|
|
| .items-table-enhanced tr:last-child td { |
| border-bottom: none; |
| } |
|
|
| .items-price { |
| font-weight: bold; |
| color: #1E88E5; |
| } |
|
|
| .price-analysis { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| } |
|
|
| .price-indicator { |
| width: 10px; |
| height: 10px; |
| border-radius: 50%; |
| display: inline-block; |
| } |
|
|
| .price-indicator-high { |
| background-color: #F44336; |
| } |
|
|
| .price-indicator-normal { |
| background-color: #4CAF50; |
| } |
|
|
| .price-indicator-low { |
| background-color: #FFC107; |
| } |
|
|
| |
| .risk-card { |
| background-color: white; |
| border-radius: 15px; |
| padding: 1.5rem; |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); |
| margin-bottom: 1.5rem; |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .risk-card::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| right: 0; |
| width: 5px; |
| height: 100%; |
| } |
|
|
| .risk-card--high::before { |
| background: linear-gradient(180deg, #F44336, #B71C1C); |
| } |
|
|
| .risk-card--medium::before { |
| background: linear-gradient(180deg, #FFC107, #FFA000); |
| } |
|
|
| .risk-card--low::before { |
| background: linear-gradient(180deg, #4CAF50, #2E7D32); |
| } |
|
|
| .risk-header { |
| display: flex; |
| align-items: center; |
| margin-bottom: 1rem; |
| } |
|
|
| .risk-icon { |
| width: 40px; |
| height: 40px; |
| border-radius: 50%; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| margin-left: 1rem; |
| color: white; |
| } |
|
|
| .risk-icon--high { |
| background: linear-gradient(135deg, #F44336, #B71C1C); |
| } |
|
|
| .risk-icon--medium { |
| background: linear-gradient(135deg, #FFC107, #FFA000); |
| } |
|
|
| .risk-icon--low { |
| background: linear-gradient(135deg, #4CAF50, #2E7D32); |
| } |
|
|
| .risk-title { |
| font-weight: bold; |
| color: #333; |
| } |
|
|
| .risk-description { |
| margin-bottom: 1rem; |
| color: #666; |
| } |
|
|
| .risk-actions { |
| display: flex; |
| gap: 0.8rem; |
| margin-top: 1rem; |
| } |
|
|
| |
| .legend-card { |
| background-color: white; |
| border-radius: 10px; |
| padding: 1.2rem; |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); |
| margin-bottom: 1.5rem; |
| } |
|
|
| .legend-title { |
| font-weight: bold; |
| margin-bottom: 1rem; |
| color: #333; |
| padding-bottom: 0.5rem; |
| border-bottom: 1px solid #f0f0f0; |
| } |
|
|
| .legend-items { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 1rem; |
| } |
|
|
| .legend-item { |
| display: flex; |
| align-items: center; |
| margin-bottom: 0.8rem; |
| } |
|
|
| .legend-color { |
| width: 16px; |
| height: 16px; |
| border-radius: 4px; |
| margin-left: 0.5rem; |
| } |
|
|
| .legend-label { |
| font-size: 0.9rem; |
| color: #333; |
| } |
|
|
| |
| .form-enhanced { |
| background-color: white; |
| border-radius: 15px; |
| padding: 1.5rem; |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); |
| margin-bottom: 1.5rem; |
| } |
|
|
| .form-title { |
| font-size: 1.4rem; |
| font-weight: bold; |
| margin-bottom: 1.5rem; |
| color: #333; |
| text-align: center; |
| } |
|
|
| .form-section { |
| margin-bottom: 1.5rem; |
| } |
|
|
| .form-section-title { |
| font-weight: bold; |
| margin-bottom: 1rem; |
| color: #333; |
| padding-bottom: 0.5rem; |
| border-bottom: 1px solid #f0f0f0; |
| } |
|
|
| .form-row { |
| display: flex; |
| gap: 1rem; |
| margin-bottom: 1rem; |
| } |
|
|
| .form-group { |
| flex: 1; |
| } |
|
|
| .form-label { |
| display: block; |
| margin-bottom: 0.5rem; |
| font-weight: 500; |
| color: #333; |
| } |
|
|
| .form-input, |
| .form-select, |
| .form-textarea { |
| width: 100%; |
| padding: 0.8rem 1rem; |
| border: 1px solid #ddd; |
| border-radius: 5px; |
| font-size: 1rem; |
| transition: border-color 0.3s ease, box-shadow 0.3s ease; |
| } |
|
|
| .form-input:focus, |
| .form-select:focus, |
| .form-textarea:focus { |
| border-color: #1E88E5; |
| box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.2); |
| outline: none; |
| } |
|
|
| .form-textarea { |
| min-height: 100px; |
| resize: vertical; |
| } |
|
|
| .form-actions { |
| display: flex; |
| justify-content: flex-end; |
| gap: 1rem; |
| margin-top: 1.5rem; |
| } |
