/* ===================================
   CONTENT RUIMTE BOVEN EN LINKS
   Voor alle pagina's
   =================================== */

/* Main content containers - ruimte boven en links */
main,
.main-content,
.container {
    padding-top: 20px !important;
    padding-left: 20px !important;
}

/* Specifiek voor body > container (eerste container na header) */
body > main,
body > .container,
body > .main-content {
    margin-top: 10px !important;
}

/* Dashboard en module pagina's */
.dashboard-container,
.module-container,
.page-content {
    padding-top: 20px !important;
    padding-left: 20px !important;
}

/* Hero secties */
.hero {
    padding-top: 20px !important;
    padding-left: 20px !important;
}

/* Cards en content boxes */
.card,
.content-box,
.section {
    margin-left: 10px !important;
}

/* Mobiel - iets minder ruimte */
@media (max-width: 768px) {
    main,
    .main-content,
    .container {
        padding-top: 15px !important;
        padding-left: 15px !important;
    }
    
    .dashboard-container,
    .module-container,
    .page-content {
        padding-top: 15px !important;
        padding-left: 15px !important;
    }
    
    .hero {
        padding-top: 15px !important;
        padding-left: 15px !important;
    }
}

/* Extra kleine schermen */
@media (max-width: 576px) {
    main,
    .main-content,
    .container {
        padding-top: 10px !important;
        padding-left: 10px !important;
    }
    
    .dashboard-container,
    .module-container,
    .page-content {
        padding-top: 10px !important;
        padding-left: 10px !important;
    }
    
    .hero {
        padding-top: 10px !important;
        padding-left: 10px !important;
    }
}