/* ============================================================
   5. DASHBOARD WIDGETS & STATS
   ============================================================ */
.hero-card { 
    position: relative; 
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-mid) 50%, var(--primary-hover) 100%); 
    color: white; 
    padding: 35px; 
    border-radius: 24px; 
    box-shadow: 0 15px 30px rgba(var(--primary-rgb), 0.2); 
    margin-bottom: 25px; 
    overflow: hidden; 
}

.hero-card-guru {
    background: linear-gradient(135deg, #0f766e 0%, #14b8a6 50%, #0d9488 100%);
    box-shadow: 0 15px 30px rgba(13, 148, 136, 0.2);
}

.hero-card-siswa {
    background: linear-gradient(135deg, #5b21b6 0%, #8b5cf6 50%, #6d28d9 100%);
    box-shadow: 0 15px 30px rgba(124, 58, 237, 0.2);
}

.hero-card::after { 
    content: ''; 
    position: absolute; 
    right: -50px; 
    top: -50px; 
    width: 220px; 
    height: 220px; 
    background: rgba(255,255,255,0.1); 
    border-radius: 50%; 
    pointer-events: none; 
}

.hero-card-content { position: relative; z-index: 1; }
.hero-card h2 { color: white; font-size: 26px; font-weight: 800; margin: 0 0 8px 0; border-bottom: none; }
.hero-card p { font-size: 14px; color: rgba(255, 255, 255, 0.9); margin: 0; font-weight: 500; }
.hero-badge { background: rgba(255, 255, 255, 0.2); padding: 6px 14px; border-radius: 50px; font-size: 12px; font-weight: 700; display: inline-block; backdrop-filter: blur(5px); margin-bottom: 12px; }

/* Grid Statistics */
.stats-grid-saas { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
    gap: 20px; 
    margin-bottom: 25px; 
}

.stat-card-saas { 
    background: #FFFFFF; 
    border-radius: var(--radius-lg); 
    padding: 22px; 
    display: flex; 
    align-items: center; 
    gap: 16px; 
    box-shadow: var(--shadow-sm); 
    border: 1px solid var(--border-color); 
}

.stat-icon { 
    width: 52px; 
    height: 52px; 
    border-radius: var(--radius-md); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-shrink: 0; 
    font-size: 24px;
}

.stat-icon svg, .stat-icon img { width: 28px !important; height: 28px !important; flex-shrink: 0; }
.icon-blue { background: var(--primary-light); color: var(--primary); } 
.icon-green { background: #ecfdf5; color: #059669; } 
.icon-amber { background: #fef3c7; color: #d97706; } 
.icon-purple { background: #f3e8ff; color: #7e22ce; }
.icon-teal { background: #ccfbf1; color: #0f766e; }

.stat-info { flex: 1; min-width: 0; }
.stat-info p { margin: 0; color: var(--text-muted); font-size: 13px; font-weight: 600; }
.stat-info h3 { margin: 4px 0 0 0; color: var(--text-main); font-size: 22px; font-weight: 800; border: none; padding: 0; line-height: 1.2; }

/* Dashboard Panels */
.panels-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 25px; }
.info-panel { background: white; border-radius: var(--radius-lg); padding: 22px; border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); }
.panel-header { font-size: 15px; font-weight: 700; color: var(--text-main); margin-bottom: 15px; padding-bottom: 12px; border-bottom: 1px solid #f1f5f9; }
.panel-list { list-style: none; padding: 0; margin: 0; }
.panel-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f1f5f9; gap: 10px; }

/* Finance Cards */
.finance-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 25px; }
.finance-card { padding: 18px 22px; border-radius: 16px; border: 1px solid var(--border-color); }
.finance-card p { margin: 0 0 4px 0; font-size: 12px; font-weight: 600; }
.finance-card h4 { margin: 0; font-size: 20px; font-weight: 800; }
.card-unpaid { background: var(--danger-light); border-color: #fecaca; color: #991b1b; }
.card-paid { background: var(--success-light); border-color: #bbf7d0; color: #166534; }