/**
 * Bellagio — shared mobile / small-screen layout fixes
 * Included from base_produtor.html and base_admin.html
 */

/* Prevent accidental horizontal page scroll */
html {
    overflow-x: clip;
}
body {
    overflow-x: clip;
}

img,
video,
svg {
    max-width: 100%;
    height: auto;
}

/* ─── Producer shell (base_produtor) ─── */
@media (max-width: 640px) {
    .app-shell .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }

    .app-shell .d-flex.justify-content-between.align-items-center {
        flex-wrap: wrap;
        gap: 12px;
    }

    .app-shell .d-flex.justify-content-between.align-items-center > .btn,
    .app-shell .d-flex.justify-content-between.align-items-center > a.btn {
        width: 100%;
        justify-content: center;
    }
}

/* ─── Admin shell (base_admin) ─── */
@media (max-width: 768px) {
    .main-content {
        overflow-x: clip;
    }

    .main-content .card-body,
    .main-content .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .main-content .card-body > .table,
    .main-content .card-body > table {
        min-width: 520px;
    }

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

    .main-content .d-flex.flex-wrap.gap-2 .btn,
    .main-content .page-actions .btn {
        flex: 1 1 auto;
        min-width: min(100%, 140px);
    }

    .main-content h1,
    .main-content .h1,
    .main-content h2,
    .main-content .h2 {
        font-size: clamp(1.15rem, 5vw, 1.5rem);
        word-break: break-word;
    }

    .main-content .row.g-3 > [class*="col-"],
    .main-content form .row > [class*="col-"] {
        min-width: 0;
    }
}

/* Tables inside Bootstrap .table-responsive already scroll; reinforce touch */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* Form controls: avoid iOS zoom on focus (16px+ on inputs) */
@media (max-width: 768px) {
    .form-control,
    .form-select,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    textarea,
    select {
        font-size: max(16px, 1em);
    }
}

/* Button groups that should stack on narrow screens */
@media (max-width: 480px) {
    .btn-group-mobile-stack {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }

    .btn-group-mobile-stack > .btn,
    .btn-group-mobile-stack > a.btn {
        width: 100%;
        margin: 0 !important;
        border-radius: 8px !important;
    }
}