/* ==========================================================================
   Leiloport — regras responsivas globais (Metronic 8 / Bootstrap 5.3)
   Incluído em layouts/app e layouts/auth, depois do style.bundle.css e do <style> inline.

   Regra deste ficheiro: tudo o que muda o layout está dentro de media queries
   (telemóvel/tablet). Fora delas só há:
     - contraste dos cabeçalhos de tabela (thead .text-gray-400);
     - altura do <object> da pré-visualização de PDF (substitui o height="1000px").
   Breakpoints BS: sm 576 · md 768 · lg 992 · xl 1200
   ========================================================================== */

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

/* Contraste: o gray-400 do tema (~#C4CADA) em fundo branco fica ~1,6:1. */
thead tr.text-gray-400,
thead .text-gray-400,
thead.text-gray-400 {
    color: var(--bs-gray-600) !important;
}

/* Pré-visualização de PDF (layouts/app #modalOpenPDFCategory; o <object> é criado em leiloport-ux.js) */
#modalOpenPDFCategory .lp-pdf-object {
    display: block;
    width: 100%;
    height: 80vh;
    border: 0;
}

/* --- Tablet e abaixo (< 992px) ------------------------------------------- */
@media (max-width: 991.98px) {
    /* 1. Toolbar / breadcrumbs: título e botões passam a quebrar de linha */
    #kt_app_toolbar_container {
        flex-wrap: wrap;
        row-gap: .75rem;
    }
    #kt_app_toolbar_container > .d-flex,
    #kt_app_toolbar_container > div:last-child {
        flex-wrap: wrap;
        row-gap: .5rem;
    }

    /* 2. .row aplicada diretamente num .card-body p-0 (48 sítios): sem margens negativas a sair do card */
    .card-body.p-0.row {
        margin-left: 0;
        margin-right: 0;
    }

    /* Sidebar de detalhe (processo/contacto) por cima das tabs: espaço entre os dois blocos */
    #kt_app_content_container > .d-flex.flex-column.flex-lg-row > .flex-lg-row-auto {
        margin-bottom: 1.25rem !important;
    }
}

/* --- Telemóvel e tablet pequeno (< 768px) -------------------------------- */
@media (max-width: 767.98px) {
    #kt_app_toolbar_container .page-heading {
        font-size: 1.1rem !important;
        word-break: break-word;
    }
    #kt_app_toolbar_container > .page-title {
        width: 100%;
        margin-right: 0 !important;
    }
    #kt_app_toolbar_container .breadcrumb {
        flex-wrap: wrap;
    }

    /* 3. Tabs numa só linha com scroll horizontal (em vez de 3-4 linhas) */
    .nav.nav-line-tabs,
    .nav.nav-tabs,
    .nav.nav-pills-custom,
    .lp-tabs-scroll {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 2px; /* não cortar a linha da tab ativa */
    }
    .nav.nav-line-tabs > .nav-item,
    .nav.nav-tabs > .nav-item,
    .nav.nav-pills-custom > .nav-item {
        flex: 0 0 auto;
    }
    .nav.nav-line-tabs .nav-link,
    .nav.nav-tabs .nav-link {
        white-space: nowrap;
    }
    .nav.nav-line-tabs.nav-line-tabs-2x.fs-4 {
        font-size: 1rem !important;
    }
    /* tabs "ocultas" (alvo só programático) não ocupam espaço */
    .nav > .nav-item[style*="visibility: hidden"],
    .nav > .nav-item[style*="visibility:hidden"] {
        display: none !important;
    }

    /* 4. Tabelas: rede de segurança para as que não estão dentro de .table-responsive */
    .card-body > table.table,
    .tab-pane > table.table,
    .accordion-body > table.table,
    .modal-body > table.table,
    .dataTables_wrapper > table.table {
        display: block;
        width: 100% !important;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_paginate {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: .5rem;
    }
    .dataTables_wrapper .dataTables_paginate .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* 5. Larguras fixas de pesquisas/inputs (w-250px … w-500px) anuladas */
    input.w-250px, input.w-275px, input.w-300px, input.w-325px, input.w-350px,
    input.w-375px, input.w-400px, input.w-450px, input.w-500px,
    select.w-250px, select.w-300px, select.w-350px, select.w-400px,
    .form-control.w-250px, .form-control.w-300px, .form-control.w-350px,
    .form-select.w-250px, .form-select.w-300px, .form-select.w-350px {
        width: 100% !important;
        max-width: 100% !important;
    }
    .card-header .card-title {
        flex: 1 1 100%;
    }
    .card-header .card-title > .d-flex.position-relative {
        width: 100%;
    }
    div.min-w-750px, div.min-w-500px, div.min-w-400px {
        min-width: 0 !important;
    }
    a.w-375px, span.w-375px, div.w-375px, span.w-500px {
        width: auto !important;
        max-width: 100%;
    }
    [style*="width: 700px"] {
        width: auto !important;
        max-width: 100%;
    }

    /* 6. Modais grandes (modal-lg / modal-xl) em ecrã inteiro (= modal-fullscreen-md-down) */
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }
    .modal-dialog.modal-lg > .modal-content,
    .modal-dialog.modal-xl > .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }
    .modal-dialog.modal-lg .modal-header,
    .modal-dialog.modal-xl .modal-header,
    .modal-dialog.modal-lg .modal-footer,
    .modal-dialog.modal-xl .modal-footer {
        border-radius: 0;
    }
    .modal-dialog.modal-lg .modal-body,
    .modal-dialog.modal-xl .modal-body {
        overflow-y: auto;
    }
    .modal .tox-tinymce {
        min-height: 220px;
    }
    #modalOpenPDFCategory .lp-pdf-object {
        height: calc(100vh - 70px);
        height: calc(100dvh - 70px);
    }

    /* 7. Tooltips com pré-visualização de imagem (<img width="500">) não saem do ecrã */
    .tooltip-inner {
        max-width: min(520px, 90vw);
    }
    .tooltip-inner img {
        max-width: 100%;
        height: auto;
    }

    /* 8. FullCalendar dentro de modal */
    .fc .fc-toolbar {
        flex-wrap: wrap;
        gap: .5rem;
    }
    .fc .fc-toolbar-title {
        font-size: 1.1rem;
    }
}

/* --- Telemóvel (< 576px) ------------------------------------------------- */
@media (max-width: 575.98px) {
    /* 9. Formulários: col-N sem breakpoint passam a 100% */
    .row > .fv-row[class*="col-"]:not([class*="col-sm-"]):not([class*="col-md-"]):not([class*="col-lg-"]):not([class*="col-xl-"]),
    .row > .form-group[class*="col-"]:not([class*="col-sm-"]):not([class*="col-md-"]):not([class*="col-lg-"]):not([class*="col-xl-"]) {
        flex: 0 0 auto;
        width: 100%;
    }

    /* 10. Botões do rodapé dos modais e toolbars de card */
    .modal-footer > .btn {
        flex: 1 1 auto;
    }
    .card-header .card-toolbar {
        flex-wrap: wrap;
        row-gap: .5rem;
        width: 100%;
        justify-content: flex-start !important;
        gap: .5rem !important;
    }
    .card-header .card-toolbar .btn {
        flex: 0 1 auto;
    }

    /* 11. Texto longo (nº de processo, emails, NIF) não rebenta o flex */
    .accordion-body .fs-2,
    .card-body > .d-flex .fs-2 {
        font-size: 1.25rem !important;
        overflow-wrap: anywhere;
    }
}