/* Shared viewport rules for every layout, including account and emailed-link pages.
   Loaded after the theme and isolated component styles. Keep wide data in its own
   scroll container; the mobile viewport clips only overflow beyond the page. */
:root {
    --recruitment-touch-target: 44px;
    --recruitment-viewport-gap: 1rem;
}

.site-wrapper,
.site-content,
:where(.container, .container-fluid, .container-xxl, .container-xxxl),
:where(.row, .rz-row) > *,
:where(.d-flex, .rz-stack) > *,
:where(.rz-card, .rz-fieldset, .rz-fieldset-content, .rz-tabview, .rz-tabview-panel),
:where(.rz-datalist, .rz-datalist-data, .rz-datalist-item, .rz-data-list) {
    min-width: 0;
}

.site-content {
    overflow-wrap: anywhere;
}

/* The rules above let flex items shrink and break anywhere. A button may wrap
   between words, but never narrower than its longest word or inside one. */
:is(.rz-button, .btn) {
    min-width: auto;
    overflow-wrap: normal;
}

:where(.rz-textbox, .rz-textarea, .rz-dropdown, .rz-multiselect, .rz-datepicker,
       .rz-numeric, .rz-form-field, .rz-password, .rz-autocomplete, .form-control, .form-select) {
    max-width: 100%;
    min-width: 0;
}

:where(.rz-card, .rz-dialog-content, .user-dashboard-info-box) {
    overflow-wrap: anywhere;
}

:where(.site-content, .rz-dialog-content, .fb-standalone-main, .vt-standalone-main,
       .panel-standalone-main) :where(img, video, iframe) {
    max-width: 100%;
}

/* Both normal dialogs and fixed-width dialogs opened from code must fit the
   visible viewport. The content remains scrollable when the keyboard is open. */
.rz-dialog,
.rz-confirm-dialog {
    min-width: 0 !important;
    max-width: calc(100vw - 2 * var(--recruitment-viewport-gap)) !important;
    max-height: calc(100vh - 2 * var(--recruitment-viewport-gap)) !important;
    max-height: calc(100dvh - 2 * var(--recruitment-viewport-gap)) !important;
}

.rz-dialog-content {
    min-height: 0;
    min-width: 0;
}

.notif-panel {
    max-width: calc(100vw - var(--recruitment-viewport-gap));
    max-height: min(520px, calc(100dvh - 80px));
}

.rz-notification {
    max-width: calc(100vw - 2 * var(--recruitment-viewport-gap));
}

.rz-dialog-title {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Grids with filters retain their column headers and filter controls. Unfiltered
   grids opt into Radzen's labelled mobile rows in the component markup. */
.rz-data-grid,
.rz-datatable,
.rz-data-grid-data,
.rz-datatable-tablewrapper,
.rz-datatable-scrollable-table-wrapper,
.table-responsive,
.screening-grid-wrapper,
.vt-canvas,
.vt-doc {
    min-width: 0;
    max-width: 100%;
}

.rz-data-grid-data,
.rz-datatable-tablewrapper,
.rz-datatable-scrollable-table-wrapper,
.table-responsive,
.vt-doc {
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.rz-tabview-nav,
.rz-steps > ul,
.secondary-menu ul {
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.rz-tabview-nav > li,
.rz-steps > ul > li,
.secondary-menu ul > li {
    flex-shrink: 0;
}

pre {
    max-width: 100%;
    overflow-x: auto;
}

.sidenav-mobile-close {
    display: none;
}

/* Match the existing navigation drawer breakpoint on phones and tablets. */
@media (max-width: 991.98px) {
    .sidenav,
    .sidenav-inner {
        height: 100vh;
        height: 100dvh;
    }

    .sidenav:not(.mobile-open) {
        visibility: hidden;
    }

    .sidenav.mobile-open {
        max-width: calc(100vw - var(--recruitment-viewport-gap));
    }

    .sidenav .sidenav-inner {
        max-width: calc(100vw - var(--recruitment-viewport-gap));
    }

    .sidenav-header .sidenav-toggle {
        display: none;
    }

    .sidenav-mobile-close {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border: var(--rz-border-width) solid var(--sidenav-border);
        border-radius: var(--rz-border-radius);
        background: var(--sidenav-bg);
        color: var(--sidenav-text);
    }

    .sidenav.collapsed.mobile-open .sidenav-logo {
        display: block;
    }

    .sidenav.collapsed.mobile-open .sidenav-submenu {
        display: block;
    }

    .sidenav-header > a {
        min-width: 0;
    }

    .sidenav-mobile-toggle {
        z-index: 1035;
    }

    body:has(.sidenav.mobile-open) {
        overflow: hidden;
    }

    :is(.btn, .rz-button, .rz-pager-element, .rz-dialog-titlebar-close,
           .sidenav-mobile-toggle, .sidenav-mobile-close, .sidenav-link,
           .profile-dropdown-item, .content-topbar-profile, .notif-bell-btn,
           .readiness-bell-btn, .vt-order-actions button) {
        min-height: var(--recruitment-touch-target);
    }

    .rz-button.rz-button {
        min-height: var(--recruitment-touch-target);
    }

    :is(.rz-button-icon-only, .rz-pager-element, .rz-dialog-titlebar-close,
           .sidenav-mobile-toggle, .sidenav-mobile-close, .content-topbar-profile,
           .notif-bell-btn, .readiness-bell-btn, .vt-order-actions button) {
        min-width: var(--recruitment-touch-target);
    }

    .content-topbar {
        gap: .5rem;
        padding-block: .75rem;
        padding-right: 1rem;
    }

    .content-topbar-title {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .content-topbar-actions {
        flex-shrink: 0;
        gap: .5rem;
    }

    .guest-header-inner {
        gap: .5rem;
        padding-inline: 1rem;
    }

    .guest-header-brand {
        min-width: 0;
    }

    .guest-header-logo {
        max-width: 100%;
        height: auto;
        max-height: 36px;
    }

    .guest-header-actions {
        flex-shrink: 0;
    }

    :where(.fb-standalone-header-inner, .vt-standalone-header-inner,
           .panel-standalone-header-inner) {
        flex-wrap: wrap;
    }

    :where(.fb-standalone-logo, .vt-standalone-logo, .panel-standalone-logo) {
        max-width: 100%;
    }

    .rz-pager {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
    }

    .rz-pager .rz-pager-summary {
        min-width: 0;
        max-width: 100%;
        white-space: normal;
    }

    .rz-pager .rz-pager-pages {
        flex-wrap: wrap;
        min-width: 0;
        max-width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .rz-pager .rz-pager-element {
        min-width: var(--recruitment-touch-target);
        min-height: var(--recruitment-touch-target);
    }
}

@media (max-width: 575.98px) {
    /* app.css trims containers to 10px on phones, but a Bootstrap row still reaches 12px
       past each side, so every page with a row scrolled sideways. Match the row. */
    :is(.container, .container-xxl, .container-xxxl) {
        padding-inline: .75rem;
    }
}

@media (max-width: 767.98px) {
    /* Give the title its own line; four account actions still fit at 360px. */
    .content-topbar {
        flex-wrap: wrap;
        min-height: 68px;
    }

    .content-topbar-title {
        flex: 1 0 100%;
        font-size: 1.125rem;
    }

    .content-topbar-actions {
        margin-left: auto;
        max-width: 100%;
        flex-wrap: wrap;
    }

    /* Prevent iOS from zooming the viewport when a small text field is focused. */
    :is(input, select, textarea, .rz-inputtext, .rz-dropdown-label) {
        font-size: 1rem !important;
    }

    :where(.rz-tabview-panel, .rz-fieldset-content) {
        padding-inline: .75rem;
    }

    .rz-datatable-reflow .rz-data-row > td {
        position: static;
        max-width: 100%;
    }

    .rz-datatable-reflow .rz-grid-table td .rz-cell-data {
        white-space: normal;
        overflow-wrap: anywhere;
        text-overflow: clip;
    }

    .rz-datatable-reflow .rz-data-row + .rz-data-row {
        border-top: var(--rz-border-width) solid var(--rz-border-base);
    }

    .w-md-auto {
        width: 100% !important;
    }
}

@media (min-width: 768px) {
    .w-md-auto {
        width: auto !important;
    }
}

/* Shared page headers and action groups. Keep the DOM order (and keyboard order)
   the same when actions move below the heading on a phone. */
.page-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.page-toolbar > * {
    min-width: 0;
    max-width: 100%;
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

@media (max-width: 767.98px) {
    /* Clip off-canvas decoration without creating another scroll container.
       Tables, tabs and document previews keep their own horizontal scrolling. */
    html {
        overflow-x: clip;
    }

    .rz-skeleton {
        max-width: 100%;
        min-width: 0 !important;
    }

    .site-content :is(.rz-card, .cp-section) {
        padding: 1rem;
    }

    .site-content :is(.rz-textbox, .rz-dropdown, .rz-multiselect, .rz-datepicker,
                     .rz-numeric, .rz-form-field, .rz-autocomplete),
    .rz-dialog-content :is(.rz-textbox, .rz-dropdown, .rz-multiselect,
                          .rz-datepicker, .rz-numeric, .rz-form-field) {
        min-width: 0 !important;
        max-width: 100%;
    }

    .page-toolbar {
        flex-direction: column;
        align-items: stretch !important;
    }

    .page-toolbar > * {
        width: 100%;
        max-width: 100% !important;
    }

    .page-actions,
    .manage-job-actions,
    .cp-cv-actions {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
        align-items: stretch !important;
        gap: .5rem !important;
        width: 100%;
        min-width: 0;
    }

    :is(.page-actions, .manage-job-actions, .cp-cv-actions) > * {
        min-width: 0 !important;
        max-width: 100%;
        margin-inline: 0 !important;
    }

    :is(.page-actions, .manage-job-actions, .cp-cv-actions) > :is(.rz-button, .btn, a),
    .page-toolbar > :is(.rz-button, .btn) {
        width: 100% !important;
        min-height: var(--recruitment-touch-target);
        height: auto;
        justify-content: center;
        text-align: center;
    }

    :is(.site-content, .rz-dialog-content) :is(.rz-button, .btn) {
        max-width: 100%;
        white-space: normal;
    }

    .rz-button .rz-button-box {
        max-width: 100%;
        min-width: 0;
        white-space: normal;
    }

    .rz-button .rz-button-text {
        min-width: 0;
        white-space: normal;
    }

    .rz-button .rzi {
        flex-shrink: 0;
    }

    .cp-section-header {
        flex-wrap: wrap;
        gap: .75rem;
    }

    .cp-edit-btn {
        min-height: var(--recruitment-touch-target);
        flex-shrink: 0;
    }

    .cp-contact-item,
    .cp-skill-badge {
        min-width: 0;
        max-width: 100%;
        flex-wrap: wrap;
    }
}