/* Shared screen layout. Print layouts keep their existing table and page sizing. */
@media screen {
    .backoffice-page .header {
        display: flex;
        align-items: center;
        height: 60px;
        min-height: 60px;
        padding: 0 15px;
        position: fixed;
        top: 0;
    }

    .backoffice-page .toggle-nav {
        flex: 0 0 40px;
        float: none;
        margin: 0;
        padding: 8px;
        border: 0;
        background: transparent;
        color: inherit;
        cursor: pointer;
        font-size: 20px;
    }

    .backoffice-page .toggle-nav:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }

    .backoffice-logo {
        flex: 0 1 150px;
        min-width: 0;
        padding: 0 10px;
    }

    .backoffice-logo img {
        max-width: 100%;
        max-height: 40px;
        width: auto;
        height: auto;
    }

    .backoffice-page .header .top-nav {
        display: block;
        margin: 0 0 0 auto;
        min-width: 0;
    }

    .backoffice-page .top-menu {
        display: flex;
        align-items: center;
        margin: 0;
    }

    .backoffice-page .top-menu > li {
        float: none;
        margin: 0 0 0 8px;
    }

    .backoffice-page .top-menu > li > a {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .backoffice-page .top-nav .username {
        max-width: 240px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .backoffice-page #sidebar {
        top: 60px;
        bottom: 0;
        height: auto;
        width: 220px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .backoffice-page #sidebar .sidebar-menu {
        margin-top: 0;
    }

    .backoffice-page #sidebar .sidebar-menu li > a {
        display: flex;
        align-items: center;
        gap: 6px;
        height: auto;
        min-height: 40px;
        line-height: 20px;
    }

    .backoffice-page #sidebar .sidebar-menu li > a > i {
        flex: 0 0 24px;
        padding-right: 0;
        text-align: center;
    }

    .backoffice-page #sidebar .sidebar-menu li > a > span:not(.menu-arrow) {
        flex: 1;
        min-width: 0;
        line-height: 20px;
        overflow-wrap: anywhere;
    }

    .backoffice-page #sidebar .sidebar-menu li > a > .menu-arrow {
        flex: 0 0 16px;
        float: none;
        margin: 0 8px 0 0;
        line-height: 20px;
    }

    .backoffice-page #container.sidebar-closed #sidebar {
        display: none;
    }

    .backoffice-page #container.sidebar-closed #main-content {
        margin-left: 0;
    }

    .sidebar-backdrop {
        display: none;
    }

    .backoffice-page .wrapper {
        display: block;
        min-width: 0;
    }

    .backoffice-page .wrapper .form-control {
        min-width: 0;
        max-width: 100%;
    }

    .backoffice-page .profile-widget {
        overflow-wrap: anywhere;
    }

    .backoffice-page .wrapper .btn {
        min-width: min-content;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: normal;
    }

    .backoffice-page .wrapper .table .btn {
        white-space: nowrap;
    }

    .backoffice-page .wrapper .row > :is(.col-md-1, .col-md-2, .col-md-3):has(> .btn) {
        min-width: min-content;
    }

    .backoffice-page .claim-value-editor {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 8px;
    }

    .backoffice-page .claim-value-input {
        flex: 1 1 160px;
        min-width: 0;
    }

    .backoffice-page .claim-value-editor > .btn {
        flex: 0 0 auto;
    }

    /* Only tables scroll horizontally; filters, suggestions and pagination stay outside this layer. */
    .backoffice-page .table-responsive {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        border: 0;
    }

    .backoffice-page .table-responsive:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }

    .backoffice-page .pagination-box {
        max-width: 100%;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
    }

    .backoffice-page .pagination-box label {
        overflow-wrap: anywhere;
    }

    .backoffice-page .pagination-top {
        margin-right: 0;
    }

    .backoffice-page .pagination {
        max-width: 100%;
        align-items: center;
        flex-wrap: wrap;
    }

    .backoffice-page .pagination .pag-label {
        padding-top: 0;
    }

    .backoffice-page .info-box .count,
    .backoffice-page .info-box .title {
        overflow-wrap: anywhere;
    }

    .backoffice-page .panel-kpi-row {
        display: flex;
    }

    .backoffice-page .panel-kpi-content {
        flex: 1;
        min-width: 0;
        width: auto;
    }

    .backoffice-page .panel-kpi-controls {
        flex: 0 0 auto;
        width: auto;
        padding-left: 0;
    }

    .panel-ordering-actions {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .backoffice-page .info-box .panel-ordering-action i {
        width: auto;
        padding: 0;
        margin: 0;
        float: none;
    }

    .backoffice-page .resizable-box canvas,
    .backoffice-page .vue-chart canvas {
        max-width: 100%;
    }

    .backoffice-page .modal-dialog:not(.vue-modal-dialog) {
        max-width: calc(100% - 24px);
        margin: 12px auto;
        padding-top: 60px;
    }

    .backoffice-page .place-parking-dialog {
        width: max(320px, 40vw);
    }

    .backoffice-page .modal-title {
        overflow-wrap: anywhere;
        padding-right: 24px;
    }

    .general-autocomplete {
        position: relative;
        min-width: 0;
    }

    .general-autocomplete .autocomplete-results {
        position: absolute;
        z-index: 4000;
        left: 0;
        right: 0;
        max-height: 240px;
        overflow-y: auto;
        overflow-wrap: anywhere;
        background: white;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    /* Inline editors expand their table row so suggestions remain reachable inside the scroll layer. */
    .backoffice-page .table-responsive .autocomplete-results {
        position: static;
    }

    .login-page {
        min-height: 100vh;
        min-height: 100dvh;
    }

    .login-page > .container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 100vh;
        min-height: 100dvh;
        width: 100%;
        padding: clamp(16px, 5vh, 48px) 16px;
    }

    .login-page .login-form,
    .login-page .register-form {
        width: 100%;
        margin: 0 auto;
    }

    .login-page .login-wrap img {
        max-width: 100%;
        height: auto;
        max-height: 100px;
    }

    .login-page .form-control {
        min-width: 0;
    }

    .login-page .btn {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

@media screen and (min-width: 992px) {
    .backoffice-page .wrapper :is(.col-md-1, .col-md-2, .col-md-3):has(> label.control-label) {
        min-width: min(100%, 200px);
    }
}

@media screen and (max-width: 991px) {
    .backoffice-page:has(#container:not(.sidebar-closed)) {
        overflow: hidden;
    }

    .backoffice-page #sidebar {
        position: fixed;
        width: min(280px, calc(100% - 40px));
        margin: 0;
        z-index: 1001;
    }

    .backoffice-page #main-content {
        margin-left: 0 !important;
    }

    .backoffice-page #container:not(.sidebar-closed) .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 60px 0 0;
        z-index: 1000;
        border: 0;
        padding: 0;
        background: rgba(0, 0, 0, .4);
    }

    .backoffice-page .top-nav .username {
        max-width: 120px;
    }
}

@media screen and (max-width: 480px) {
    .backoffice-page .header {
        padding: 0 8px;
    }

    .backoffice-logo {
        flex-basis: 130px;
        padding: 0 5px;
    }

    .backoffice-page .top-nav .username {
        display: none;
    }

    .backoffice-page .top-menu > li {
        margin-left: 0;
    }

    .backoffice-page .top-menu > li > a {
        padding: 6px;
    }

    .backoffice-page .pagination-box label {
        font-size: 16px;
    }

    .backoffice-page .pagination-box {
        justify-content: flex-start;
        width: 100%;
    }

    .backoffice-page .panel-heading {
        height: auto;
        overflow-wrap: anywhere;
    }

    .login-page .login-wrap {
        padding: 16px;
    }
}

@media print {
    .backoffice-page .table-responsive {
        overflow: visible;
        border: 0;
    }
}