/* css/background.css – DEFINITIEVE VERSIE (2025 look) */
/* Werkt op ALLE pagina’s van Happy Producties */

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background: url('../images/achtergrond.jpg') center center fixed !important;
    background-size: cover !important;
    min-height: 100vh;
    position: relative;
    font-family: Arial, sans-serif;
}

/* Donkere overlay over de hele achtergrond */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.30);
    z-index: -1;
    pointer-events: none;
}

/* 1. Alle belangrijke cards/login/etc. → mooi mat-doorzichtig (niet meer te wit) */
.container,
.login-form,
.admin-section,
.welcome,
.webmaster-tools,
.rubrieken,
.programmas,
.member-access,
.member-login-prompt,
.user-card,
.counter-card,
.news-item,
.log-section,
.activity-list,
.user-access-form,
.admin-card,
.rubriek-card,
.stat-card-large,
.webmaster-card,
.demo-users,
.access-info,
.checkbox-group {
    background: rgba(255, 255, 255, 0.65) !important;   /* ← perfecte transparantie
    backdrop-filter: blur(16px) !important;           /* luxe glass-effect */
    border-radius: 15px !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.22) !important;
    ;
}

/* 2. Alle GRIJZE vlakken 100% transparant maken (geen grijze rommel meer) */
.welcome,
.activity-list,
.activity-list .activity-item,
.admin-section,
.access-info,
.checkbox-group,
.member-access,
.member-login-prompt,
.demo-users,
.counter-item,
.no-access,
.recent-activity,
.counters-section,
.news-section,
.products-section,
.contact-section,
.member-section,
.log-section > div:not(.log-item),
.rubriek-grid {
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* 3. Witte tekst op webmaster-dashboard weer donker en leesbaar */
.stat-card-large,
.webmaster-card,
.webmaster-tools,
.webmaster-tools h3,
.webmaster-tools h4,
.webmaster-tools p,
.webmaster-tools a {
    color: #2D3047 !important;
}

/* 4. Header & footer donker + glass-effect */
header .navbar,
footer {
    background: rgba(45, 48, 71, 0.95) !important;
    backdrop-filter: blur(12px) !important;
}
header .navbar a,
footer a {
    color: white !important;
}
header .navbar a:hover {
    color: #e74c3c !important;
}