.domain-manager-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
    gap: 32px;
    align-items: start;
    width: 100%;
    max-width: 1680px;
    margin-inline: auto;
    padding-inline: clamp(24px, 3vw, 56px);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.domain-manager-layout,
.domain-manager-layout * {
    box-sizing: border-box;
}

/* Once the Domain Manager takes over the page layout, use the wider desktop
   container that the overview was designed for. Smaller viewports are unaffected. */
#container.domain-manager-layout-container {
    max-width: 1480px !important;
}

/* The layout script may move complete Contao article/module wrappers into this grid.
   Normalize only those marked hosts so pre-existing page-layout widths/floats do not
   keep controlling the Domain Manager layout. */
.domain-manager-layout > .domain-manager-layout-filter,
.domain-manager-layout > .domain-manager-layout-overview {
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
}

/* Contao themes can also constrain an inner article/module wrapper. Keep the reset
   scoped to the two Domain Manager hosts and their direct layout shells. */
.domain-manager-layout-filter > .inside,
.domain-manager-layout-overview > .inside,
.domain-manager-layout-filter > .mod_article,
.domain-manager-layout-overview > .mod_article,
.domain-manager-layout-filter > .mod_article > .inside,
.domain-manager-layout-overview > .mod_article > .inside,
.domain-manager-layout-filter .content-domain-manager-filter,
.domain-manager-layout-overview .content-domain-manager-overview {
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
}

.domain-manager-layout-overview {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

.domain-manager-layout-filter {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

.domain-manager-layout .domain-manager-overview,
.domain-manager-layout .domain-manager-filter {
    font-family: inherit;
}

.domain-manager-layout .domain-manager-filter {
    width: 100%;
    max-width: none;
}

body.domainverwaltung-page .domain-manager-layout {
    max-width: none;
    padding-inline: 0;
}

/* Narrow layouts and touch-first devices get the full-width overview.
   The !important on the grid tracks is intentional: some host themes apply their
   own grid-template-columns to generic layout wrappers at tablet widths. */
@media (max-width: 1180px), (hover: none) and (pointer: coarse) {
    #container.domain-manager-layout-container {
        padding-right: 0 !important;
    }

    .domain-manager-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 18px;
        padding-inline: clamp(18px, 4vw, 36px);
    }

    body.domainverwaltung-page .domain-manager-layout {
        padding-inline: 0;
    }

    .domain-manager-layout-filter {
        grid-column: 1;
        grid-row: 1;
    }

    .domain-manager-layout-overview {
        grid-column: 1;
        grid-row: 2;
    }

    /* Compact tablet filter: title/reset, then search/current/status, then four
       technical filter groups across the available width. */
    .domain-manager-layout .domain-manager-filter {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-areas:
            "title title title reset"
            "search search current status"
            "services contao php environment";
        gap: 14px 24px;
        align-items: start;
        width: 100%;
        max-width: none;
        padding: 16px 18px;
    }

    .domain-manager-layout .domain-manager-filter .dm-filter-title {
        grid-area: title;
        margin: 0;
        align-self: center;
    }

    .domain-manager-layout .domain-manager-filter .dm-filter-search-section {
        grid-area: search;
    }

    .domain-manager-layout .domain-manager-filter .dm-filter-current {
        grid-area: current;
        padding-top: 26px !important;
    }

    .domain-manager-layout .domain-manager-filter .dm-filter-status {
        grid-area: status;
    }

    .domain-manager-layout .domain-manager-filter .dm-filter-services {
        grid-area: services;
    }

    .domain-manager-layout .domain-manager-filter .dm-filter-contao {
        grid-area: contao;
    }

    .domain-manager-layout .domain-manager-filter .dm-filter-php {
        grid-area: php;
    }

    .domain-manager-layout .domain-manager-filter .dm-filter-environment {
        grid-area: environment;
    }

    .domain-manager-layout .domain-manager-filter .dm-filter-section {
        min-width: 0;
        padding: 0;
        border-bottom: 0;
    }

    .domain-manager-layout .domain-manager-filter .dm-filter-section + .dm-filter-section {
        padding-top: 0;
    }

    .domain-manager-layout .domain-manager-filter .dm-filter-heading,
    .domain-manager-layout .domain-manager-filter .dm-filter-label {
        margin-bottom: 7px;
    }

    .domain-manager-layout .domain-manager-filter .dm-filter-check {
        margin-bottom: 6px;
    }

    .domain-manager-layout .domain-manager-filter .dm-filter-status .dm-filter-check {
        display: inline-flex;
        margin-right: 12px;
        margin-bottom: 0;
    }

    .domain-manager-layout .domain-manager-filter .dm-filter-search {
        min-height: 38px;
    }

    .domain-manager-layout .domain-manager-filter .dm-filter-reset {
        grid-area: reset;
        width: auto;
        margin: 0;
        padding: 8px 12px;
        justify-self: end;
        align-self: start;
        white-space: nowrap;
    }

    .domain-manager-layout .domain-manager-filter .dm-filter-empty {
        grid-column: 1 / -1;
        margin-top: 0;
    }
}

@media (max-width: 980px) {
    .domain-manager-layout .domain-manager-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "title reset"
            "search search"
            "current status"
            "services contao"
            "php environment";
        gap: 14px 20px;
    }

    .domain-manager-layout .domain-manager-filter .dm-filter-current {
        padding-top: 0 !important;
    }
}

@media (max-width: 680px) {
    .domain-manager-layout {
        padding-inline: 16px;
    }

    body.domainverwaltung-page .domain-manager-layout {
        padding-inline: 0;
    }

    .domain-manager-layout .domain-manager-filter {
        display: block;
        padding: 18px;
    }

    .domain-manager-layout .domain-manager-filter .dm-filter-title {
        margin-bottom: 22px;
    }

    .domain-manager-layout .domain-manager-filter .dm-filter-section {
        padding: 0 0 18px;
        border-bottom: 1px solid var(--dm-border-light);
    }

    .domain-manager-layout .domain-manager-filter .dm-filter-section + .dm-filter-section {
        padding-top: 18px;
    }

    .domain-manager-layout .domain-manager-filter .dm-filter-current {
        padding-top: 18px !important;
    }

    .domain-manager-layout .domain-manager-filter .dm-filter-status .dm-filter-check {
        display: flex;
        margin-right: 0;
        margin-bottom: 9px;
    }

    .domain-manager-layout .domain-manager-filter .dm-filter-reset {
        width: 100%;
        margin-top: 18px;
    }

    .domain-manager-layout .domain-manager-filter .dm-filter-empty {
        margin-top: 14px;
    }
}

/* Updates use the same centered workspace shell and inner spacing as the domain overview. */
body.domainverwaltung-page .domain-manager-layout.domain-manager-layout-updates {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: clamp(24px, 3vw, 56px) !important;
    box-sizing: border-box;
}

.domain-manager-layout-updates > .domain-manager-layout-updates-host {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

.domain-manager-layout-updates-host > .inside,
.domain-manager-layout-updates-host .content-domain-manager-updates {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-inline: 0 !important;
    box-sizing: border-box;
}

@media (max-width: 1180px) {
    body.domainverwaltung-page .domain-manager-layout.domain-manager-layout-updates {
        padding-inline: clamp(18px, 4vw, 36px) !important;
    }
}

@media (max-width: 680px) {
    body.domainverwaltung-page .domain-manager-layout.domain-manager-layout-updates {
        padding-inline: 16px !important;
    }
}