/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1200px) {

    .metrics-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }

    .dashboard-grid {

        grid-template-columns:
            1fr;
    }

    .right-column {

        grid-template-columns:
            repeat(2, 1fr);

        grid-template-rows: auto;
    }

    .bottom-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }

    .bottom-grid > :first-child {

        grid-column:
            1 / -1;
    }

}


/* =========================================================
   SMALL DESKTOP / TABLET
========================================================= */

@media (max-width: 900px) {

    .sidebar {

        transform:
            translateX(-100%);

        transition:
            transform
            var(--transition);
    }

    .sidebar.open {

        transform:
            translateX(0);
    }

    .sidebar-overlay.active {

        display: block;
    }

    .main {

        margin-left: 0;
    }

    .menu-button {

        display: grid;

        place-items: center;
    }

    .search-box {

        width: 210px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .content {

        padding: 15px;
    }

    .topbar {

        height: 70px;

        padding:
            0
            15px;
    }

    .topbar h2 {

        font-size: 18px;
    }

    .topbar p {

        display: none;
    }

    .search-box {

        display: none;
    }

    .profile-text,
    .profile > i {

        display: none;
    }

    .metrics-grid {

        grid-template-columns:
            1fr;
    }

    .metric-card {

        min-height: 120px;
    }

    .right-column {

        grid-template-columns:
            1fr;
    }

    .bottom-grid {

        grid-template-columns:
            1fr;
    }

    .bottom-grid > :first-child {

        grid-column: auto;
    }


    /* SERVICES */

    .service-heading {

        display: none;
    }

    .service-row {

        grid-template-columns:
            minmax(0, 1fr)
            auto;

        min-height: 70px;

        padding:
            7px
            0;
    }

    .service-row .status {

        justify-self: end;
    }

    .service-row .port {

        grid-column: 1;

        padding-left: 46px;
    }

    .service-row .actions {

        grid-column: 2;

        grid-row: 2;

        justify-self: end;
    }

    .resource-circles {

        flex-wrap: wrap;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .topbar-right {

        gap: 5px;
    }

    .profile {

        padding-left: 0;
    }

    .avatar {

        width: 34px;
        height: 34px;
    }

    .metric-card {

        padding: 16px;
    }

    .quick-actions {

        grid-template-columns:
            repeat(2, 1fr);
    }

    .info-row {

        align-items:
            flex-start;

        flex-direction:
            column;

        justify-content:
            center;

        gap: 6px;

        padding:
            10px
            0;
    }

    .info-row strong {

        text-align: left;
    }

}