/* =========================================================
   PASCOM+ — RESPONSIVIDADE
   ========================================================= */


/* =========================================================
   DESKTOP MENOR
   ========================================================= */

@media (max-width: 1240px) {

    .dashboard-stats {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .quick-actions {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .page-content {
        padding:
            26px;
    }


    .member-filter-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


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

@media (max-width: 900px) {

    :root {
        --header-height:
            66px;
    }


    .sidebar {
        width:
            min(
                300px,
                88vw
            );

        transform:
            translateX(-105%);

        box-shadow:
            var(--shadow-lg);

        transition:
            transform
            220ms ease;
    }


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


    .sidebar-close {
        display:
            block;
    }


    .sidebar-overlay {
        position:
            fixed;

        inset:
            0;

        z-index:
            280;

        display:
            block;

        visibility:
            hidden;

        background:
            rgba(
                35,
                23,
                27,
                0.42
            );

        opacity:
            0;

        transition:
            opacity
            190ms ease,
            visibility
            190ms ease;
    }


    body.sidebar-open
    .sidebar-overlay {
        visibility:
            visible;

        opacity:
            1;
    }


    .app-main {
        width:
            100%;

        margin-left:
            0;
    }


    .header-menu-button {
        display:
            block;
    }


    .app-header {
        padding:
            0 20px;
    }


    .page-content {
        padding:
            24px;
    }

}


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

@media (max-width: 780px) {

    .dashboard-grid,
    .module-grid.three,
    .module-grid.two,
    .module-grid.four,
    .member-form-grid,
    .detail-grid,
    .split-layout,
    .hierarchy-grid,
    .admin-links,
    .dashboard-metrics,
    .admin-summary,
    .admin-stats,
    .admin-metrics,
    .security-summary,
    .session-details {
        grid-template-columns:
            1fr;
    }


    .security-summary-item {
        border-right:
            0;

        border-bottom:
            1px solid
            var(--border);
    }


    .security-summary-item:last-child {
        border-bottom:
            0;
    }


    .page-heading {
        flex-direction:
            column;

        align-items:
            stretch;
    }


    .role-grid,
    .detail-role-list {
        grid-template-columns:
            1fr;
    }


    .member-filter-grid {
        grid-template-columns:
            1fr;
    }

}


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

@media (max-width: 640px) {

    .app-header {
        padding:
            0 14px;
    }


    .header-page-title h1 {
        font-size:
            14px;
    }


    .header-eyebrow {
        font-size:
            7px;
    }


    .header-user-info {
        display:
            none;
    }


    .header-user-button {
        gap:
            5px;

        padding:
            5px;
    }


    .user-dropdown {
        position:
            fixed;

        top:
            72px;

        right:
            12px;

        left:
            12px;

        width:
            auto;
    }


    .page-content {
        padding:
            18px 14px 34px;
    }


    .page-heading {
        margin-bottom:
            18px;
    }


    .page-heading h1 {
        font-size:
            23px;
    }


    .page-heading p {
        font-size:
            10px;
    }


    .module-filter,
    .module-form,
    .member-filter-card,
    .member-form-card,
    .detail-card {
        padding:
            15px;
    }


    .module-card,
    .notice-card,
    .session-card,
    .assignment-row {
        align-items:
            stretch;

        flex-direction:
            column;
    }


    .form-actions,
    .page-footer-actions,
    .member-detail-actions {
        align-items:
            stretch;

        flex-direction:
            column-reverse;
    }


    .form-actions .btn,
    .page-footer-actions .btn,
    .member-detail-actions .btn {
        width:
            100%;
    }


    .filter-actions {
        align-items:
            stretch;
    }


    .filter-actions .btn {
        flex:
            1;
    }


    .calendar-row {
        grid-template-columns:
            54px
            minmax(0, 1fr);

        gap:
            10px;

        min-height:
            62px;
    }


    .calendar-row time {
        width:
            48px;

        min-height:
            36px;
    }


    .member-table {
        min-width:
            760px;
    }


    .admin-links {
        gap:
            9px;
    }

}


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

@media (max-width: 420px) {

    .sidebar {
        width:
            min(
                286px,
                92vw
            );
    }


    .page-heading h1 {
        font-size:
            21px;
    }


    .btn {
        min-height:
            42px;
    }


    .filter-actions {
        flex-direction:
            column;
    }


    .filter-actions .btn {
        width:
            100%;
    }

}


/* =========================================================
   ACESSIBILIDADE
   ========================================================= */

@media (
    prefers-reduced-motion:
    reduce
) {

    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }

}