/* Mobile safety layer for admin and entrant pages. Keep desktop layout untouched. */
@media (max-width: 900px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    body {
        -webkit-text-size-adjust: 100%;
        min-width: 0;
    }

    img,
    video,
    canvas,
    object,
    embed,
    iframe {
        height: auto;
        max-width: 100%;
    }

    #mainContent,
    .container,
    .container-fluid,
    .page-wrap,
    .my-brands-container {
        max-width: 100% !important;
        width: 100% !important;
    }

    #mainContent {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

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

    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    [class^="col-"],
    [class*=" col-"] {
        min-width: 0;
    }

    [style*="width:"] {
        max-width: 100% !important;
    }

    [style*="min-width:"] {
        min-width: 0 !important;
    }

    h1,
    h2,
    h3,
    h4 {
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    p,
    li,
    dd,
    td,
    th,
    label,
    span,
    a {
        overflow-wrap: anywhere;
    }

    form,
    fieldset,
    .formrow,
    .form-group,
    .editor-label,
    .editor-field {
        max-width: 100%;
    }

    fieldset {
        padding: 12px !important;
    }

    form label,
    .formrow label,
    .editor-label label {
        clear: none !important;
        display: block !important;
        float: none !important;
        line-height: 1.35 !important;
        margin: 0 0 5px !important;
        width: auto !important;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="file"],
    select,
    textarea,
    .form-control {
        display: block;
        max-width: 100% !important;
        width: 100% !important;
    }

    input[type="checkbox"],
    input[type="radio"] {
        display: inline-block;
        max-width: none !important;
        width: auto !important;
    }

    textarea {
        min-height: 92px;
    }

    input[type="submit"],
    input[type="button"],
    button,
    .button,
    .btn,
    .ui-button,
    a.button {
        max-width: 100%;
        min-height: 38px;
        white-space: normal !important;
    }

    .btn-group,
    .button-row,
    .form-actions,
    .actions {
        align-items: stretch;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    table:not(.ui-datepicker-calendar):not(.ui-pg-table):not(.ui-jqgrid-htable):not(.ui-jqgrid-btable) {
        display: block;
        max-width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
    }

    table:not(.ui-datepicker-calendar) th,
    table:not(.ui-datepicker-calendar) td {
        vertical-align: top;
    }

    .table,
    .modern-table {
        min-width: 560px;
    }

    .table-responsive {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dataTables_wrapper {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dataTables_wrapper table {
        display: table !important;
        min-width: 640px;
    }

    iframe,
    iframe[width] {
        max-width: 100% !important;
        width: 100% !important;
    }

    [style*="display:flex"],
    [style*="display: flex"] {
        flex-wrap: wrap !important;
        min-width: 0 !important;
    }

    [style*="grid-template-columns"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .ec-table-wrap,
    .crb-table-wrap,
    .dash-table-wrap,
    .lj-table-wrap,
    .pivot-wrap,
    #grid {
        max-width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .ec-table,
    .crb-table,
    table.pivot,
    #myTable2,
    #feeGrid,
    #discountGrid,
    #awardsGrid {
        display: table !important;
        max-width: none !important;
        min-width: 720px !important;
        width: auto !important;
    }

    #myTable2 {
        min-width: 1000px !important;
    }

    #grid .mui-table textarea,
    #grid .mui-table input,
    #grid .mui-table select {
        min-width: 0 !important;
    }

    .dataTables_length,
    .dataTables_filter,
    .dataTables_info,
    .dataTables_paginate {
        float: none !important;
        margin: 8px 0;
        text-align: left !important;
        white-space: normal;
    }

    .ui-jqgrid,
    .ui-jqgrid-view,
    .ui-jqgrid-hdiv,
    .ui-jqgrid-bdiv,
    .ui-jqgrid-pager {
        box-sizing: border-box;
        max-width: 100% !important;
        overflow-x: auto !important;
        width: 100% !important;
        -webkit-overflow-scrolling: touch;
    }

    .ui-jqgrid table {
        display: table !important;
        max-width: none !important;
        min-width: 640px;
        width: auto !important;
    }

    .ui-jqgrid [style*="width:"] {
        max-width: none !important;
    }

    .ui-jqgrid .ui-pg-table {
        min-width: 0;
        width: auto !important;
    }

    .chosen-container,
    .chosen-drop,
    .select2-container {
        max-width: 100% !important;
        width: 100% !important;
    }

    .chosen-container .chosen-results {
        max-height: 240px;
    }

    .ui-dialog {
        box-sizing: border-box;
        left: 12px !important;
        max-height: calc(100vh - 24px);
        max-width: calc(100vw - 24px) !important;
        overflow: auto;
        top: 12px !important;
        width: calc(100vw - 24px) !important;
    }

    .ui-dialog .ui-dialog-content {
        max-height: calc(100vh - 96px) !important;
        max-width: 100% !important;
        overflow: auto !important;
    }

    .modal-dialog {
        margin: 12px auto;
        max-width: calc(100vw - 24px);
    }

    .modal-content,
    .popup-form,
    #brandPopup,
    #cocktailPopup,
    #popUpI,
    #alert,
    #lineitems {
        max-width: 100% !important;
    }

    .headbanner {
        height: auto !important;
        min-height: 0;
        padding: 10px 12px;
    }

    .headbanner > div {
        padding: 4px 0;
        position: static !important;
        text-align: left !important;
    }

    .float-container,
    .flex-container {
        display: block;
    }

    .float-child,
    .flex-child {
        float: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }

    .card,
    .panel,
    .box {
        max-width: 100%;
    }

    #main-navbar {
        padding: 12px 14px !important;
    }

    #main-navbar .navbar-content {
        justify-content: flex-start;
        min-height: 52px;
    }

    #main-navbar .nav-logo {
        height: 52px !important;
        max-width: calc(100vw - 82px);
        width: 220px !important;
    }

    #main-navbar .nav-toggle {
        right: 0 !important;
    }

    #main-navbar .nav-links {
        left: auto !important;
        max-height: calc(100vh - 76px);
        max-width: 360px;
        overflow-y: auto;
        right: 0;
        width: min(92vw, 360px) !important;
    }

    #main-navbar .dropdown,
    #main-navbar .dropbtn {
        width: 100%;
    }

    #navigation-container {
        max-width: 100%;
    }

    #navigation-container #nav {
        max-width: 100%;
    }

    /* Admin Entries dashboard (/admin): keep charts and actions inside the phone viewport. */
    #dashboard.admin-dashboard-card,
    .admin-entries-card {
        margin: 14px auto 22px !important;
        padding: 14px !important;
        width: 100% !important;
    }

    .admin-dashboard-charts {
        align-items: stretch !important;
        display: grid !important;
        gap: 18px !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .admin-dashboard-chart {
        min-width: 0 !important;
        width: 100% !important;
    }

    .admin-dashboard-chart canvas {
        display: block;
        max-height: 220px;
        max-width: 100% !important;
        width: 100% !important;
    }

    .entry-volume-actions {
        display: grid !important;
        gap: 8px !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .entry-volume-actions .mui-btn {
        padding-left: 8px !important;
        padding-right: 8px !important;
        width: 100%;
    }

    #competitionVolumeTable {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #competitionVolumeTable table {
        display: table !important;
        max-width: none !important;
        min-width: 480px;
        width: 100% !important;
    }

    .admin-entries-header {
        align-items: stretch !important;
        display: grid !important;
        gap: 10px !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .admin-entries-filter,
    .admin-entries-filter .mui-select,
    .admin-extend-button {
        width: 100% !important;
    }

    #searchBar.admin-entry-actions {
        align-items: stretch !important;
        display: grid !important;
        gap: 10px !important;
        justify-content: stretch !important;
        margin-bottom: 12px !important;
    }

    #searchBar.admin-entry-actions > .mui-btn {
        text-align: center;
        width: 100% !important;
    }

    .admin-entry-search-row,
    .admin-entry-search-row > [class^="col-"],
    .admin-entry-search-row > [class*=" col-"] {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .admin-entry-search-field {
        align-items: stretch;
        display: grid;
        gap: 8px;
        grid-template-columns: minmax(0, 1fr) 48px;
        max-width: 100% !important;
        width: 100% !important;
    }

    .admin-entry-search-field input {
        margin-bottom: 0 !important;
    }

    .admin-search-button {
        margin-left: 0 !important;
        min-width: 48px;
        padding-left: 10px !important;
        padding-right: 10px !important;
        width: 48px !important;
    }
}

@media (max-width: 520px) {
    #mainContent {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    h1 {
        font-size: 1.7rem;
    }

    h2 {
        font-size: 1.35rem;
    }

    .table,
    .modern-table,
    .dataTables_wrapper table,
    .ui-jqgrid table {
        min-width: 520px;
    }

    .ui-dialog {
        left: 8px !important;
        max-width: calc(100vw - 16px) !important;
        width: calc(100vw - 16px) !important;
    }
}