/* --- Premium Executive Dashboard View Specific Styles --- */ .dashboard-section-title { padding: 0 0 1rem 0; font-size: 1.55rem; font-weight: 800; color: var(--text-main); letter-spacing: -0.02em; } .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; } /* Premium Glassmorphism Card Style */ .dashboard-card, .stat-card { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 8px 32px rgba(31, 38, 135, 0.07); border-radius: 12px; padding: 1.5rem; display: flex; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease; } .dashboard-card:hover, .stat-card:hover { transform: translateY(-5px); box-shadow: 0 12px 40px rgba(31, 38, 135, 0.12); } .dashboard-layout-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .dashboard-layout-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .dashboard-card { min-height: 380px; } .dashboard-card canvas { flex: 1; width: 100% !important; max-height: 280px; } /* Premium KPI Value Styling */ .stat-value { font-size: 2.2rem; font-weight: 800; background: linear-gradient(135deg, #1E5149 0%, #3B82F6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-top: 0.5rem; display: flex; align-items: center; gap: 0.5rem; } .stat-value-danger { background: linear-gradient(135deg, #E11D48 0%, #F59E0B 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .stat-label { font-size: 1.15rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .stat-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .icon-blue { background: rgba(59, 130, 246, 0.1); color: #3B82F6; } .icon-green { background: rgba(30, 81, 73, 0.1); color: #1E5149; } .icon-red { background: rgba(225, 29, 72, 0.1); color: #E11D48; } .icon-yellow { background: rgba(245, 158, 11, 0.1); color: #F59E0B; } .table-premium { background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); overflow: hidden; } .table-premium table { width: 100%; border-collapse: collapse; } .table-premium th { background: #F8FAFC; color: #475569; font-weight: 700; padding: 1rem; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; } .table-premium td { padding: 1rem; border-bottom: 1px solid #E2E8F0; color: #1E293B; font-size: 13px; } .table-premium tr:hover td { background: #F1F5F9; } /* --- Slider/Carousel Specific Styles --- */ .dashboard-header-wrapper { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; } .slider-controls { display: flex; align-items: center; gap: 1rem; } .slider-nav-btn { background: white; border: 1px solid var(--border-color); box-shadow: 0 2px 8px rgba(0,0,0,0.05); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-main); transition: all 0.2s; } .slider-nav-btn:hover { background: var(--primary-color); color: white; border-color: var(--primary-color); } .slider-nav-btn:disabled { opacity: 0.5; cursor: not-allowed; } .slider-indicator { font-weight: 700; color: var(--text-muted); font-size: 1.2rem; } .dashboard-slider-viewport { width: 100%; overflow: hidden; padding: 0.5rem 0; } .dashboard-slider-track { display: flex; transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); width: 400%; /* For 4 pages */ } .dashboard-slide { width: 25%; /* 100% / 4 pages */ flex-shrink: 0; padding: 0 2px; /* Slight padding to avoid cutting off box-shadows */ height: calc(100vh - 150px); min-height: 520px; display: flex; flex-direction: column; box-sizing: border-box; }