/* ═══════════════════════════════════════════════════════
   SafeHaven – Dashboard.css
   Dashboard page styling with dark theme
   ═══════════════════════════════════════════════════════ */

.dash-page { 
    min-height: 100vh; 
    padding-top: 70px; 
    display: flex; 
    flex-direction: column;
    background: var(--navy-900);
}

.dash-main { 
    flex: 1; 
    padding: 32px 24px 60px;
    background: var(--navy-900);
}

.dash-container { 
    max-width: 1000px; 
    margin: 0 auto; 
}

/* ─── Banner ────────────────────────────────────── */
.dash-banner {
    background: linear-gradient(135deg, var(--navy-600), #1a4e75);
    border: 1px solid rgba(52, 152, 219, 0.22); 
    border-radius: var(--radius-xl);
    padding: 32px 36px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    gap: 20px; 
    margin-bottom: 32px; 
    position: relative; 
    overflow: hidden;
}

.dash-banner::before {
    content: ''; 
    position: absolute; 
    top: -36px; 
    right: -36px;
    width: 160px; 
    height: 160px; 
    border-radius: 50%;
    background: radial-gradient(circle, rgba(52, 152, 219, 0.11), transparent 70%);
    pointer-events: none;
}

.dash-banner h2 { 
    font-family: 'Playfair Display', serif; 
    font-size: 1.45rem; 
    font-weight: 700; 
    color: var(--white); 
    margin-bottom: 4px; 
}

.dash-banner h2 span { 
    color: var(--accent-light); 
}

.dash-banner p { 
    color: var(--text-secondary); 
    font-size: 0.88rem; 
}

.dash-banner-icon { 
    color: rgba(52, 152, 219, 0.28); 
    flex-shrink: 0; 
}

.dash-banner-icon svg { 
    width: 56px; 
    height: 56px; 
}

/* ─── Stat row ──────────────────────────────────── */
.stat-row { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 16px; 
    margin-bottom: 36px; 
}

.stat-card {
    background: var(--navy-800); 
    border: 1px solid rgba(52, 152, 219, 0.12);
    border-radius: var(--radius-lg); 
    padding: 20px 18px;
    display: flex; 
    align-items: center; 
    gap: 14px;
    transition: transform var(--transition);
}

.stat-card:hover { 
    transform: translateY(-2px); 
}

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

.stat-icon svg { 
    width: 22px; 
    height: 22px; 
}

.si-green { background: var(--green-pale); }
.si-green svg { color: var(--green-light); }
.si-blue { background: var(--accent-pale); }
.si-blue svg { color: var(--accent-light); }
.si-orange { background: var(--orange-pale); }
.si-orange svg { color: var(--orange); }

.stat-label { 
    color: var(--text-muted); 
    font-size: 0.74rem; 
    font-weight: 600; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
}

.stat-value { 
    color: var(--white); 
    font-size: 0.97rem; 
    font-weight: 600; 
    margin-top: 1px; 
}

.stat-card.top-green { border-top: 2px solid var(--green); }
.stat-card.top-blue { border-top: 2px solid var(--accent); }
.stat-card.top-orange { border-top: 2px solid var(--orange); }

/* ─── Module grid ───────────────────────────────── */
.modules-head { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    margin-bottom: 16px; 
}

.modules-head h3 { 
    color: var(--white); 
    font-size: 1.05rem; 
    font-weight: 600; 
}

.modules-head a { 
    color: var(--accent-light); 
    font-size: 0.82rem; 
    font-weight: 500; 
}

.modules-head a:hover { 
    color: var(--accent); 
}

.modules-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 14px; 
    margin-bottom: 36px; 
}

.module-card {
    background: var(--navy-800); 
    border: 1px solid rgba(52, 152, 219, 0.13);
    border-radius: var(--radius-lg); 
    padding: 22px 18px;
    display: flex; 
    align-items: flex-start; 
    gap: 14px;
    text-decoration: none; 
    color: inherit;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.module-card:hover { 
    transform: translateY(-3px); 
    border-color: rgba(52, 152, 219, 0.3); 
    box-shadow: var(--shadow-md); 
    color: inherit; 
}

.mod-icon { 
    width: 42px; 
    height: 42px; 
    border-radius: var(--radius-md); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-shrink: 0; 
}

.mod-icon svg { 
    width: 20px; 
    height: 20px; 
}

.mi-red { background: var(--red-pale); }
.mi-red svg { color: var(--red-light); }
.mi-blue { background: var(--accent-pale); }
.mi-blue svg { color: var(--accent-light); }
.mi-teal { background: var(--teal-pale); }
.mi-teal svg { color: var(--teal); }
.mi-orange { background: var(--orange-pale); }
.mi-orange svg { color: var(--orange); }
.mi-green { background: var(--green-pale); }
.mi-green svg { color: var(--green-light); }
.mi-yellow { background: var(--yellow-pale); }
.mi-yellow svg { color: var(--yellow); }

.mod-info h4 { 
    color: var(--white); 
    font-size: 0.9rem; 
    font-weight: 600; 
    margin-bottom: 3px; 
}

.mod-info p { 
    color: var(--text-muted); 
    font-size: 0.8rem; 
    line-height: 1.45; 
}

/* ─── Logout ────────────────────────────────────── */
.logout-row { 
    text-align: center; 
    margin-top: 12px; 
}

.btn-logout {
    display: inline-block; 
    padding: 9px 26px;
    border: 1px solid rgba(231, 76, 60, 0.35); 
    border-radius: var(--radius-md);
    color: var(--red-light); 
    font-size: 0.85rem; 
    font-weight: 600;
    transition: background var(--transition), border-color var(--transition);
}

.btn-logout:hover { 
    background: var(--red-pale); 
    border-color: var(--red); 
    color: var(--red-light); 
}

/* ─── Responsive ────────────────────────────────── */
@media (max-width: 700px) {
    .stat-row { 
        grid-template-columns: 1fr; 
    }
    
    .modules-grid { 
        grid-template-columns: 1fr; 
    }
    
    .dash-banner { 
        flex-direction: column; 
        text-align: center; 
        padding: 26px 22px; 
    }
    
    .dash-banner-icon { 
        display: none; 
    }
}