/* EsporteGestor - ajustes globais para telas pequenas */
html, body { max-width: 100%; }
body { overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; height: auto; }
.container, .container-fluid { min-width: 0; }
.card, .modal-content, form { min-width: 0; }

/* Tabelas continuam completas, mas rolam dentro da própria área no celular. */
.table { width: 100%; }
.table-responsive { max-width: 100%; }

@media (max-width: 767.98px) {
    body { font-size: 0.95rem; }

    .container, .container-fluid {
        width: 100%;
        max-width: 100%;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Cabeçalhos usados nas diversas páginas */
    .navbar-custom .container,
    .top .container,
    header .container,
    nav .container {
        flex-wrap: wrap !important;
        gap: 12px;
        align-items: flex-start !important;
    }

    .navbar-custom .container > *,
    .top .container > *,
    header .container > *,
    nav .container > * {
        min-width: 0;
        max-width: 100%;
    }

    .navbar-custom h1, .navbar-custom h2, .navbar-custom h3,
    .top h1, .top h2, .top h3 {
        overflow-wrap: anywhere;
    }

    /* Conjunto de ações do topo: quebra linha em vez de sair da tela. */
    .navbar-custom .container > .d-flex,
    .top .container > .d-flex,
    header .container > .d-flex,
    nav .container > .d-flex {
        width: 100%;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 8px !important;
    }

    .navbar-custom .btn,
    .top .btn,
    header .btn,
    nav .btn {
        white-space: normal;
        line-height: 1.2;
    }

    /* Bootstrap rows/columns and long controls */
    input, select, textarea, button, .form-control, .form-select, .input-group {
        max-width: 100%;
    }

    .input-group { flex-wrap: wrap; }
    .input-group > .form-control,
    .input-group > .form-select { min-width: 0; }

    /* Long tables: local horizontal scroll only, never the whole page. */
    table.table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    table.table td,
    table.table th { vertical-align: middle; }

    table.table .btn { white-space: normal; }

    /* Toolbars, filter/action areas commonly built with flex */
    .d-flex.justify-content-between,
    .d-flex.justify-content-end,
    .d-flex.align-items-center {
        flex-wrap: wrap;
        gap: 8px;
    }

    .btn-group { flex-wrap: wrap; }

    /* Modals fit phones */
    .modal-dialog {
        width: auto;
        max-width: calc(100% - 16px);
        margin: 8px auto;
    }
    .modal-body { overflow-x: hidden; }

    /* Cards and spacing */
    .card { border-radius: 12px; }
    .card-body { padding: 14px; }

    /* Prevent long labels, e-mails, names and log content from expanding page */
    td, th, p, small, label, .alert, .badge, .card, .modal-body {
        overflow-wrap: anywhere;
        word-break: normal;
    }

    pre, code {
        max-width: 100%;
        overflow-x: auto;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 420px) {
    .navbar-custom { padding: 14px 0 !important; }
    .navbar-custom .btn,
    .top .btn { font-size: 0.82rem; padding: 0.45rem 0.6rem; }
}

@media print {
    body { overflow: visible !important; }
    table.table { display: table !important; overflow: visible !important; white-space: normal !important; }
}

@media (max-width: 767.98px) {
  .dashboard-topbar { display: block !important; }
  .dashboard-actions { width: 100%; margin-top: 12px; flex-wrap: wrap !important; }
  .dashboard-actions form, .dashboard-actions a { flex: 1 1 calc(50% - 8px); }
  .dashboard-actions .btn, .dashboard-actions button { width: 100%; min-height: 44px; }
}

/* Listagens em cards no celular. No desktop, as tabelas permanecem inalteradas. */
@media (max-width: 767.98px) {
  table.table.mobile-card-table {
    display: table !important;
    width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    border-collapse: separate;
    border-spacing: 0;
  }
  table.table.mobile-card-table thead { display: none !important; }
  table.table.mobile-card-table tbody,
  table.table.mobile-card-table tr,
  table.table.mobile-card-table td { display: block !important; width: 100% !important; }
  table.table.mobile-card-table tbody tr {
    background: #fff;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
  }
  table.table.mobile-card-table tbody td {
    border: 0 !important;
    border-bottom: 1px solid rgba(0,0,0,.07) !important;
    padding: 9px 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  table.table.mobile-card-table tbody td:last-child { border-bottom: 0 !important; }
  table.table.mobile-card-table tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .74rem;
    line-height: 1.1;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #6c757d;
    margin-bottom: 4px;
  }
  table.table.mobile-card-table tbody td.mobile-card-full {
    text-align: center !important;
    padding: 18px 6px !important;
  }
  table.table.mobile-card-table tbody td.mobile-card-full::before { display: none !important; }
  table.table.mobile-card-table tbody td .btn {
    margin: 3px 3px 3px 0;
    max-width: 100%;
  }
  .table-responsive { overflow: visible !important; }
}