/* ==========================================================================
   ALUMOTOS — SISTEMA MOBILE CENTRAL (mobile.css)
   ==========================================================================
   Carregado por include_styles.php em TODAS as páginas, DEPOIS de
   style.css + design_tokens.css e ANTES do style-{pagina}.css.

   Objetivo: estilo mobile PRÓPRIO, denso e consistente — substitui a
   duplicação de CSS mobile copiada em cada página e o padrão antigo
   (gradientes/hex/fontes grandes) herdado do web.

   REGRAS:
   - Só var(--token) do design_tokens.css. Nada de hex hardcoded.
   - Duas camadas:
       (A) CHROME UNIVERSAL  -> header (voltar/⋮) + bottom sheet.
           Afeta só elementos que existem onde são renderizados.
       (B) LISTAGEM EM CARDS -> escopado em body.mob-list (opt-in por página)
           para nunca afetar páginas que não são listagem.
   - Mantém as classes .mobile-card-actions / .show-menu para o
     assets/js/actions_menu_portal.js continuar funcionando.
   ========================================================================== */

/* ==========================================================================
   (A) CHROME UNIVERSAL
   ========================================================================== */

/* ---- Botão Voltar no header mobile ---- */
.mobile-header .mobile-back {
    background: none;
    border: none;
    color: var(--text);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 6px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .2s ease, transform .2s ease;
}
.mobile-header .mobile-back:hover { color: var(--brand); transform: translateX(-2px); }

/* ---- Botão "+" primário do header (SEMPRE à esquerda do ⋮) ----
   Vale para o .mobile-add-btn (header central) E para o legado
   .btn-sm-icon (~44 páginas inline) — unifica o "+" num único padrão:
   quadrado verde (--brand), 36x36, cantos --radius-btn, ícone branco.
   Sobrescreve o estilo antigo de style.css (esta folha carrega depois). */
.mobile-header .mobile-add-btn,
.mobile-header .btn-sm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: var(--radius-btn);
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
    transform: none;
    transition: background .2s ease;
}
.mobile-header .mobile-add-btn:hover,
.mobile-header .mobile-add-btn:active,
.mobile-header .btn-sm-icon:hover,
.mobile-header .btn-sm-icon:active { background: var(--brand-hover); color: #fff; transform: none; box-shadow: none; }
.mobile-header .mobile-add-btn i,
.mobile-header .btn-sm-icon i { margin: 0; }

/* ---- Toggle de ações da página (⋮) — quadrado secundário, alvo de toque ----
   !important porque MUITAS páginas trazem style="background:none;border:none;..."
   inline no #mobilePageActionsToggle; para o padrão valer em todas de uma vez
   (sem editar página a página) o quadrado precisa vencer o inline. */
.mobile-header #mobilePageActionsToggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px !important;
    height: 36px !important;
    background: var(--surface-2) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-btn) !important;
    color: var(--text);
    font-size: 1.05rem !important;
    line-height: 1;
    cursor: pointer;
    padding: 0 !important;
    flex-shrink: 0;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.mobile-header #mobilePageActionsToggle:hover,
.mobile-header #mobilePageActionsToggle:active {
    background: var(--surface-2-hover) !important;
    border-color: var(--line-soft) !important;
    color: var(--brand);
}

/* ---- Bottom Sheet (overlay + folha) ---- */
#mobileActionsSheetOverlay {
    display: none;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, .6);
    z-index: 13001;
    opacity: 0;
    transition: opacity .3s ease;
}
#mobileActionsSheet {
    position: fixed;
    bottom: -100%;
    left: 0;
    width: 100%;
    background: var(--panel);
    border-top-left-radius: var(--radius-modal);
    border-top-right-radius: var(--radius-modal);
    padding: 16px 14px calc(22px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 28px rgba(0, 0, 0, .55);
    z-index: 13002;
    transition: bottom .3s cubic-bezier(.16, 1, .3, 1);
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.sheet-drag-handle {
    width: 38px;
    height: 4px;
    background: var(--muted);
    border-radius: 2px;
    margin: 0 auto 12px;
    flex-shrink: 0;
}
.sheet-title {
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--muted-sub);
    margin: 0 4px 6px;
    font-weight: 600;
}
.sheet-action-btn {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 12px 14px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-btn);
    color: var(--text);
    font-size: var(--font-base);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    text-align: left;
    transition: background .2s ease, border-color .2s ease;
}
.sheet-action-btn:hover,
.sheet-action-btn:active { background: var(--surface-2-hover); border-color: var(--line-soft); }
.sheet-action-btn i { width: 18px; text-align: center; font-size: 15px; color: var(--brand-text); flex-shrink: 0; }
.sheet-action-btn.is-danger i { color: var(--error); }
.sheet-cancel-btn {
    width: 100%;
    margin-top: 4px;
    padding: 12px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-btn);
    color: var(--muted-sub);
    font-size: var(--font-base);
    font-weight: 500;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
}
.sheet-cancel-btn:hover { color: var(--text); border-color: var(--muted); }

/* Esconde o ⋮ da página no desktop (só faz sentido no header mobile fixo) */
@media (min-width: 769px) {
    .mobile-header #mobilePageActionsToggle,
    .mobile-header .mobile-add-btn { display: none !important; }
}

/* ==========================================================================
   (B) LISTAGEM EM CARDS  —  escopado em body.mob-list
   ========================================================================== */

/* ----------------------------------------------------------------------
   B.1 — Dropdown de ações (vale em TODA largura: desktop "⋮" + mobile)
   ---------------------------------------------------------------------- */
body.mob-list .actions-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
    overflow: visible !important;
}
body.mob-list .actions-cell.desktop-cell { justify-content: center; position: relative; overflow: visible !important; }
body.mob-list .desktop-actions-menu { position: relative; display: inline-flex; align-items: center; justify-content: center; }

/* Botão "⋮" (toggle) — desktop */
body.mob-list .actions-cell.desktop-cell .mobile-actions-toggle {
    display: inline-flex !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    border: 1px solid var(--line) !important;
    background: var(--surface-2) !important;
    color: var(--text) !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 13px !important;
    padding: 0 !important;
    transition: background .2s ease, border-color .2s ease !important;
}
body.mob-list .actions-cell.desktop-cell .mobile-actions-toggle:hover,
body.mob-list .actions-cell.desktop-cell .mobile-header-actions.open .mobile-actions-toggle {
    background: var(--surface-2-hover) !important;
    border-color: var(--muted) !important;
}

/* Menu (lista vertical) */
body.mob-list .mobile-card-actions {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    min-width: 210px;
    z-index: 1200;
    background: var(--panel) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .55) !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    flex-direction: column !important;
}
body.mob-list .mobile-header-actions.open .mobile-card-actions,
body.mob-list .mobile-card-actions.show-menu { display: flex !important; }
body.mob-list .mobile-card-actions .btn-action {
    width: 100% !important;
    min-width: unset !important;
    min-height: unset !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    border: none !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text) !important;
    padding: 10px 13px !important;
    font-size: var(--font-sm) !important;
    font-weight: 500 !important;
    text-align: left !important;
    text-decoration: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
body.mob-list .mobile-card-actions .btn-action:last-child,
body.mob-list .mobile-card-actions form:last-child .btn-action { border-bottom: none !important; }
body.mob-list .mobile-card-actions .btn-action i {
    width: 16px !important;
    text-align: center !important;
    margin-right: 0 !important;
    color: inherit !important;
    font-size: 13px !important;
    flex-shrink: 0;
}
body.mob-list .mobile-card-actions .btn-action span { display: inline !important; font-weight: 500 !important; flex: 1; }
body.mob-list .mobile-card-actions .btn-action:hover { background: var(--row-hover) !important; color: var(--text) !important; }
body.mob-list .mobile-card-actions form { display: contents !important; }
body.mob-list .mobile-card-actions .approval-actions { display: contents !important; }

/* Itens perigosos — vermelhos */
body.mob-list .mobile-card-actions .btn-action.btn-delete,
body.mob-list .mobile-card-actions .btn-action.btn-remove,
body.mob-list .mobile-card-actions .btn-action.btn-reject,
body.mob-list .mobile-card-actions .btn-action.btn-inactivate,
body.mob-list .mobile-card-actions .btn-action.btn-deactivate-locatario,
body.mob-list .mobile-card-actions .btn-action.btn-deactivate-franqueado { color: var(--error) !important; }

/* Contexto de empilhamento do menu aberto */
body.mob-list .mobile-header-actions { position: relative !important; }
body.mob-list .mobile-header-actions.open { z-index: 2147483600 !important; }
body.mob-list .data-table tbody tr:has(.mobile-header-actions.open),
body.mob-list .data-table tbody tr.actions-open { position: relative !important; z-index: 2147483500 !important; }

/* O wrapper do card fica escondido fora do modo card */
body.mob-list .data-table tbody .mobile-card-wrapper { display: none; }
body.mob-list .btn-action span { display: none; } /* desktop: só ícones na tabela */
/* ...mas dentro de um menu suspenso o rótulo é o que dá sentido ao item: sem ele
   o menu vira uma coluna de ícones sem texto (bug do menu de Ações em multas.php). */
body.mob-list .actions-menu .btn-action span,
body.mob-list .mobile-ac-menu .btn-action span { display: inline; }

/* ----------------------------------------------------------------------
   B.2 — MOBILE (≤768px): tabela vira lista de cards
   (No tablet/notebook >768px mantém-se a tabela desktop normal — o sistema
   de cards é exclusivo do mobile, para não alterar a experiência em laptops.)
   ---------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Esconde filtros desktop; mostra gatilho de filtro */
    body.mob-list .filters-container,
    body.mob-list .filter-bar,
    body.mob-list .dashboard-filters { display: none; }
    body.mob-list .mobile-filter-trigger { display: block; }
    body.mob-list .desktop-only-btn { display: none !important; }
    body.mob-list .actions-cell.desktop-cell .desktop-actions-menu { display: none !important; }

    /* Tabela -> lista de cards */
    body.mob-list .data-table { font-size: var(--font-sm); background: transparent !important; border: none !important; }
    body.mob-list .data-table thead { display: none !important; }
    body.mob-list .data-table tbody { display: block !important; }
    body.mob-list .data-table tbody tr {
        display: block !important;
        background: var(--panel) !important;
        border: 1px solid var(--line) !important;
        border-radius: var(--radius-card) !important;
        margin: 0 0 9px !important;
        padding: 0 !important;
        overflow: visible !important;
        position: relative !important;
        cursor: pointer;
        box-shadow: none !important;
    }
    /* Os filtros client-side (busca instantanea, abas de categoria) escondem a
       linha com row.style.display='none' INLINE. O `display:block !important`
       acima ganha do inline, entao no celular nenhuma linha era escondida: a
       lista mostrava tudo enquanto o contador dizia "Admins (3)".
       Esta regra devolve a vitoria para quem pediu para esconder. Vale para
       todas as telas mob-list de uma vez, que e onde o defeito estava. */
    body.mob-list .data-table tbody tr[style*="display: none"],
    body.mob-list .data-table tbody tr[style*="display:none"] { display: none !important; }

    body.mob-list .data-table tbody tr:hover { border-color: var(--brand) !important; }
    body.mob-list .data-table tbody tr.is-expanded { border-color: var(--brand) !important; }
    body.mob-list .data-table tbody tr.is-expanded::after {
        content: '';
        position: absolute;
        left: 0; top: 0;
        width: 3px; height: 100%;
        background: var(--brand);
        border-radius: var(--radius-card) 0 0 var(--radius-card);
    }
    /* Reset do padrão legado de "tabela empilhada" do style.css (.data-table td:
       padding-left:45%, text-align:right, max-height:500px, overflow:hidden) que
       jogava os valores à direita, herdava p/ o card e CORTAVA o conteúdo. */
    body.mob-list .data-table tbody td {
        display: block !important;
        padding: 0 !important;
        border: none !important;
        background: none !important;
        text-align: left !important;
        max-height: none !important;
        overflow: visible !important;
    }
    body.mob-list .data-table tbody td::before { content: none !important; } /* sem label-::before legado */
    /* No mobile só o card aparece — esconde QUALQUER célula que não seja o wrapper
       (cobre .desktop-cell, .cc/colunas compactas e qualquer célula extra). */
    body.mob-list .data-table tbody td:not(.mobile-card-wrapper) { display: none !important; }
    body.mob-list .data-table tbody .mobile-card-wrapper { display: block !important; width: 100%; }

    /* ---- Cabeçalho do card (clicar AQUI = expandir/recolher) ---- */
    body.mob-list .mobile-card-header {
        padding: 10px 12px;
        border-radius: var(--radius-card) var(--radius-card) 0 0;
        background: var(--surface-2) !important;
        border: none;
        border-bottom: 1px solid var(--line);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 7px;
        overflow: visible;
        cursor: pointer;
    }
    body.mob-list .data-table tbody tr:not(.is-expanded) .mobile-card-header { border-bottom-color: transparent; border-radius: var(--radius-card); }
    body.mob-list .mobile-info { flex: 1; min-width: 0; }
    body.mob-list .mobile-title {
        font-size: var(--font-base);
        font-weight: 700;
        color: var(--text);
        margin: 0 0 2px;
        line-height: 1.2;
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
    }
    body.mob-list .mobile-subtitle {
        font-size: var(--font-xs);
        color: var(--muted-sub);
        margin: 0;
        display: flex;
        align-items: center;
        gap: 5px;
        flex-wrap: wrap;
    }

    /* Sinal de que o card ABRE.
       O header sempre foi clicável, mas nada na tela dizia isso — e a queixa que
       chegou foi "não expande", quando na verdade não havia como adivinhar. Um
       chevron desenhado com borda (sem depender de fonte de ícone) resolve para
       TODAS as telas mob-list de uma vez, inclusive as que nem emitem o ícone
       legado. Ele gira ao abrir, que é o retorno de que a ação funcionou. */
    body.mob-list .data-table tbody tr .mobile-card-header::after {
        content: "";
        width: 7px; height: 7px;
        margin-left: 8px;
        flex-shrink: 0;
        border-right: 2px solid var(--muted-sub, #8A8A8A);
        border-bottom: 2px solid var(--muted-sub, #8A8A8A);
        transform: rotate(45deg) translate(-2px, -2px);
        transition: transform .25s ease, border-color .25s ease;
    }
    body.mob-list .data-table tbody tr.is-expanded .mobile-card-header::after {
        transform: rotate(-135deg) translate(-2px, -2px);
        border-right-color: var(--brand);
        border-bottom-color: var(--brand);
    }

    /* Esconde ícones de "expandir" legados: o chevron acima já cumpre o papel, e
       manter os dois deixaria duas setas no mesmo cabeçalho. */
    body.mob-list .mobile-expand-icon,
    body.mob-list .mobile-card-header .fa-chevron-down,
    body.mob-list .mobile-card-header .fa-chevron-up,
    body.mob-list .mobile-card-header .fa-angle-down,
    body.mob-list .mobile-card-header .fa-angle-up,
    body.mob-list .mobile-card-header .fa-caret-down,
    body.mob-list .mobile-card-header .fa-caret-up { display: none !important; }

    /* ---- Toggle de ações (⋮) — só aparece quando o card está expandido ---- */
    body.mob-list .mobile-header-actions { position: relative; display: flex; align-items: center; gap: 8px; }
    body.mob-list .mobile-actions-toggle {
        display: none !important;
        width: 32px; height: 32px;
        border-radius: 50%;
        border: 1px solid var(--line);
        background: var(--bg);
        color: var(--text);
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 14px;
        padding: 0;
    }
    body.mob-list .data-table tbody tr.is-expanded .mobile-actions-toggle {
        display: inline-flex !important;
        background: var(--brand);
        border-color: var(--brand);
        color: #000;
    }
    body.mob-list .mobile-actions-toggle.hidden { display: none !important; }

    /* ---- Conteúdo recolhível (expande SÓ via clique no header) ---- */
    body.mob-list .mobile-card-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
        background: var(--panel) !important;
    }
    body.mob-list .data-table tbody tr.is-expanded .mobile-card-content { max-height: 70vh; overflow-y: auto; }
    body.mob-list .mobile-card-details { padding: 12px; }

    /* Grade de detalhes (denso: 2 colunas) */
    body.mob-list .mobile-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    body.mob-list .mobile-detail-item {
        background: var(--bg);
        padding: 8px;
        border-radius: var(--radius-btn);
        border: 1px solid var(--line);
        min-width: 0;
    }
    body.mob-list .mobile-detail-item.full-width { grid-column: 1 / -1; }
    body.mob-list .mobile-detail-label {
        font-size: 10px;
        font-weight: 600;
        color: var(--muted-sub);
        text-transform: uppercase;
        letter-spacing: .5px;
        margin-bottom: 2px;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    body.mob-list .mobile-detail-label i { color: var(--brand-text); font-size: 10px; }
    body.mob-list .mobile-detail-value {
        font-size: var(--font-sm);
        color: var(--text);
        font-weight: 500;
        word-break: break-word;
    }

    /* Dropdown de ações ancorado ao card (antes do portal assumir) */
    body.mob-list .mobile-card-actions { right: 0; min-width: 210px; margin-top: 6px; }

    /* Garante overflow visível para o menu não ser cortado */
    body.mob-list .table-container,
    body.mob-list .table-responsive,
    body.mob-list .data-table,
    body.mob-list .data-table tbody,
    body.mob-list .data-table tbody tr,
    body.mob-list .mobile-card-wrapper,
    body.mob-list .mobile-card-header { overflow: visible !important; }
}