/* ==========================================================================
   Responsive / Print
   ========================================================================== */

@media (max-width: 1199.98px) {
    .event-count-card {
        width: 100%;
        max-width: none;
        margin-left: 0;
    }

    .event-hero-count .event-count-card {
        max-width: none;
    }

    .event-lot-form,
    .event-hero-toolbar .event-lot-form {
        justify-content: flex-start;
    }

    .event-hero-toolbar .event-search-form .event-toolbar-field,
    .event-hero-toolbar .event-lot-form .event-toolbar-field {
        flex-basis: 100%;
        max-width: none;
    }

    .main-device-filter {
        flex-wrap: wrap;
    }

    .main-device-filter-group {
        min-width: min(100%, 14rem);
    }

    .main-device-filter-actions {
        flex-wrap: wrap;
    }

    .fee-table-test-field,
    .fee-table-test-actions {
        flex-basis: 100%;
    }

    .fee-table-test-actions {
        width: 100%;
    }

}

@media (min-width: 1200px) {
    .site-events-page #vehicleCount {
        margin-top: 0.7rem;
    }
}

@media (max-width: 700px) {
    .site-events-page #myModal .modal-content {
        width: 100%;
    }
}

@media (max-width: 991.98px) {
    .voucher-search-form,
    .closing-ticket-form,
    .transaction-search-form {
        align-items: stretch;
    }

    .voucher-search-form .form-group,
    .closing-ticket-form .form-group,
    .transaction-search-form .form-group,
    .receipt-search-form .receipt-search-field,
    .receipt-search-form .receipt-search-field-wide {
        width: min(100%, 100%);
    }

    .cardholder-list-page .cardholder-search-footer-inner,
    .app-search-results-footer-inner {
        flex-direction: column;
        align-items: stretch;
        display: flex;
    }

    .cardholder-list-page .cardholder-search-footer .pagination,
    .app-search-results-footer .pagination {
        justify-content: center;
    }

    .cardholder-list-page .cardholder-search-footer-pagination,
    .app-search-results-footer-pagination {
        grid-column: auto;
    }

    .cardholder-list-page .cardholder-search-footer .cardholder-list-page-size-form {
        grid-column: auto;
        width: 100%;
        justify-content: flex-end;
    }

    .site-events-page .site-events-pagination-layout {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .site-events-page .site-events-pagination-main {
        justify-content: center;
    }

    .site-events-page .site-events-pagination-controls {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .site-events-page .site-events-pagination-summary {
        white-space: normal;
        text-align: center;
    }

    .site-events-page .site-events-pagination-size {
        width: 100%;
        align-items: center !important;
    }

    .site-events-page .site-events-pagination-size .list-pagination-size-label {
        position: static;
        bottom: auto;
        left: auto;
        width: 100%;
        transform: none;
        white-space: normal;
    }

    .device-form-switch-stack {
        flex-direction: column;
        gap: 0.75rem;
    }

    .device-launch-row {
        align-items: stretch;
    }

    .device-launch-field,
    .device-launch-button {
        width: 100%;
    }

}

@media (min-width: 992px) {
    .event-hero-toolbar .event-search-form,
    .event-hero-toolbar .event-lot-form {
        flex-wrap: nowrap;
    }
}

@media (max-width: 767.98px) {
    main.app-page-shell {
        padding-top: 1rem;
        padding-bottom: 1.5rem;
    }

    .app-filter-card .card-body,
    .event-toolbar-card .card-body {
        padding: 0.875rem;
    }

    .app-report-heading,
    main.app-page-shell > .app-page-section,
    .app-table-shell {
        width: calc(100% - 1rem);
    }

    main.app-page-shell > .app-page-hero {
        padding: 1rem;
    }

    .device-list-page main.app-page-shell > .app-page-hero,
    .site-location-list-page main.app-page-shell > .app-page-hero {
        width: calc(100% - 1rem);
    }

    .chart-page main.app-page-shell > .app-page-hero {
        width: calc(100% - 1rem);
    }

    .event-page {
        padding-top: 1rem;
        padding-bottom: 1.5rem;
    }

    .event-toolbar-form {
        gap: 0.45rem;
    }

    .event-hero-toolbar .card-body {
        padding: 0.75rem !important;
    }

    .event-toolbar-button {
        width: 100%;
    }

    .event-toolbar-control,
    .event-toolbar-action {
        min-height: 2.25rem;
    }

    .event-count-grid {
        grid-template-columns: 1fr;
    }

    .event-table-header {
        padding: 1rem;
    }

    .event-site-table thead th,
    .event-site-table tbody td,
    .event-voucher-table thead th,
    .event-voucher-table tbody td {
        padding: 0.75rem 0.55rem;
        font-size: 0.82rem;
    }

    .chart-page .chart-canvas-shell {
        height: clamp(14rem, 52vw, 17rem);
    }

    .event-voucher-primary-actions,
    .voucher-toolbar {
        justify-content: flex-start;
    }

    .voucher-toolbar-inside {
        margin-left: 0;
    }

    .event-voucher-search-form {
        align-items: stretch;
    }

    .event-voucher-search-form .form-group,
    .main-device-filter-group {
        width: 100%;
    }

    .gate-controls-page {
        padding-top: 0.85rem;
    }

    .gate-controls-title {
        font-size: 1.55rem;
    }

    .gate-action-btn {
        min-height: 4.15rem;
        font-size: 0.72rem;
    }

    .gate-action-btn img {
        height: 1.45rem;
    }

}

@media (max-width: 575.98px) {
    .app-filter-inline-group,
    .app-filter-actions {
        display: grid;
    }

    .app-filter-actions .btn {
        width: 100%;
    }

    .gate-control-card .card-header,
    .gate-control-card .card-body {
        padding-inline: 0.75rem;
    }

}


@media print {
    body {
        background: #ffffff;
    }

    .form-control {
        border-color: transparent !important;
        border-style: none !important;
        background: transparent !important;
    }

    .noprint,
    .d-print-none,
    .navbar,
    .navbar-theme-switch {
        display: none !important;
    }
}