/* Explain: Mobile usability layer: larger tap targets, better spacing, text wrapping, and stacked elements. */
/* Mobile usability layer.
   Every rule lives inside a max-width media query, so the desktop
   experience (>= 768px) is left completely untouched. */
@media (max-width: 767px) {
    /* Media never forces the page wider than the viewport */
    img,
    video,
    iframe {
        max-width: 100%;
    }

    /* Roomy but never overflowing gutters */
    .ks-shell {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Snappier vertical rhythm so less scrolling is needed */
    .ks-section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    /* Impede que o botão flutuante do WhatsApp tape o último bloco de
       conteúdo (quadrantes do menu do portal ou a última linha do rodapé). */
    body {
        padding-bottom: 5.25rem;
    }

    /* Comfortable tap targets on every action */
    .btn-ks {
        min-height: 46px;
    }

    /* Long values (amounts, emails, IBANs) wrap instead of breaking cards */
    .portal-stat-value,
    .portal-row dd {
        word-break: break-word;
    }

    /* Data tables: keep every column on a single line and let the
       horizontal scroll wrapper handle any overflow, instead of
       squashing text letter-by-letter (e.g. "Março 2026" breaking). */
    .portal-table th,
    .portal-table td {
        white-space: nowrap !important;
        word-break: normal;
    }
    .portal-table th:first-child,
    .portal-table td:first-child {
        min-width: 7.5rem;
    }

    /* Compact KPI summary: two cards per row on phones */
    #payStats,
    #adminStats,
    #tutorCounts {
        grid-template-columns: 1fr 1fr;
    }

    /* Stacked actions always span the full width */
    .signup-nav .btn-ks,
    .wiz-nav .btn-ks {
        width: 100%;
        justify-content: center;
    }

    /* Floating WhatsApp button keeps clear of content and screen edge */
    .ks-whatsapp {
        right: .8rem;
        bottom: .8rem;
    }
}