/**
 * Layout overrides — laadt als laatste (footer) zodat alle pagina's gelijk zijn
 */
:root {
    --content-pt: 16px;
    --content-pb: 32px;
    --content-px: 24px;
}

body.layout-app-sidebar .site-header .header-container,
.site-header .header-container {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

.layout-app-sidebar .app-shell-outer {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.main-content {
    padding-top: var(--content-pt) !important;
    padding-bottom: var(--content-pb) !important;
    text-align: left;
}

.main-content > .app-container,
.main-content > .container.app-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: var(--content-px) !important;
    padding-right: var(--content-px) !important;
    padding-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}

.main-content .app-container .credit-dashboard,
.main-content .app-container > .credit-dashboard,
.main-content .app-container .mijn-pakket-page,
.main-content .app-container > .mijn-pakket-page {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
}

/* Pagina-specifieke smalle wrappers neutraliseren */
.main-content .app-container > .container,
.main-content .app-container > .wrap,
.main-content .app-container > .generator-container,
.main-content .app-container > [class*="-container"]:not(.app-container),
.main-content .app-container .social-gen-page,
.main-content .app-container .social-gen-page .container,
.main-content .app-container .blog-generator,
.main-content .app-container .rapport,
.main-content .app-container .rapport-container,
.main-content .app-container .dashboard-container,
.main-content .app-container .competitor-container,
.main-content .app-container .status-container,
.main-content .app-container .werkzaamheden-container,
.main-content .app-container .home-container {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
}

/* Geen extra top-padding op eerste contentblok */
.main-content .app-container > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Dubbele .container (dashboard e.d.) */
.main-content .app-container > .container.container,
.main-content .app-container > .container > .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.layout-app-sidebar .app-content .main-content {
    padding-top: var(--content-pt) !important;
    padding-bottom: var(--content-pb) !important;
}

.layout-app-sidebar .app-content .app-container,
.layout-app-sidebar .app-content .container,
.layout-app-sidebar .app-content .generator-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: var(--content-px) !important;
    padding-right: var(--content-px) !important;
}

@media (max-width: 768px) {
    :root {
        --content-px: 16px;
        --content-pt: 12px;
    }
}