/* ================================================================
   GestorPRO Angola — Camada Responsiva
   Carregada DEPOIS do styles.css. Só acrescenta comportamento em
   ecrãs pequenos; não altera o aspecto em computador.
   ================================================================ */

/* ══════════════════════════════════════════════════════════════
   A REGRA QUE RESOLVE O ALASTRAMENTO HORIZONTAL

   Estrutura:  body.app-body (flex)
                 └── .main-area (flex:1)
                      └── .content-area
                           └── conteúdo largo (kanban, tabelas…)

   Um item flex não encolhe abaixo da largura natural do seu
   conteúdo — é o `min-width: auto` que vem por omissão. Por isso o
   .main-area esticava para acomodar as 8 colunas do kanban (≈2100px)
   e empurrava a página toda, deixando a última coluna inalcançável.

   O `overflow-x: auto` do .kanban-board nunca chegava a ser usado,
   porque o pai crescia em vez de o obrigar a deslizar.

   `min-width: 0` deixa o item encolher, e aí o conteúdo largo passa
   a deslizar dentro da sua própria caixa — que é o que se quer.
   ══════════════════════════════════════════════════════════════ */
.app-body   { min-width: 0; }
.main-area  { min-width: 0; max-width: 100%; }
.content-area { min-width: 0; max-width: 100%; }
.topbar     { min-width: 0; }

/* Descendentes directos do conteúdo também não podem esticar o pai */
.content-area > * { min-width: 0; max-width: 100%; }

/* Rede de segurança: se algo escapar às regras acima, a página não
   ganha barra horizontal — mas o conteúdo continua alcançável porque
   desliza dentro da sua própria caixa. */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; height: auto; }

/* ── Kanban: desliza em QUALQUER tamanho de ecrã ───────────────── */
/* Antes só deslizava abaixo dos 768px. Num ecrã de portátil com 8
   colunas o problema é exactamente o mesmo. */
.kanban-board {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 4px;
}
.kanban-column { flex-shrink: 0; }

/* Palavras muito longas (emails, IBAN, URLs) partem em vez de esticar */
.card, .modal-body, .info-item, .stat-label, .page-header-info { min-width: 0; }
.info-item strong, .info-item span { overflow-wrap: anywhere; }

/* ── Grelhas automáticas em ecrãs muito estreitos ───────────────
   minmax(280px, 1fr) obriga a coluna a ter 280px mesmo quando o ecrã
   tem 320px e ainda há margens — e a grelha extravasa. O min() faz a
   coluna encolher com o ecrã quando é preciso. */
.grid-auto        { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.stats-grid       { grid-template-columns: repeat(auto-fit,  minmax(min(220px, 100%), 1fr)); }
.module-cards     { grid-template-columns: repeat(auto-fit,  minmax(min(240px, 100%), 1fr)); }
.dash-charts-grid { min-width: 0; }

/* Cabeçalho de página: os botões passam para a linha seguinte em vez
   de serem cortados na margem direita */
.page-header         { flex-wrap: wrap; min-width: 0; }
.page-header-actions { flex-wrap: wrap; min-width: 0; }
.page-header-info    { overflow-wrap: anywhere; }

/* Barra de topo: a pesquisa encolhe antes de empurrar os botões */
.topbar-search { min-width: 0; flex-shrink: 1; }

/* ── Tabelas deslizam dentro da própria caixa ─────────────────── */
/* Envolvidas automaticamente pelo stability.js */
.gp-scroll-x {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.gp-scroll-x > table { min-width: max-content; }

/* Sombra subtil na margem, a indicar que há mais conteúdo ao lado */
.gp-scroll-x {
    background:
        linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left / 24px 100% no-repeat,
        linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)) right / 24px 100% no-repeat,
        radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.10), transparent) left / 10px 100% no-repeat,
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.10), transparent) right / 10px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
}

/* ── Janelas (modais) ─────────────────────────────────────────── */
/* Nunca mais largas do que o ecrã, seja qual for o tamanho pedido */
.modal-container,
.modal-container.wide,
.modal-container.medium,
.modal-container.small,
.modal-container.narrow { max-width: min(var(--gp-modal-w, 600px), calc(100vw - 24px)); }
.modal-container        { --gp-modal-w: 600px; }
.modal-container.wide   { --gp-modal-w: 800px; }
.modal-container.medium { --gp-modal-w: 620px; }
.modal-container.small  { --gp-modal-w: 440px; }
.modal-container.narrow { --gp-modal-w: 420px; }

/* Escurecer o fundo quando o menu lateral está aberto no telemóvel */
body.gp-menu-aberto::after {
    content: '';
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 90;
    animation: gpFade .18s ease;
}
@keyframes gpFade { from { opacity: 0; } to { opacity: 1; } }
.sidebar.mobile-open { z-index: 100; }

/* ================================================================
   PORTÁTIL PEQUENO  —  até 1366px
   Ecrãs de 13" a 14", os mais comuns em escritório. Sem isto, a barra
   lateral come 260px e sobra pouco para o conteúdo.
   ================================================================ */
@media (max-width: 1366px) {
    .content-area { padding: 20px; }
    .kanban-column { min-width: 220px; max-width: 240px; }
    .stat-value { font-size: 22px; }
}

/* ================================================================
   TABLET  —  até 1024px
   ================================================================ */
@media (max-width: 1024px) {
    .grid-3        { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stats-grid    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-row.cols3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kanban-column { min-width: 210px; max-width: 230px; }
    .content-area  { padding: 18px; }
}

/* ================================================================
   TELEMÓVEL  —  até 768px
   ================================================================ */
@media (max-width: 768px) {

    /* Barra de topo — encolher para caber o essencial */
    .topbar { padding: 0 12px; gap: 8px; }
    .topbar-search { display: none; }
    #topbarUserName { display: none; }

    /* Conteúdo respira menos, para aproveitar a largura */
    .content-area { padding: 16px 12px; }

    /* Cabeçalho de página empilha e os botões ocupam a linha toda */
    .page-header { flex-direction: column; align-items: stretch; gap: 10px; }
    .page-header-info h1 { font-size: 19px; }
    .page-header-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .page-header-actions .btn { flex: 1 1 auto; justify-content: center; }

    /* Uma coluna em tudo o que é grelha */
    .grid-2, .grid-3,
    .form-row, .form-row.cols3,
    .dash-charts-grid, .module-cards { grid-template-columns: 1fr; }

    /* Indicadores dois a dois — quatro seguidos ficam ilegíveis */
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .stat-card  { padding: 14px; }
    .stat-value { font-size: 20px; }
    .stat-label { font-size: 11px; }
    .stat-icon  { width: 34px; height: 34px; font-size: 14px; }

    /* Cartões */
    .card-header { padding: 14px 16px; }
    .card-body   { padding: 16px; }

    /* Janelas ocupam quase todo o ecrã, coladas ao fundo */
    .modal-overlay   { align-items: flex-end; }
    .modal-container {
        width: 100%;
        max-width: 100%;
        max-height: 92vh;
        border-radius: 16px 16px 0 0;
    }
    .modal-body   { padding: 16px; }
    .modal-footer { padding: 12px 16px; flex-wrap: wrap; gap: 8px; }
    .modal-footer .btn { flex: 1 1 auto; justify-content: center; }

    /* Campos com 16px evitam que o telemóvel dê zoom ao tocar */
    .form-control, input, select, textarea { font-size: 16px; }

    /* Alvos de toque com tamanho mínimo utilizável */
    .btn      { min-height: 42px; }
    .btn-sm   { min-height: 36px; padding: 7px 12px; }
    .btn-icon { min-width: 40px; min-height: 40px; }
    .nav-item { padding-top: 11px; padding-bottom: 11px; }
    .modal-close { min-width: 40px; min-height: 40px; }

    /* Separadores de módulo lado a lado, sem cortar */
    .module-tab { flex: 1 1 0; min-width: 0; font-size: 12px; padding: 8px 4px; }
    .module-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Tabelas mais compactas para caberem mais colunas */
    .gp-scroll-x table th,
    .gp-scroll-x table td { padding: 9px 10px; font-size: 13px; white-space: nowrap; }

    /* Quadro Kanban desliza na horizontal em vez de espremer as colunas */
    .kanban-board {
        display: flex;
        overflow-x: auto;
        gap: 12px;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }
    .kanban-column {
        flex: 0 0 82vw;
        min-width: 0;          /* anula o min-width do styles.css */
        max-width: 82vw;
        scroll-snap-align: start;
    }

    /* Avisos não tapam o ecrã todo */
    .toast-container { left: 12px; right: 12px; bottom: 12px; }
    .toast { width: auto; max-width: 100%; }
}

/* ================================================================
   TELEMÓVEL PEQUENO  —  até 480px
   ================================================================ */
@media (max-width: 480px) {
    .content-area { padding: 12px 10px; }
    .page-header-info h1 { font-size: 17px; }

    /* Indicadores passam a um por linha */
    .stats-grid { grid-template-columns: 1fr; }

    /* Botões do cabeçalho um por linha, para não ficarem minúsculos */
    .page-header-actions .btn { flex: 1 1 100%; }

    .card-body   { padding: 13px; }
    .modal-body  { padding: 13px; }

    .gp-scroll-x table th,
    .gp-scroll-x table td { padding: 8px; font-size: 12.5px; }

    .kanban-column { flex-basis: 88vw; min-width: 0; max-width: 88vw; }
    .kanban-card   { padding: 10px; }
}

/* ================================================================
   ECRÃ EM DEITADO E POUCO ALTO  (telemóvel na horizontal)
   ================================================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .modal-overlay   { align-items: center; }
    .modal-container { max-height: 96vh; border-radius: var(--radius-lg); }
}

/* ================================================================
   ACESSIBILIDADE E CONFORTO
   ================================================================ */

/* Quem pediu menos animação no sistema, não leva nenhuma */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Foco sempre visível para quem navega por teclado */
.btn:focus-visible,
.nav-item:focus-visible,
.form-control:focus-visible,
.modal-close:focus-visible,
.module-tab:focus-visible {
    outline: 2px solid var(--primary, #E62329);
    outline-offset: 2px;
}

/* Em ecrãs tácteis, não deixar o hover "colado" depois do toque */
@media (hover: none) {
    .btn:hover, .card:hover, .nav-item:hover { transform: none; }
}

/* ================================================================
   IMPRESSÃO
   ================================================================ */
@media print {
    .gp-scroll-x { overflow: visible !important; background: none !important; }
    .gp-scroll-x > table { min-width: 0 !important; }
    body.gp-menu-aberto::after { display: none !important; }
}