/* ATC Platform — CSS responsivo global.
   Aplica-se por cima do <style> embutido de cada pagina (que
   continua a definir a aparencia desktop). Aqui so ajustamos o
   comportamento para tablet e telemovel, sem tocar no desktop. */

/* ===== Base: nunca deixar a pagina inteira ter scroll horizontal ===== */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Qualquer tabela pode ter scroll horizontal PROPRIO, sem arrastar a
   pagina toda. Envolve automaticamente tabelas cujo pai nao seja ja
   um wrapper com overflow. */
.table-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ===== TABLET GRANDE (<=1024px) ===== */
@media (max-width: 1024px) {
    .form-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ===== TABLET (<=768px) ===== */
@media (max-width: 768px) {
    /* Sidebar deixa de ser fixa lateral: passa para o topo, largura
       total, altura automatica. */
    .sidebar {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        padding: 16px !important;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 10px;
    }
    .sidebar h1 {
        width: 100%;
        font-size: 20px !important;
        margin-bottom: 2px !important;
    }
    .sidebar .subtitle {
        width: 100%;
        margin-bottom: 8px !important;
    }
    .sidebar a {
        padding: 8px 12px !important;
        font-size: 14px;
    }

    /* Conteudo principal deixa de ter margem para a sidebar fixa */
    .main {
        margin-left: 0 !important;
        padding: 16px !important;
    }

    /* Cabecalhos empilham em vez de ficarem lado a lado */
    .header, .toolbar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px;
    }

    /* Grelhas de formulario (2 colunas) passam a 1 coluna */
    .form-grid {
        grid-template-columns: 1fr !important;
    }

    /* Cartoes do Dashboard: 1 por linha */
    .card {
        width: 100% !important;
    }

    /* Tabelas: cada uma ganha scroll horizontal proprio em vez de
       espremer o conteudo */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    /* Botoes e grupos de acoes: maior alvo de toque, empilhados
       quando nao cabem lado a lado */
    .button, button, .access-button, input[type="submit"] {
        min-height: 40px;
        padding: 10px 16px !important;
        font-size: 15px !important;
    }
    .actions, .filtros form, .tabs {
        flex-wrap: wrap !important;
    }
}

/* ===== TELEMOVEL (<=430px) ===== */
@media (max-width: 430px) {
    body {
        font-size: 15px;
    }
    .sidebar a {
        width: 100%;
        text-align: left;
    }
    .header h2, .content h2 {
        font-size: 20px !important;
    }
    .stat-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    /* Formularios de filtro/pesquisa: campos empilhados a 100% */
    .filtros .campo, .filtros form input, .filtros form select {
        width: 100% !important;
    }
    .filtros form {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    /* Acoes de tabela (Ver/Eliminar/Abrir/PDF): empilhadas por
       toque mais facil */
    td .actions, td a, td form {
        display: block;
        margin: 4px 0 !important;
    }
}

/* ============================================
   Componentes reutilizaveis: Arquivo Permanente
   (cartoes, separadores, menu "Mais") -- pensados
   para reuso noutras areas da plataforma.
   ============================================ */

.arquivo-header {
    background: white; padding: 24px 26px; border-radius: 12px; margin-bottom: 20px;
    display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 10px;
}
.arquivo-header h2 { font-size: 24px; margin: 0; }
.arquivo-header .subtitulo { font-size: 13px; color: #777; margin-top: 4px; }

.arquivo-resumo {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px;
}
.arquivo-resumo .stat {
    background: white; border-radius: 10px; padding: 14px 16px; text-align: center;
}
.arquivo-resumo .stat .valor { font-size: 22px; font-weight: bold; color: #171717; }
.arquivo-resumo .stat .label { font-size: 12px; color: #777; margin-top: 2px; }

.arquivo-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.arquivo-card {
    background: white; border-radius: 12px; padding: 20px 22px; display: flex; flex-direction: column; gap: 4px;
    border: 1px solid #eee;
}
.arquivo-card .campo-label { font-size: 11px; font-weight: bold; color: #999; text-transform: uppercase; margin-top: 8px; }
.arquivo-card .campo-label:first-child { margin-top: 0; }
.arquivo-card .campo-valor { font-size: 15px; color: #222; }
.arquivo-card .meta-linha { font-size: 12px; color: #777; margin-top: 10px; }
.arquivo-card .acoes-principais { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.arquivo-card .acao-primaria {
    background: #ff6600; color: white; text-decoration: none; padding: 10px 16px; border-radius: 6px;
    font-weight: bold; font-size: 13px; flex: 1; text-align: center; min-width: 120px;
}
.arquivo-card .acao-secundaria {
    background: #f5f5f5; color: #222; text-decoration: none; padding: 10px 14px; border-radius: 6px;
    font-weight: bold; font-size: 13px; text-align: center;
}
.arquivo-card .rodape-card { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.arquivo-card .link-editar { font-size: 13px; color: #2563eb; text-decoration: none; }

/* Menu "Mais" -- por clique/toque, funciona em desktop/tablet/telemovel, nao depende de hover */
.menu-mais-wrapper { position: relative; display: inline-block; }
.menu-mais-botao {
    background: none; border: 1px solid #ddd; border-radius: 6px; padding: 8px 12px; cursor: pointer;
    font-size: 16px; color: #555; line-height: 1;
}
.menu-mais-lista {
    display: none; position: absolute; right: 0; top: 100%; margin-top: 4px; background: white;
    border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,0.12); min-width: 160px; z-index: 20;
    overflow: hidden;
}
.menu-mais-lista.aberto { display: block; }
.menu-mais-lista a, .menu-mais-lista button {
    display: block; width: 100%; text-align: left; padding: 12px 16px; font-size: 14px; text-decoration: none;
    color: #222; background: none; border: none; cursor: pointer; border-bottom: 1px solid #f0f0f0;
}
.menu-mais-lista a:last-child, .menu-mais-lista button:last-child { border-bottom: none; }
.menu-mais-lista .item-perigo { color: #dc2626; }

/* Separadores (tabs) do processo tecnico da avaliacao arquivada */
.arquivo-tabs {
    display: flex; gap: 4px; background: white; border-radius: 10px; padding: 6px; margin-bottom: 20px;
    flex-wrap: wrap;
}
.arquivo-tab {
    padding: 10px 16px; border-radius: 8px; font-size: 14px; font-weight: bold; text-decoration: none;
    color: #555; cursor: pointer; border: none; background: none;
}
.arquivo-tab.ativo { background: #171717; color: white; }
.arquivo-tab.desativado { color: #ccc; cursor: not-allowed; }
.arquivo-tab-painel { display: none; }
.arquivo-tab-painel.ativo { display: block; }

/* Mobile: cartoes de avaliacao empilham botoes a largura total */
@media (max-width: 430px) {
    .arquivo-resumo { grid-template-columns: 1fr; }
    .arquivo-cards { grid-template-columns: 1fr; }
    .arquivo-card .acoes-principais { flex-direction: column; }
    .arquivo-card .acao-primaria, .arquivo-card .acao-secundaria { width: 100%; }
    .arquivo-tabs { overflow-x: auto; flex-wrap: nowrap; }
}