/* ==========================================================
   RESPONSIVIDADE GERAL
   ========================================================== */


/* ==========================================================
   TABLETS / TELAS MENORES
   ========================================================== */

@media (max-width: 840px) {

    /* ======================================================
       ESTRUTURA
       ====================================================== */

    .app-shell {
        display: block;

        width: 100%;

        min-height: 100vh;
    }


    /*
     * A sidebar continua sendo um drawer.
     *
     * NÃO usamos mais:
     *
     * display: none;
     * position: static;
     * .sidebar.is-open
     *
     * O estado agora é controlado por:
     *
     * body.sidebar-open
     */
    .sidebar {
        position: fixed;

        top: 0;
        left: 0;
        bottom: 0;

        width: min(
            300px,
            calc(100vw - 40px)
        );

        height: 100dvh;
        min-height: 100dvh;

        display: block;

        transform:
            translateX(-105%);

        visibility: hidden;

        opacity: 0;
    }


    /*
     * Sidebar aberta.
     */
    body.sidebar-open .sidebar {
        transform:
            translateX(0);

        visibility: visible;

        opacity: 1;
    }


    /* ======================================================
       BOTÃO DA SIDEBAR
       ====================================================== */

    .sidebar-toggle {
        margin-right: 12px;
    }


    /* ======================================================
       CONTEÚDO
       ====================================================== */

    .content {
        padding: 18px;
    }


    /* ======================================================
       CABEÇALHOS / FORMULÁRIOS
       ====================================================== */

    .page-header-actions,
    .form-actions {
        display: grid;
    }


    /* ======================================================
       GRIDS
       ====================================================== */

    .filter-bar,
    .form-grid,
    .permission-choice-grid ul,
    .members-filter,
    .finance-filter,
    .reports-filter,
    .suppliers-filter,
    .report-summary-grid,
    .report-columns {
        grid-template-columns: 1fr;
    }


    /* ======================================================
       BOTÕES
       ====================================================== */

    .filter-bar .button-primary {
        width: 100%;
    }


    /* ======================================================
       SPANS
       ====================================================== */

    .span-2 {
        grid-column: auto;
    }
}



/* ==========================================================
   CELULARES
   ========================================================== */

@media (max-width: 640px) {

    /* ======================================================
       SIDEBAR
       ====================================================== */

    .sidebar {
        position: fixed;

        top: 0;
        left: 0;
        bottom: 0;

        width: min(
            290px,
            calc(100vw - 38px)
        );

        height: 100dvh;
        min-height: 100dvh;

        padding: 18px 14px;

        /*
         * No celular o fundo fica um pouco
         * mais sólido para melhorar a leitura.
         */
        background:
            color-mix(
                in srgb,
                var(--primary-dark) 98%,
                transparent
            );

        /*
         * Sem blur para evitar o problema
         * de embaçamento em navegadores mobile.
         */
        backdrop-filter: none;

        -webkit-backdrop-filter: none;

        transform:
            translateX(-105%);

        visibility: hidden;

        opacity: 0;
    }


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

        visibility: visible;

        opacity: 1;
    }


    /* ======================================================
       OVERLAY
       ====================================================== */

    .sidebar-overlay {
        background:
            rgba(5, 12, 10, 0.42);

        backdrop-filter: none;

        -webkit-backdrop-filter: none;
    }


    /* ======================================================
       TOPBAR
       ====================================================== */

    .topbar {
        align-items: flex-start;

        flex-wrap: wrap;

        padding: 12px 16px;
    }


    .topbar-title {
        flex:
            1 1 calc(100% - 56px);

        padding-top: 8px;
    }


    /* ======================================================
       AÇÕES DA TOPBAR
       ====================================================== */

    .topbar-actions {
        width: 100%;

        order: 3;
    }


    /* ======================================================
       SELETOR DE TEMA
       ====================================================== */

    .theme-switcher {
        flex: 1 1 auto;

        width: 100%;
    }


    .theme-option {
        flex: 1 1 0;

        min-width: 0;
    }


    /* ======================================================
       LOGOUT
       ====================================================== */

    .logout-form {
        flex: 0 0 auto;
    }


    .logout-button {
        min-height: 40px;
    }


    /* ======================================================
       CONTEÚDO
       ====================================================== */

    .content {
        padding: 16px;
    }


    /* ======================================================
       CABEÇALHOS
       ====================================================== */

    .page-header-actions {
        gap: 12px;
    }


    .page-header h1 {
        font-size: 1.6rem;
    }


    /* ======================================================
       AÇÕES
       ====================================================== */

    .page-actions,
    .form-actions {
        width: 100%;
    }


    .page-actions a,
    .form-actions a,
    .form-actions button {
        width: 100%;
    }


    /* ======================================================
       LISTA DE DETALHES
       ====================================================== */

    .detail-list div {
        grid-template-columns: 1fr;

        gap: 4px;
    }


    /* ======================================================
       MODAIS
       ====================================================== */

    .modal {
        align-items: flex-end;

        padding: 12px;
    }


    .modal-panel {
        max-height:
            calc(100dvh - 24px);
    }
}



/* ==========================================================
   CELULARES PEQUENOS
   ========================================================== */

@media (max-width: 420px) {

    /* ======================================================
       SIDEBAR
       ====================================================== */

    .sidebar {
        width: min(
            280px,
            calc(100vw - 28px)
        );
    }


    /* ======================================================
       CONTEÚDO
       ====================================================== */

    .content {
        padding: 12px;
    }


    /* ======================================================
       FORMULÁRIOS / FILTROS
       ====================================================== */

    .filter-bar,
    .form-panel {
        padding: 14px;
    }


    /* ======================================================
       TABELAS
       ====================================================== */

    .data-table th,
    .data-table td {
        padding: 10px;
    }
}