/* ── Responsive ── */

@media (max-width: 1280px) {
    .charts-row {
        grid-template-columns: 1fr;
    }

    .services__grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 1024px) {
    .burger-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 50;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .services__grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .reporting-card-footer {
        opacity: 1;
        left: auto;
        right: 0;
    }
}

@media (max-width: 768px) {
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .charts-row,
    .charts-row.three-columns {
        grid-template-columns: 1fr;
    }

    .topbar-title {
        font-size: 1.2rem;
        line-height: 2;
    }

    .topbar {
        padding: 10px 14px;
    }

    .services__grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .reporting-card-footer {
        opacity: 1;
        left: auto;
        right: 0;
    }
}

@media (max-width: 480px) {
    .topbar {
        padding: 8px;
        box-shadow: none;
    }
    .topbar #logout {
        padding: 6px 8px;
    }
    .topbar > div {
        display: flex;
        flex-direction: row;
        align-self: flex-start;
        align-items: flex-end;
    }
    .topbar button,
    .topbar .btn-primary {
        font-size: 9pt;
        padding: 4px 8px;
        text-wrap: balance;
    }
    .topbar .topbar-icons {
        gap: 1rem;
    }

    .filter-bar {
        gap: 0.5rem;
    }
    .filter-bar .filter-btn {
        font-size: 12px;
    }

    .grid-layout,
    .grid-layout.col-3,
    .grid-layout.col-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .form-grid {
        grid-template-columns: 1fr;
    }

    .kpi-grid {
        grid-template-columns: 1fr 1fr;
    }

    .dash {
        height: auto;
        overflow: auto;
    }
    .content {
        padding: 12px;
    }
    .content:has(#view-iframe:not([style*="display: block"])) {
        padding: 1rem 1rem 8rem 1rem;
    }

    .hide {
        display: none !important;
    }

    .mobile-full {
        width: 100%;
        padding: 8px 5px;
        margin-right: 0;
        margin-bottom: 0.5rem;
    }

    .form-group input,
    .form-group select {
        max-width: 100%;
    }

    .reporting-card-footer {
        opacity: 1;
        left: auto;
        right: 0;
    }

    .reporting-toolbar {
        display: block;
    }

    .reporting-toolbar .btn-primary {
        margin-bottom: 1rem;
    }

    .reporting-toolbar .filter-count {
        margin-top: 1rem;
    }

    .filter-count {
        font-size: 8pt;
        padding: 0.4rem 0.6rem;
    }
    .filter-date-input {
        max-width: 100rem;
    }

    .filter-reset-btn {
        margin-top: 1rem;
        margin-left: auto;
    }

    button,
    a.btn-primary {
        font-size: 9pt;
        padding: 0.6rem 0.8rem;
    }
    .bs-buttons {
        display: grid;
    }

    table th {
        width: auto !important;
    }
    tr td:first-child {
        /*white-space: normal;*/
    }
    td {
        padding: 10px 6px;
    }
    ul {
        display: inline-flex;
    }

    .service-card__icon {
        padding: 0.75rem 0;
    }
    .service-card__icon .service-card__title {
        font-size: 12pt;
    }
    .service-card__text {
        padding: 1rem;
    }

    #updates-list div.update-desc {
        max-width: 38ch;
    }

    .btn-primary.icon.show-all,
    .btn-secondary.icon.show-all {
        padding: 4px 8px;
    }
    .btn-primary.icon.show-all span.material-icons,
    .btn-secondary.icon.show-all span.material-icons {
        font-size: 14pt;
    }

    #bs-grid {
        display: flex;
        flex-direction: column;
    }

    footer {
        position: relative;
        padding: 0.75rem 3rem 0.75rem 1rem;
    }
    footer a {
        font-size: 10pt !important;
        text-decoration: none;
    }
    footer .mehrwert {
        position: relative;
        margin-bottom: 0;
        padding: 0;
        display: inline;
    }
    footer ul li:not(:last-child)::after {
        content: "";
        border-inline-start-width: 1px;
        border-inline-start-style: solid;
        margin-inline: calc(0.5rem);
    }
}