/*
 * Responsividade (FAR) — correcções por largura de ecrã.
 * Carregado depois do style.bundle.css (Metronic 8 / Bootstrap 5) em todas as páginas.
 * Larguras de referência: telemóvel 360/390px, tablet 768px, portátil 1024px, desktop 1366px.
 * Só CSS: não altera lógica nem markup das páginas.
 */

/* ---------- Geral (todas as larguras) ---------- */

/* Imagens e logótipos nunca ultrapassam o contentor. */
.card img, .modal img, .content img, .auth-cartao img, #kt_sign_in_form img { max-width: 100%; height: auto; }

/* Texto longo (nº de processo, e-mails, referências, nomes de ficheiros) quebra em vez de empurrar o layout. */
.ul-widget__info, .card-body p, .modal-body, .menu-sub-dropdown .text-gray-400, .alert { overflow-wrap: break-word; }

/* Tabelas largas: rolam dentro do .table-responsive sem esconder o cabeçalho. */
.table-responsive { -webkit-overflow-scrolling: touch; }
.table-responsive > .table { margin-bottom: 0; }

/* Lista de notificações do cabeçalho: nunca mais larga que o ecrã. */
.menu-sub-dropdown.w-275px { max-width: calc(100vw - 1.5rem); }

/* Passos do processo (portal): a lista acompanha a largura disponível. */
.step-wizard-list { flex-wrap: nowrap; max-width: 100%; }

/* ---------- Portátil 992px a 1199px (login, registo, recuperação de senha) ---------- */
/*
 * A coluna lateral verde só tem largura fixa a partir de 1200px (w-xl-600px); entre 992px
 * e 1199px ficava com a largura do título e empurrava o cartão (w-lg-500px) para fora do ecrã,
 * provocando scroll horizontal a 1024px. Aqui a coluna passa a ocupar 42% e o cartão encolhe.
 */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .flex-lg-row-auto.w-xl-600px { flex: 0 0 42% !important; width: 42%; max-width: 42%; }
    .flex-lg-row-auto.w-xl-600px .fs-2qx { font-size: calc(1.3rem + 1.2vw) !important; }
    .flex-lg-row-fluid { min-width: 0; }
    .w-lg-500px { max-width: 100%; }
    .auth-cartao { max-width: 100% !important; }
}

/* ---------- Tablet e inferiores (< 992px): menu lateral em gaveta ---------- */
@media (max-width: 991.98px) {
    /* Rede de segurança: nenhum elemento provoca scroll horizontal da página. */
    body, #kt_wrapper { overflow-x: hidden; }
    #kt_content, .post, .container-fluid, .container-xxl { min-width: 0; }

    /* Coluna lateral das páginas de autenticação: altura contida, texto menor. */
    .flex-lg-row-auto.w-xl-600px .fs-2qx { font-size: 1.6rem !important; }
    .flex-lg-row-auto.w-xl-600px .fs-2 { font-size: 1.15rem !important; }
    .flex-lg-row-auto.w-xl-600px .min-h-lg-350px { min-height: 90px !important; }
    .flex-lg-row-auto.w-xl-600px .pt-lg-20 { padding-top: 1rem !important; }

    /* Cartão de login/registo com padding proporcional. */
    .w-lg-500px.p-10, .w-lg-500px.p-lg-15 { padding: 1.5rem !important; }
    .auth-cartao { padding-left: 1rem; padding-right: 1rem; }
}

/* ---------- Telemóvel (< 768px) ---------- */
@media (max-width: 767.98px) {
    /* Cabeçalho: sino de notificações e avatar mais pequenos. */
    #kt_header .fa-bell { font-size: 2.1em !important; }
    #kt_header .container-fluid { padding-left: .75rem; padding-right: .75rem; }

    /* Barra de ferramentas (Voltar, Filtros, Registar) quebra linha quando não cabe. */
    #kt_toolbar .container-fluid, #kt_toolbar .d-flex { flex-wrap: wrap; row-gap: .5rem; }

    /* Conteúdo com margens laterais menores. */
    #kt_content .container-fluid, #kt_content .container-xxl, .post .container-fluid { padding-left: .75rem !important; padding-right: .75rem !important; }
    .card .card-header { padding-left: 1rem; padding-right: 1rem; flex-wrap: wrap; row-gap: .5rem; }
    .card .card-body { padding-left: 1rem; padding-right: 1rem; }
    /* Cartões encaixados uns nos outros (detalhe do processo): o padding deixa de se acumular. */
    .card-body .card-body { padding-left: .5rem !important; padding-right: .5rem !important; }
    .card-body .card-body .card-body { padding-left: 0 !important; padding-right: 0 !important; }
    .ul-widget__info { padding-left: .25rem; padding-right: .25rem; }

    /* Comentários: avatar, nome, badge (Interno/Público) e data quebram linha. */
    #comentarios .card-body > .d-flex.align-items-center, #historico .card-body > .d-flex.align-items-center { flex-wrap: wrap; row-gap: .35rem; }
    #comentarios .card-body > .d-flex.align-items-center > .my-0 { width: 100%; }
    #comentarios .card-body > .d-flex.align-items-center > .my-0 > span { margin-left: 0 !important; }
    /* Separadores (Comentários / Anexos / Histórico): quebram linha com menos espaço entre si. */
    .nav-line-tabs .nav-item .nav-link { margin-left: .5rem; margin-right: .5rem; }

    /* Títulos e cartões de estatística com fontes contidas. */
    .page-title h1, .page-heading h1 { font-size: 1.25rem !important; }
    .fs-2qx { font-size: 1.75rem !important; }
    .fs-2hx { font-size: 1.6rem !important; }
    .fs-2tx { font-size: 1.5rem !important; }
    .fs-3x { font-size: 1.75rem !important; }

    /* Formulários: botões de opção (Interno/Externo, Aprovar/Rejeitar) e botões de acção em coluna. */
    .btn-group, .btn-group-lg { flex-wrap: wrap; }
    .modal-footer, .card-footer { flex-wrap: wrap; row-gap: .5rem; }
    .modal-footer .btn, .card-footer .btn { min-width: 0; }
    .form-control, .form-select, .select2-container { max-width: 100%; }
    .input-group { flex-wrap: wrap; }
    .input-group > .form-control, .input-group > .form-select { min-width: 0; }

    /* Modais: ocupam quase toda a largura e o corpo rola em vez de a janela crescer para fora do ecrã. */
    .modal-dialog, .modal-dialog.modal-lg, .modal-dialog.modal-xl,
    .modal-dialog.mw-650px, .modal-dialog.mw-900px, .modal-dialog.mw-1000px {
        max-width: calc(100% - 1rem) !important; margin: .5rem auto;
    }
    .modal-dialog { max-height: calc(100vh - 1rem); display: flex; flex-direction: column; }
    .modal-dialog.modal-dialog-centered { min-height: calc(100% - 1rem); justify-content: center; }
    .modal-dialog .modal-content { max-height: calc(100vh - 1rem); overflow: hidden; }
    .modal-dialog .modal-body { overflow-y: auto; }
    .modal-header, .modal-body { padding-left: 1rem; padding-right: 1rem; }
    .modal-body .card-body { padding-left: .5rem !important; padding-right: .5rem !important; }
    /* O contentor com scroll dos modais (me-n7 pe-7) já não sai do cartão. */
    .modal-body .scroll-y.me-n7 { margin-right: 0 !important; padding-right: 0 !important; }
    .modal-body .scroll-y { overflow-x: hidden; }
    /* Botões de opção (Funcionário / Unidade orgânica / Delegação, Interno / Externo): um por linha, texto inteiro. */
    .modal-body .w-50, .modal-body .w-50 .btn-outline-dashed { width: 100% !important; }
    .btn-outline-dashed.p-6 { padding: .9rem 1rem !important; }
    .btn-outline-dashed .fs-4 { font-size: 1.05rem !important; white-space: normal; }

    /* Passos do processo (portal): três passos cabem em 360px. */
    .step-wizard .step-wizard-list { padding: 12px 0; }
    .step-wizard .step-wizard-list .step-wizard-item { min-width: 0 !important; padding: 0 4px; }
    .step-wizard .progress-label { font-size: 12px; }

    /* Rodapé: direitos e "desenvolvido por" centrados em coluna. */
    #kt_footer .container-fluid { text-align: center; row-gap: .25rem; }
    #kt_footer .menu { justify-content: center; }

    /* Paginação das listas: os botões quebram linha. */
    .pagination { flex-wrap: wrap; row-gap: .25rem; }

    /* Área de upload (bootstrap-fileinput) nunca excede a largura do cartão. */
    .file-input, .file-caption, .kv-fileinput-caption { max-width: 100%; }
}

/* ---------- Telemóvel estreito (< 400px) ---------- */
@media (max-width: 399.98px) {
    html { font-size: 15px; }
    #kt_header .fa-bell { font-size: 1.9em !important; }
    .btn:not(.btn-icon):not(.btn-sm) { padding-left: 1rem; padding-right: 1rem; }
    .modal-dialog, .modal-dialog.modal-lg, .modal-dialog.mw-650px, .modal-dialog.mw-900px { max-width: calc(100% - .5rem) !important; margin: .25rem auto; }
}