/* ==========================================================================
   FacilMEI Backoffice - camada responsiva compartilhada
   Incluída em todas as páginas antes de </head>, junto com responsive.js.

   Faixas:
     >= 1024px  desktop / tablet deitado: layout original, menu lateral fixo
     <  1024px  tablet em pé / celular: menu vira gaveta (hambúrguer)
     <  640px   celular: espaçamentos menores, grades em 1 coluna

   Obs.: o Tailwind via CDN injeta o CSS dele DEPOIS deste arquivo, por isso
   os ajustes de utilitários do Tailwind usam !important.
   ========================================================================== */

:root {
    --rsp-bar-h: 56px;
    --rsp-bar-bg: #111827;
    --rsp-drawer-w: min(18rem, 85vw);
}

/* Elementos criados pelo responsive.js: escondidos no desktop */
.rsp-topbar,
.rsp-overlay,
.rsp-close { display: none; }

/* Tabelas largas: rolagem horizontal dentro do card em vez de estourar a tela */
.rsp-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

canvas, img, video { max-width: 100%; }

/* ==========================================================================
   TABLET EM PÉ E CELULAR (< 1024px)
   ========================================================================== */
@media (max-width: 1023.98px) {

    /* ---------- Estrutura: barra superior + conteúdo empilhados ---------- */
    body:has(> aside) {
        display: flex !important;
        flex-direction: column !important;
    }
    body.h-screen:has(> aside) {
        height: 100vh;
        height: 100dvh !important;   /* desconta a barra de endereço do celular */
    }
    /* páginas com min-h-screen + overflow-hidden travariam a rolagem no celular */
    body.min-h-screen.overflow-hidden:has(> aside) { overflow: visible !important; }

    body:has(> aside) > main {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0;
    }

    /* ---------- Barra superior com botão de menu ---------- */
    .rsp-topbar {
        display: flex;
        align-items: center;
        gap: .75rem;
        position: sticky;
        top: 0;
        z-index: 900;
        flex: 0 0 auto;
        height: calc(var(--rsp-bar-h) + env(safe-area-inset-top, 0px));
        padding: env(safe-area-inset-top, 0px) 1rem 0 max(.5rem, env(safe-area-inset-left, 0px));
        background: var(--rsp-bar-bg);
        color: #fff;
        box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 4px 12px rgba(15,23,42,.18);
    }
    .rsp-burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: #e2e8f0;
        cursor: pointer;
        flex: 0 0 auto;
    }
    .rsp-burger:hover, .rsp-burger:focus-visible { background: rgba(255,255,255,.08); }
    .rsp-burger:focus-visible, .rsp-close:focus-visible { outline: 2px solid #818cf8; outline-offset: 2px; }
    .rsp-brand {
        display: flex;
        align-items: center;
        gap: .6rem;
        min-width: 0;
        font-family: inherit;
    }
    .rsp-brand-mark {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 9px;
        background: #4f46e5;
        color: #fff;
        font-weight: 800;
        font-size: 15px;
        flex: 0 0 auto;
    }
    .rsp-title {
        font-size: 15px;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #f8fafc;
    }

    /* ---------- Menu lateral vira gaveta ---------- */
    body > aside {
        position: fixed !important;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1000;
        width: var(--rsp-drawer-w) !important;
        max-width: none !important;
        height: 100% !important;
        margin: 0 !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        transform: translateX(-105%);
        visibility: hidden;
        transition: transform .25s ease, visibility 0s linear .25s;
        box-shadow: none;
    }
    html.rsp-nav-open body > aside {
        transform: none;
        visibility: visible;
        transition: transform .25s ease, visibility 0s;
        box-shadow: 8px 0 32px rgba(2,6,23,.45);
    }
    /* o <nav> interno às vezes tem overflow próprio; deixa a gaveta rolar inteira */
    body > aside nav { overflow: visible !important; flex: 0 0 auto !important; }

    /* Alvos de toque de pelo menos 44px no menu */
    body > aside nav a,
    body > aside nav button,
    body > aside > a,
    body > aside .mt-auto a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    body > aside .submenu a { font-size: 14px !important; }

    .rsp-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: calc(.75rem + env(safe-area-inset-top, 0px));
        right: .75rem;
        width: 40px;
        height: 40px;
        border: 0;
        border-radius: 10px;
        background: rgba(255,255,255,.06);
        color: #cbd5e1;
        cursor: pointer;
        z-index: 1;
    }

    .rsp-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 999;
        background: rgba(15,23,42,.55);
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
    }
    html.rsp-nav-open .rsp-overlay { opacity: 1; pointer-events: auto; }
    html.rsp-nav-open, html.rsp-nav-open body { overflow: hidden !important; }

    /* ---------- Conteúdo ---------- */
    body > main.p-10, body > main.p-12 { padding: 1.5rem !important; }
    main .p-10, main .p-12 { padding: 1.75rem !important; }
    main .px-10, main .px-12 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }

    /* Linhas de cabeçalho (título + botões) quebram em vez de espremer */
    main .flex.justify-between { flex-wrap: wrap; row-gap: .75rem; }

    /* Cabeçalhos de altura fixa (h-16) crescem quando o conteúdo quebra linha */
    main header.h-16 {
        height: auto !important;
        min-height: 4rem;
        padding-top: .75rem !important;
        padding-bottom: .75rem !important;
    }
    main header .flex { flex-wrap: wrap; }

    /* Botão "Imprimir" posicionado em absoluto sobre o título: volta ao fluxo */
    main > button.absolute {
        position: static !important;
        align-self: flex-end;
        margin-bottom: 1rem;
    }

    /* Grades de 4+ colunas sem prefixo responsivo: 2 colunas no tablet */
    main .grid-cols-4, main .grid-cols-5, main .grid-cols-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Listas com altura fixa: acompanham a altura da tela */
    main .max-h-\[600px\], main .max-h-\[500px\] { max-height: 60vh !important; }

    /* Elementos decorativos que vazam (ex.: bolhas do login) não alargam a tela */
    html { overflow-x: clip; }
}

/* ==========================================================================
   CELULAR (< 640px)
   ========================================================================== */
@media (max-width: 639.98px) {

    /* Espaçamentos */
    body > main.p-8, body > main.p-10, body > main.p-12 { padding: 1rem !important; }
    main .p-8, main .p-10, main .p-12 { padding: 1.25rem !important; }
    main .px-8, main .px-10, main .px-12 { padding-left: 1rem !important; padding-right: 1rem !important; }
    main .gap-8 { gap: 1rem !important; }
    main .gap-6 { gap: .875rem !important; }
    main .mb-10 { margin-bottom: 1.5rem !important; }
    main .mb-8 { margin-bottom: 1.25rem !important; }

    /* Tipografia */
    main .text-5xl { font-size: 2rem !important; line-height: 1.15 !important; }
    main .text-4xl { font-size: 1.75rem !important; line-height: 1.2 !important; }
    main .text-3xl { font-size: 1.5rem !important; line-height: 1.25 !important; }
    main h1.text-2xl { font-size: 1.35rem !important; }

    /* Grades sem prefixo responsivo: 1 coluna */
    main .grid-cols-2, main .grid-cols-3, main .grid-cols-4,
    main .grid-cols-5, main .grid-cols-6, main .grid-cols-12 {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    main [class*="col-span-"]:not([class*=":col-span-"]) { grid-column: auto !important; }
    /* Exceção: quem precisar manter colunas no celular usa class="rsp-keep" */
    main .rsp-keep.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

    /* Larguras fixas de campos/caixas viram 100% */
    main .w-48, main .w-56, main .w-64, main .w-72, main .w-80, main .w-96,
    main [class*="min-w-["] {
        width: 100% !important;
        min-width: 0 !important;
    }
    main form.flex:not(.flex-col),
    main form .flex:not(.flex-col) { flex-wrap: wrap; }
    main form.flex:not(.flex-col) > .relative { flex: 1 1 100%; }

    /* Campos com 16px: evita o zoom automático do iPhone ao focar */
    main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    main select,
    main textarea {
        font-size: 16px !important;
    }

    /* Login: cartão com respiro menor e campos sem zoom no iPhone */
    body:not(:has(> aside)) .p-10 { padding: 1.75rem !important; }
    body:not(:has(> aside)) input:not([type="checkbox"]):not([type="radio"]) { font-size: 16px !important; }

    /* Cabeçalhos de tabela não quebram palavra por palavra */
    main th { white-space: nowrap; }

    /* Bloco de texto ao lado de um botão: em vez de virar uma palavra por linha,
       o botão desce para a linha de baixo */
    main .flex.justify-between:not(header) > div:not([class*="w-"]):not(.rsp-table-wrap) {
        min-width: min(10rem, 100%);
    }

    /* Botões de ação lado a lado ocupam a largura disponível */
    main .flex.justify-between > button,
    main .flex.justify-between > a.inline-flex { flex: 0 0 auto; }
}

/* ==========================================================================
   IMPRESSÃO: nada da camada mobile aparece no papel
   ========================================================================== */
@media print {
    .rsp-topbar, .rsp-overlay, .rsp-close { display: none !important; }
    .rsp-table-wrap { overflow: visible !important; }
}

/* Usuários com "reduzir movimento" ativado */
@media (prefers-reduced-motion: reduce) {
    body > aside, .rsp-overlay { transition: none !important; }
}