/*
 * UDR.WebsiteAdministration responsive baseline.
 *
 * Page-specific CSS may refine a layout, but it must preserve these guarantees:
 * readable text, shrinkable grid/flex children, wrapping actions, fluid media,
 * usable forms, and horizontally scrollable data tables on narrow displays.
 */

:root {
    --udr-responsive-gap: clamp(.75rem, 1.4vw, 1.25rem);
    --udr-responsive-pad: clamp(.75rem, 1.6vw, 1.25rem);
    --udr-touch-target: 2.5rem;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html,
body {
    max-width: 100%;
    overflow-x: clip;
}

body,
.wrapper,
.content-wrapper,
.content,
.container,
.container-fluid,
.row,
[class*="col-"] {
    min-width: 0;
}

.content-wrapper {
    container-name: udr-content;
    container-type: inline-size;
    overflow-x: clip;
}

.content-header h1 {
    font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem);
    line-height: 1.2;
    max-width: 100%;
    overflow-wrap: break-word;
}

.content-header h1 small {
    display: inline-block;
    font-size: .72em;
    max-width: 100%;
    overflow-wrap: break-word;
}

img,
picture,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

img,
video,
canvas {
    height: auto;
}

.img-fluid,
.carousel-item img {
    object-position: center;
}

.card,
.card-body,
.card-header,
.card-footer,
form,
fieldset,
.form-group,
.form-row,
.input-group,
.btn-toolbar,
.modal-content,
.tab-content,
.tab-pane {
    min-width: 0;
    max-width: 100%;
}

.card-body,
.modal-body,
.udr-responsive-container {
    container-name: udr-panel;
    container-type: inline-size;
}

.card-title,
.card-header,
.modal-title,
label,
.input-group-text,
.alert,
.nav-link,
.dropdown-item {
    overflow-wrap: break-word;
}

.form-control,
.custom-select,
select,
textarea,
.select2-container,
.select2-selection,
.select2-selection__rendered {
    min-width: 0;
    max-width: 100%;
}

.select2-container {
    width: 100% !important;
}

.input-group > .select2-container,
.input-group > .select2-container--bootstrap,
.input-group > .select2-container--bootstrap4 {
    flex: 1 1 0;
    width: 1% !important;
}

.input-group > .select2-container .select2-selection--single,
.input-group > .select2-container--bootstrap .select2-selection--single,
.input-group > .select2-container--bootstrap4 .select2-selection--single {
    font-size: 1rem !important;
    min-height: calc(2.25rem + 2px) !important;
}

.select2-container--bootstrap4 .select2-selection--single {
    display: flex;
    align-items: center;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    width: 100%;
    line-height: 1.5 !important;
    padding-right: 1.75rem;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
    top: 0;
    height: 100%;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
    top: 50%;
}

textarea.form-control {
    resize: vertical;
}

.btn,
button,
[role="button"] {
    max-width: 100%;
}

.btn {
    min-height: var(--udr-touch-target);
    overflow-wrap: break-word;
    white-space: normal;
}

.btn-toolbar,
.card-tools,
.report-actions,
.export-actions,
.form-actions,
.modal-footer {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.btn-toolbar .btn,
.card-tools .btn,
.report-actions .btn,
.export-actions .btn,
.form-actions .btn,
.modal-footer .btn {
    margin: 0 !important;
}

.input-group .btn-report-search {
    flex: 0 0 auto;
    white-space: nowrap;
}

.table-responsive,
.responsive-data-table-wrap,
.dataTables_wrapper {
    max-width: 100%;
}

.table-responsive,
.responsive-data-table-wrap {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.table {
    max-width: 100%;
}

.table th,
.table td {
    vertical-align: middle;
}

.pagination,
ul.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    max-width: 100%;
}

.pagination > li,
.pagination .page-item {
    margin: 0;
}

.modal-dialog {
    max-width: calc(100vw - 2rem);
}

.modal-body {
    max-width: 100%;
    overflow-x: auto;
}

.main-header .navbar-nav,
.main-header .nav-item,
.main-header .nav-link,
.main-header .dropdown-menu {
    min-width: 0;
}

.main-header .dropdown-menu,
.main-header .account-dropdown-menu {
    max-width: calc(100vw - 1rem) !important;
}

/*
 * AdminLTE expects a brand-link above .sidebar. This layout has no visible
 * brand, so reserve the standard header row to prevent the first menu label
 * from rendering beneath the navbar at narrow widths.
 */
:root {
    --udr-sidebar-expanded-width: clamp(17rem, 20vw, 17.5rem);
}

@media (min-width: 992px) {
    body:not(.sidebar-collapse) .udr-main-sidebar,
    body:not(.sidebar-collapse) .udr-main-sidebar::before,
    .sidebar-mini.sidebar-collapse .udr-main-sidebar:hover,
    .sidebar-mini.sidebar-collapse .udr-main-sidebar:hover::before,
    .sidebar-mini.sidebar-collapse .udr-main-sidebar.sidebar-focused,
    .sidebar-mini.sidebar-collapse .udr-main-sidebar.sidebar-focused::before {
        width: var(--udr-sidebar-expanded-width);
    }

    body:not(.sidebar-collapse) .udr-main-header,
    body:not(.sidebar-collapse) .content-wrapper,
    body:not(.sidebar-collapse) .main-footer {
        margin-left: var(--udr-sidebar-expanded-width) !important;
    }

    .sidebar-mini.sidebar-collapse .udr-main-sidebar:not(:hover):not(.sidebar-focused) .udr-report-menu .nav-link > .badge {
        display: none;
    }
}

.udr-main-sidebar > .udr-sidebar-header-spacer {
    display: block;
    width: 100%;
    height: calc(3.5rem + 1px);
    min-height: calc(3.5rem + 1px);
    padding: 0;
    pointer-events: none;
}

/*
 * AdminLTE positions tree chevrons over the link text. Give menu labels their
 * own flexible column and reserve the chevron area so long/localized labels
 * wrap to another line instead of overlapping the icon or arrow.
 */
.udr-main-sidebar .nav-sidebar .nav-link {
    display: flex;
    align-items: flex-start;
    min-width: 0;
}

.udr-main-sidebar .nav-sidebar .nav-link > .nav-icon {
    flex: 0 0 1.6rem;
}

.udr-main-sidebar .nav-sidebar .nav-link > p {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding-right: 1.75rem;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: break-word;
}

/* Keep report icons, labels, and status badges in separate columns so the
   badge never overlays a long label. */
.udr-main-sidebar .udr-report-menu .nav-link {
    display: grid;
    width: 100%;
    grid-template-columns: 1.4rem minmax(0, 1fr) auto;
    align-items: center;
    column-gap: .35rem;
    margin-left: 0;
    padding-right: .5rem;
    padding-left: 1rem;
}

.udr-main-sidebar .udr-report-menu .nav-link > .nav-icon {
    width: auto;
    margin-right: 0;
}

.udr-main-sidebar .udr-report-menu .nav-link > p {
    padding-right: 0;
    white-space: nowrap;
}

.udr-main-sidebar .udr-report-menu .nav-link > .badge.right {
    position: static;
    margin-left: 0;
}

.udr-main-sidebar .nav-sidebar .nav-link > .right,
.udr-main-sidebar .nav-sidebar .nav-link > p > .right {
    top: .75rem;
}

@media (min-width: 992px) {
    .sidebar-mini.sidebar-collapse .udr-main-sidebar:not(:hover):not(.sidebar-focused) .nav-sidebar .nav-link > p {
        flex: 0 0 0;
        min-width: 0;
        padding-right: 0;
    }
}

.main-header .account-dropdown-detail,
.user-panel .info,
.brand-text {
    overflow-wrap: break-word;
}

/*
 * Shared application header.
 * AdminLTE keeps navbar controls on one row even when the navigation sidebar
 * reduces the header's usable width. Use the header itself as the responsive
 * container so actions move to a second row before controls collide.
 */
.main-header.udr-main-header {
    container-name: udr-navbar;
    container-type: inline-size;
    flex-wrap: wrap;
    gap: 0 .25rem;
    min-width: 0;
}

.main-header.udr-main-header > .udr-navbar-primary,
.main-header.udr-main-header > .udr-navbar-actions {
    align-items: center;
    flex-direction: row;
    min-width: 0;
}

.main-header.udr-main-header > .udr-navbar-primary {
    flex: 0 1 auto;
}

.main-header.udr-main-header > .udr-navbar-actions {
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.udr-navbar-actions > .nav-item {
    flex: 0 0 auto;
    min-width: 0;
}

.udr-navbar-actions > .udr-culture-nav-item {
    flex: 0 1 9.375rem;
    max-width: 9.375rem;
    width: 9.375rem;
}

.udr-culture-control,
#cultureForm.udr-culture-form {
    max-width: 100%;
    min-width: 0;
    width: 100%;
}

.udr-account-button {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    max-width: min(14rem, 28vw);
    min-height: 2.5rem;
    min-width: 0;
}

.udr-account-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.udr-account-item .account-dropdown-menu {
    box-sizing: border-box;
    left: auto;
    max-width: min(26rem, calc(100vw - 1rem)) !important;
    min-width: min(18rem, calc(100vw - 1rem));
    right: 0;
    width: max-content;
}

.udr-account-item .account-dropdown-menu .dropdown-item-text {
    padding: .75rem 1.25rem;
    white-space: normal;
}

.udr-account-item .account-dropdown-info {
    align-items: start;
    display: grid;
    gap: .65rem;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    line-height: 1.4;
    min-width: 0;
}

.udr-account-item .account-dropdown-info + .account-dropdown-info {
    margin-top: .65rem;
}

.udr-account-item .account-dropdown-info > i {
    margin-top: .15rem;
    text-align: center;
    width: 1.25rem;
}

.udr-account-item .account-dropdown-detail {
    min-width: 0;
    overflow-wrap: break-word;
    white-space: normal;
    word-break: normal;
}

.udr-account-item .account-dropdown-menu .dropdown-item {
    align-items: center;
    display: flex;
    min-width: 0;
    white-space: normal;
}

.udr-account-item .account-dropdown-menu .dropdown-item > i {
    flex: 0 0 1.25rem;
    text-align: center;
}

.main-header .navbar-nav .purchase-user-identity {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .2rem;
    min-width: 0;
    max-width: min(42vw, 42rem);
    color: #4A9340 !important;
    font-size: clamp(.82rem, .76rem + .22vw, 1rem);
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
    white-space: normal;
}

.purchase-user-identity-item {
    display: flex;
    align-items: center;
    min-width: 0;
}

#purchaseOffersSidebar {
    width: 300px !important;
    height: 100vh;
}

.control-sidebar-slide-open .content-wrapper,
.control-sidebar-slide-open .main-footer {
    margin-right: 300px !important;
}

.offers {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.offers-track {
    display: flex;
    flex-direction: column;
    animation: scroll-vertical 25s linear infinite;
}

.offers:hover .offers-track {
    animation-play-state: paused;
}

.offers img {
    width: 100%;
    height: auto;
    flex-shrink: 0;
}

@keyframes scroll-vertical {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

.main-header .navbar-nav .purchase-user-identity i {
    color: #4A9340 !important;
    flex: 0 0 auto;
}

.main-header .navbar-nav .purchase-user-identity .purchase-user-name,
.main-header .navbar-nav .purchase-user-identity .purchase-user-entity,
.main-header .navbar-nav .purchase-user-identity .purchase-user-separator {
    color: #4A9340 !important;
    font-weight: 700;
}

.main-header .navbar-nav .purchase-user-identity .purchase-user-role {
    color: #F28C00 !important;
    font-weight: 700;
    text-transform: uppercase;
}

.main-header .navbar-nav .purchase-help-message {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: .35rem;
    min-width: 0;
    padding: .5rem 1rem;
    color: #F28C00 !important;
    font-size: clamp(.82rem, .76rem + .22vw, 1rem);
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
    white-space: nowrap;
}

.purchase-offers-toggle {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    border-radius: 999px;
    transition: color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.purchase-offers-toggle.has-offers {
    color: #2F7D32 !important;
    background: rgba(91, 169, 78, .12);
    box-shadow: inset 0 0 0 1px rgba(74, 147, 64, .28);
    font-weight: 600;
}

.purchase-offers-toggle.has-offers:hover,
.purchase-offers-toggle.has-offers:focus {
    color: #225E25 !important;
    background: rgba(91, 169, 78, .2);
    box-shadow: inset 0 0 0 1px rgba(74, 147, 64, .45), 0 .25rem .75rem rgba(47, 125, 50, .18);
    transform: translateY(-1px);
}

.purchase-offers-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 auto;
}

.purchase-offers-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .3rem;
    border: 2px solid #fff;
    border-radius: 999px;
    color: #fff;
    background: #28A745;
    box-shadow: 0 .15rem .4rem rgba(40, 167, 69, .35);
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
}

.purchase-offers-toggle.offer-attention {
    animation: purchase-offers-glow 2.2s ease-in-out infinite;
}

.purchase-offers-toggle.offer-attention .purchase-offers-icon::after {
    position: absolute;
    inset: -.2rem;
    border: 2px solid rgba(40, 167, 69, .7);
    border-radius: 50%;
    content: '';
    pointer-events: none;
    animation: purchase-offers-ring 2.2s ease-out infinite;
}

@keyframes purchase-offers-glow {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(74, 147, 64, .28), 0 0 0 rgba(40, 167, 69, 0); }
    50% { box-shadow: inset 0 0 0 1px rgba(74, 147, 64, .5), 0 0 1rem rgba(40, 167, 69, .38); }
}

@keyframes purchase-offers-ring {
    0% { opacity: .9; transform: scale(.75); }
    70%, 100% { opacity: 0; transform: scale(1.65); }
}

@media (prefers-reduced-motion: reduce) {
    .purchase-offers-toggle.offer-attention,
    .purchase-offers-toggle.offer-attention .purchase-offers-icon::after {
        animation: none;
    }
}

@media (max-width: 575.98px) {
    .main-header .navbar-nav .purchase-user-identity {
        max-width: calc(100vw - 5rem);
        padding-right: .35rem;
        padding-left: .35rem;
        font-size: .75rem;
    }

    .main-header .navbar-nav .purchase-help-message {
        max-width: none;
        padding-right: .35rem;
        padding-left: .35rem;
        font-size: .75rem;
    }

    .purchase-offers-toggle {
        padding-right: .55rem !important;
        padding-left: .55rem !important;
    }

    .purchase-offers-text {
        display: none;
    }

    #purchaseOffersSidebar {
        width: min(300px, 100vw) !important;
    }

    .control-sidebar-slide-open .content-wrapper,
    .control-sidebar-slide-open .main-footer {
        margin-right: 0 !important;
    }
}

@container udr-navbar (max-width: 68rem) {
    .main-header.udr-main-header {
        row-gap: .35rem;
        padding-bottom: .5rem;
    }

    .main-header.udr-main-header > .udr-navbar-primary,
    .main-header.udr-main-header > .udr-navbar-actions {
        flex: 1 1 100%;
        max-width: 100%;
        width: 100%;
    }

    .main-header.udr-main-header > .udr-navbar-actions {
        align-items: center;
        justify-content: center;
        gap: .35rem;
        margin-left: 0 !important;
        padding-top: .4rem;
        border-top: 1px solid rgba(108, 117, 125, .2);
    }

    .udr-account-button {
        margin-right: 0 !important;
        max-width: 3rem;
        padding-left: .7rem;
        padding-right: .7rem;
    }

    .udr-account-name,
    .purchase-offers-text {
        display: none;
    }
}

@container udr-navbar (max-width: 32rem) {
    .udr-navbar-actions > .udr-culture-nav-item {
        flex-basis: clamp(7.25rem, 38vw, 8.25rem);
        max-width: clamp(7.25rem, 38vw, 8.25rem);
        width: clamp(7.25rem, 38vw, 8.25rem);
    }

    .udr-navbar-fullscreen,
    .udr-account-name,
    .purchase-offers-text {
        display: none;
    }

    .purchase-help-label,
    .purchase-help-phone {
        display: inline;
    }
}

@container udr-navbar (max-width: 28rem) {
    .udr-navbar-actions > .purchase-help-item {
        flex: 1 0 100%;
        justify-content: center;
    }
}

/* Viewport fallbacks preserve the same behavior in browsers without
   container-query support. */
@media (max-width: 1199.98px) {
    .main-header.udr-main-header {
        row-gap: .35rem;
        padding-bottom: .5rem;
    }

    .main-header.udr-main-header > .udr-navbar-primary,
    .main-header.udr-main-header > .udr-navbar-actions {
        flex: 1 1 100%;
        max-width: 100%;
        width: 100%;
    }

    .main-header.udr-main-header > .udr-navbar-actions {
        align-items: center;
        justify-content: center;
        gap: .35rem;
        margin-left: 0 !important;
        padding-top: .4rem;
        border-top: 1px solid rgba(108, 117, 125, .2);
    }

    .udr-account-button {
        margin-right: 0 !important;
        max-width: 3rem;
        padding-left: .7rem;
        padding-right: .7rem;
    }

    .udr-account-name,
    .purchase-offers-text {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .udr-navbar-actions > .udr-culture-nav-item {
        flex-basis: clamp(7.25rem, 38vw, 8.25rem);
        max-width: clamp(7.25rem, 38vw, 8.25rem);
        width: clamp(7.25rem, 38vw, 8.25rem);
    }

    .udr-navbar-fullscreen,
    .udr-account-name,
    .purchase-offers-text {
        display: none;
    }

    .purchase-help-label,
    .purchase-help-phone {
        display: inline;
    }
}

@media (max-width: 447.98px) {
    .udr-navbar-actions > .purchase-help-item {
        flex: 1 0 100%;
        justify-content: center;
    }
}

/*
 * Standard Report / Record filter toolbar.
 * Fixed Bootstrap column percentages can make Range and the two date input
 * groups collide before the mobile breakpoint, especially at 150% display
 * scaling. Keep each control intact and wrap complete controls early.
 */
.row:has(> [class*="col-"] .report-filter-range) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .75rem;
    margin-right: 0;
    margin-left: 0;
}

.row:has(> [class*="col-"] .report-filter-range) > [class*="col-"] {
    width: auto;
    min-width: 0;
    max-width: 100%;
    padding-right: 0;
    padding-left: 0;
}

.row:has(> [class*="col-"] .report-filter-range) > [class*="col-"]:has(.report-filter-range) {
    flex: 2 1 36rem;
}

.row:has(> [class*="col-"] .report-filter-range) > [class*="col-"]:not(:has(.report-filter-range)):not(.report-record-count) {
    flex: 1 1 24rem;
}

.row:has(> [class*="col-"] .report-filter-range) > .report-record-count {
    flex: 0 1 11rem;
}

.row:has(> .report-filter-range) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: .75rem;
    margin-right: 0;
    margin-left: 0;
}

.row:has(> .report-filter-range) > [class*="col-"] {
    width: auto;
    min-width: 0;
    max-width: none;
    padding-right: 0;
    padding-left: 0;
}

.row:has(> .report-filter-range) .input-group,
.row:has(> .report-filter-range) .dropdown,
.row:has(> .report-filter-range) .report-filter-range .btn {
    width: 100%;
    min-width: 0;
}

.row:has(> .report-filter-range) .input-group {
    flex-wrap: nowrap;
    margin-bottom: 0 !important;
}

.row:has(> .report-filter-range) .input-group-text {
    white-space: nowrap;
}

.row:has(> .report-filter-range) .form-control {
    min-width: 0;
}

.report-selected-range-feedback-row {
    clear: both;
    width: auto;
}

.report-table-records {
    display: flex;
    justify-content: flex-end;
    clear: both;
    width: 100%;
    min-width: 0;
    margin-top: 1rem;
}

.report-table-records .report-record-count {
    max-width: 100%;
    margin-left: auto;
}

.report-table-records .input-group {
    margin-bottom: 0 !important;
    flex-wrap: nowrap;
}

.report-actions-append {
    align-items: stretch;
}

.report-actions-append > .btn-report-search,
.report-actions-append > span > .btn-report-search {
    border-radius: 0 8px 8px 0 !important;
}

.report-actions-menu {
    display: inline-block;
    margin-left: .5rem;
}

.report-actions-toggle {
    display: inline-grid;
    min-width: 2.75rem;
    height: 100%;
    padding: .5rem .75rem;
    place-items: center;
    border-radius: 8px !important;
}

.report-actions-toggle::after {
    display: none;
}

.report-actions-dots {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
}

.report-actions-dots > span {
    display: block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
}

.report-actions-menu .dropdown-menu {
    min-width: min(15rem, calc(100vw - 2rem));
    padding: .4rem 0;
    border-color: rgba(74, 147, 64, .25);
    box-shadow: 0 .75rem 1.75rem rgba(31, 45, 61, .16);
}

.report-actions-menu .dropdown-header {
    color: #385f35;
    font-weight: 700;
}

.report-actions-menu .btn.btn-export-icon {
    display: flex;
    width: 100%;
    align-items: center;
    gap: .65rem;
    padding: .6rem .9rem;
    border: 0 !important;
    border-radius: 0 !important;
    font-weight: 600;
    text-align: left;
}

.report-actions-menu .btn.btn-export-icon:hover,
.report-actions-menu .btn.btn-export-icon:focus,
.report-actions-menu .dropdown-item:hover,
.report-actions-menu .dropdown-item:focus {
    color: #244f2a !important;
    background: #e9f6e7 !important;
}

.report-actions-menu .report-export-icon {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px;
    object-fit: contain;
    background-color: #fff;
}

.report-selected-range-host {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.report-selected-range-label {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    width: 100%;
    min-width: 0;
    margin-top: .15rem;
    padding: .65rem .75rem;
    color: #244423;
    font-size: .9rem;
    line-height: 1.3;
    text-align: left;
    background: linear-gradient(135deg, #f4fbf2, #e6f5e2);
    border: 1px solid #b8dfb1;
    border-left: .25rem solid #4a9340;
    border-radius: .55rem;
    box-shadow: 0 .15rem .4rem rgba(42, 91, 37, .1);
    overflow-wrap: break-word;
}

.report-selected-range-label[hidden] {
    display: none !important;
}

.report-selected-range-icon {
    display: inline-flex;
    flex: 0 0 1.75rem;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    color: #fff;
    background-color: #4a9340;
    border-radius: 50%;
}

.report-selected-range-copy {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}

.report-selected-range-caption {
    display: block;
    margin-bottom: .1rem;
    color: #4a9340;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .035em;
    line-height: 1.15;
    text-transform: uppercase;
}

.report-selected-range-value {
    display: block;
    font-weight: 700;
}

.report-selected-range-label.is-invalid {
    color: #842029;
    background: #fff5f5;
    border-color: #efb4b9;
    border-left-color: #dc3545;
}

.report-selected-range-label.is-invalid .report-selected-range-icon {
    background-color: #dc3545;
}

.report-selected-range-label.is-invalid .report-selected-range-caption {
    color: #a61e2a;
}

.report-date-range-error {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    width: 100%;
    min-width: 0;
    margin-top: .4rem;
    padding: .55rem .65rem;
    color: #842029;
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    background-color: #f8d7da;
    border: 1px solid #f1aeb5;
    border-radius: .45rem;
    overflow-wrap: break-word;
}

.report-date-range-error[hidden] {
    display: none !important;
}

.report-date-range-error .fas {
    flex: 0 0 auto;
    margin-top: .1rem;
}

/* Container queries respond to the space left after sidebars, not only to the
   browser viewport. This prevents Bootstrap viewport columns from being
   squeezed when the navigation or Offers panel is visible. */
@container udr-content (max-width: 991px) {
    .content-header .row > [class*="col-"],
    .content > .container-fluid > .row > [class*="col-lg-"],
    .content > .row > [class*="col-lg-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .content-header h1 {
        font-size: clamp(1.1rem, 5cqi, 1.75rem);
    }
}

@container udr-panel (max-width: 767px) {
    .row > [class*="col-lg-"],
    .row > [class*="col-md-"],
    .form-row > [class*="col-lg-"],
    .form-row > [class*="col-md-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .row > [class*="col-lg-"] + [class*="col-lg-"],
    .row > [class*="col-md-"] + [class*="col-md-"] {
        margin-top: .75rem;
    }

    .row [class*="col-"] > table.table:not(.responsive-data-table) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@container udr-panel (max-width: 1199px) {
    .udr-permissions-page .row > .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .udr-permissions-page .row > .col-md-4 + .col-md-4 {
        margin-top: .75rem;
    }

    .udr-permissions-page .row > [class*="col-"] > table.table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@container udr-panel (max-width: 575px) {
    .row > [class*="col-sm-"],
    .form-row > [class*="col-sm-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .row > [class*="col-sm-"] + [class*="col-sm-"] {
        margin-top: .75rem;
    }
}

@media (max-width: 991.98px) {
    .content-header .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .content-header .breadcrumb,
    .content-header .float-sm-right {
        float: none !important;
        justify-content: flex-start;
        margin-top: .5rem;
    }

    .card-body,
    .card-header,
    .card-footer {
        padding-left: var(--udr-responsive-pad);
        padding-right: var(--udr-responsive-pad);
    }

    .report-filter-row,
    .filter-row,
    .filters-row,
    .toolbar-row {
        align-items: stretch !important;
        display: flex;
        flex-wrap: wrap;
        gap: .75rem;
    }

    .report-filter-row > *,
    .filter-row > *,
    .filters-row > *,
    .toolbar-row > * {
        min-width: min(100%, 12rem);
    }

    .control-sidebar-slide-open .content-header h1 {
        font-size: clamp(1.1rem, 4vw, 1.75rem);
    }
}

@media (max-width: 767.98px) {
    .content-wrapper > .content,
    .content-wrapper > .content-header,
    .content > .container-fluid,
    .content-header > .container-fluid {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .content-header {
        padding-top: .75rem;
        padding-bottom: .5rem;
    }

    .content-header h1 {
        font-size: clamp(1.3rem, 6vw, 1.7rem);
    }

    .main-header .nav-link {
        padding-left: .55rem;
        padding-right: .55rem;
    }

    .card {
        margin-bottom: 1rem;
    }

    .card-body {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .form-row {
        row-gap: .25rem;
    }

    .table:not(.responsive-data-table) {
        font-size: .92rem;
    }

    .responsive-data-table th,
    .responsive-data-table td,
    .report-standard-table th,
    .report-standard-table td {
        padding: .55rem .65rem;
    }

    .modal-dialog {
        margin: .5rem auto;
        max-width: calc(100vw - 1rem);
        width: calc(100vw - 1rem);
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .toast-container,
    #toast-container {
        left: .5rem !important;
        max-width: calc(100vw - 1rem) !important;
        right: .5rem !important;
        width: auto !important;
    }
}

@media (max-width: 575.98px) {
    .btn-toolbar,
    .report-actions,
    .form-actions,
    .modal-footer {
        align-items: stretch;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .btn-toolbar .btn,
    .report-actions .btn,
    .form-actions .btn,
    .modal-footer .btn {
        width: 100%;
    }

    .input-group-text {
        padding-left: .6rem;
        padding-right: .6rem;
    }

    .input-group .btn-report-search {
        padding-left: .7rem;
        padding-right: .7rem;
    }

    .report-record-count,
    .report-record-count .input-group {
        max-width: 100%;
        width: 100%;
    }

    .report-page-size,
    .report-page-size + .select2-container {
        flex: 1 1 0;
        width: 1% !important;
    }
}

/* Credit-card actions: long primary labels keep their line while compact
   navigation actions consume only the space they need. */
.cc-action-bar {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: flex-end;
    min-width: 0;
    width: 100%;
}

.cc-action-bar-start {
    justify-content: flex-start;
}

.cc-action-button {
    align-items: center;
    display: inline-flex;
    font-size: clamp(.8rem, .75rem + .2vw, 1rem);
    justify-content: center;
    line-height: 1.2;
    max-width: 100%;
    min-height: 2.5rem;
    min-width: 0;
    padding: .5rem 1rem;
    white-space: normal;
}

.cc-action-button > i {
    flex: 0 0 auto;
}

.cc-action-primary {
    flex: 0 1 auto;
    min-width: 0;
}

.cc-action-back {
    flex: 0 0 auto;
    margin-left: 0;
    min-width: 10rem;
    order: 100;
    padding-left: 1rem;
    padding-right: 1rem;
}

.cc-inline-actions {
    gap: .75rem;
}

@media (max-width: 575.98px) {
    .cc-action-primary,
    .cc-action-back {
        flex: 1 1 100%;
        min-height: 2.5rem;
        min-width: 100%;
        width: 100%;
    }
}

@media (max-height: 650px) and (min-width: 768px) {
    .modal-dialog-scrollable {
        max-height: calc(100vh - 1rem);
    }

    .modal-dialog-scrollable .modal-content {
        max-height: calc(100vh - 1rem);
    }
}

@media print {
    html,
    body,
    .content-wrapper {
        max-width: none;
        overflow: visible !important;
    }
}