/*
 * MEDIPORT — ajustes de responsividade (telemóveis/tablets) sobre o tema Metronic 8 / Bootstrap 5.3.
 * Regras partilhadas; carregado em layouts/app.blade.php depois de style.bundle.css.
 */

/* ---------- geral ---------- */
img {
    max-width: 100%;
}

.text-break-all {
    word-break: break-all;
}

/* pré-visualização de documentos (#modalOpenPDFCategory) */
.mediport-pdf-wrapper {
    height: 80vh;
    min-height: 320px;
}

.mediport-pdf-wrapper object {
    display: block;
    width: 100%;
    height: 100%;
}

@media (max-width: 991.98px) {
    .modal-fullscreen-lg-down .mediport-pdf-wrapper {
        height: calc(100vh - 110px);
    }
}

/* tabelas: nunca rebentam a largura da página */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

.table-responsive > .table {
    margin-bottom: 0;
}

/* DataTables: paginação e "mostrar N" quebram linha em vez de transbordar */
.dataTables_wrapper .bottom,
.dataTables_wrapper .top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

/* ---------- tablet e abaixo (< 992px) ---------- */
@media (max-width: 991.98px) {
    /* barra de título + botões (breadcrumbs) */
    #kt_app_toolbar_container {
        flex-wrap: wrap;
        row-gap: .75rem;
    }

    #kt_app_toolbar_container > .d-flex {
        flex-wrap: wrap;
    }

    #kt_app_toolbar_container .page-heading {
        word-break: break-word;
    }

    /* coluna lateral (ficha do processo/verba) ocupa a largura toda quando empilhada */
    .flex-lg-row-auto[class*="w-lg-"] {
        width: 100% !important;
    }

    .flex-lg-row-fluid.ms-lg-15 {
        margin-left: 0 !important;
        min-width: 0;
    }

    /* cabeçalhos de cartões com título + ações */
    .card > .card-header {
        flex-wrap: wrap;
        row-gap: .5rem;
    }

    .card > .card-header .card-toolbar {
        flex-wrap: wrap;
        gap: .5rem;
    }

    /* separadores com muitos itens: quebram linha e os escondidos não ocupam espaço */
    .nav-line-tabs {
        flex-wrap: wrap;
        row-gap: .25rem;
    }

    .nav-line-tabs > li[style*="visibility: hidden"],
    .nav-line-tabs > li[style*="visibility:hidden"] {
        display: none;
    }

    .nav-line-tabs .nav-link {
        margin-right: .75rem !important;
    }
}

/* ---------- telemóvel (< 768px) ---------- */
@media (max-width: 767.98px) {
    .app-container {
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }

    .card .card-body {
        padding: 1rem;
    }

    .card-body.p-0 {
        padding: 0 !important;
    }

    .page-heading.fs-3 {
        font-size: 1.15rem !important;
    }

    /* grupos de botões e barras de ações */
    .btn-group,
    .card-toolbar,
    .modal-footer {
        flex-wrap: wrap;
        gap: .5rem;
    }

    .modal-footer > * {
        margin: 0;
    }

    /* formulários em modais com col-3/col-4/col-6 sem breakpoint: um campo por linha */
    .modal-body .row > .fv-row[class*="col-"],
    .modal-body .row > .form-group[class*="col-"] {
        flex: 0 0 auto;
        width: 100%;
    }

    /* menus suspensos dos separadores não saem do ecrã */
    .nav .dropdown-menu {
        max-width: calc(100vw - 2rem);
    }

    /* símbolos/imagens grandes dos mosaicos (diligências processuais) */
    .symbol.symbol-200px > img {
        width: 100%;
        height: auto;
    }

    .symbol.symbol-200px {
        width: 100%;
        height: auto;
    }

    /* footer */
    #kt_app_footer .app-container {
        text-align: center;
        row-gap: .5rem;
    }

    /* calendários FullCalendar em modais */
    .fc .fc-toolbar {
        flex-wrap: wrap;
        gap: .5rem;
    }

    .fc .fc-toolbar-title {
        font-size: 1.1rem;
    }
}

/* ---------- telemóvel pequeno (< 576px) ---------- */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: .5rem;
    }

    .modal-fullscreen-sm-down,
    .modal-fullscreen-md-down,
    .modal-fullscreen-lg-down {
        margin: 0;
    }

    .modal-header h2,
    .modal-header .modal-title {
        font-size: 1.15rem;
    }

    .table {
        font-size: .9rem;
    }
}

/* ==========================================================================
   (16/10/2026, da Leiloport) Regras do leiloport-responsivo.css que ainda não existiam aqui.
   Fora de media queries só o contraste dos cabeçalhos de tabela; o resto é só telemóvel/tablet.
   Breakpoints BS: sm 576 · md 768 · lg 992 · xl 1200
   ========================================================================== */

/* 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;
}

/* ---------- tablet e abaixo (< 992px) ---------- */
@media (max-width: 991.98px) {
    /* barra de título: o bloco dos botões (último filho) também quebra linha */
    #kt_app_toolbar_container > .d-flex,
    #kt_app_toolbar_container > div:last-child {
        flex-wrap: wrap;
        row-gap: .5rem;
    }

    /* .row aplicada diretamente num .card-body p-0: sem margens negativas a sair do cartão */
    .card-body.p-0.row {
        margin-left: 0;
        margin-right: 0;
    }

    /* coluna lateral (ficha do processo/contacto) por cima dos separadores: 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 (< 768px) ---------- */
@media (max-width: 767.98px) {
    #kt_app_toolbar_container .page-heading {
        font-size: 1.1rem !important;
    }

    #kt_app_toolbar_container > .page-title {
        width: 100%;
        margin-right: 0 !important;
    }

    #kt_app_toolbar_container .breadcrumb {
        flex-wrap: wrap;
    }

    /* separadores numa só linha com scroll horizontal (em vez de 3-4 linhas); ux.js mantém o ativo visível */
    .nav.nav-line-tabs,
    .nav.nav-tabs,
    .nav.nav-pills-custom,
    .ux-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 do separador ativo */
    }

    .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;
    }

    /* separadores "ocultos" (alvo só programático) não ocupam espaço, em qualquer tipo de .nav */
    .nav > .nav-item[style*="visibility: hidden"],
    .nav > .nav-item[style*="visibility:hidden"] {
        display: none !important;
    }

    /* tabelas fora de .table-responsive: rede de segurança */
    .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;
    }

    /* 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%;
    }

    /* 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;
    }

    /* 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;
    }
}

/* ---------- telemóvel pequeno (< 576px) ---------- */
@media (max-width: 575.98px) {
    /* formulários fora dos modais: 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%;
    }

    /* botões do rodapé dos modais e barras de ações dos cartões */
    .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;
    }

    /* 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;
    }
}