/* Shared responsive behavior for kiosk/admin pages */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

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

.table-responsive {
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 1024px) {
    .container,
    .container-fluid {
        padding-left: 14px;
        padding-right: 14px;
    }

    .page-header,
    .panel,
    .card,
    .section-card,
    .page-shell {
        border-radius: 14px;
    }

    .btn {
        min-height: 40px;
    }

    .modal-dialog {
        margin: 0.75rem;
    }

    .table-responsive table {
        min-width: 820px;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 15px;
    }

    .container,
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }

    .page-header,
    .panel,
    .card,
    .section-card,
    .page-shell {
        border-radius: 12px;
    }

    .d-flex.gap-2,
    .d-flex.gap-3,
    .d-flex.gap-4 {
        flex-wrap: wrap;
    }

    .input-group {
        width: 100%;
    }

    .table-responsive table {
        min-width: 700px;
    }
}

@media (max-width: 576px) {
    body {
        font-size: 14px;
    }

    h1, h2, h3 {
        line-height: 1.2;
    }

    h1 {
        font-size: 1.4rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    h3 {
        font-size: 1.1rem;
    }

    .btn,
    button,
    [type="button"],
    [type="submit"] {
        width: 100%;
    }

    .modal-content {
        border-radius: 12px;
    }

    .table-responsive table {
        min-width: 620px;
    }
}