/*
 * Cross-page UI corrections.
 *
 * This file intentionally loads after main.css. The original stylesheet is
 * shared by many old views, so keeping corrective rules here makes the scope
 * and cascade predictable while those views are migrated incrementally.
 */

:root {
    --ui-control-height: 36px;
    --ui-gap: 10px;
    --ui-page-gutter: clamp(12px, 2.5vw, 40px);
    --ui-modal-width: 56rem;
    --ui-modal-min-width: 650px;
    --ui-modal-pad: 24px;
}

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

.page-wrapper .page-content {
    max-width: 100%;
    min-width: 0;
}

.page-wrapper .page-content > div {
    min-width: 0;
    padding-right: var(--ui-page-gutter);
    padding-left: var(--ui-page-gutter);
}

/* main.css uses form-control for both toolbar wrappers and actual fields. */
input.form-control:not([type="checkbox"]):not([type="radio"]),
select.form-control,
textarea.form-control {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: var(--ui-control-height);
}

textarea.form-control {
    height: auto;
    overflow-wrap: anywhere;
}

div.form-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-gap);
    min-width: 0;
}

div.form-control > form,
.filter-items {
    min-width: 0;
}

.filter-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.data-search {
    min-height: var(--ui-control-height);
    max-width: 100%;
}

/* Give equivalent actions an equivalent hit area and text behaviour. */
.btn,
.btn-style,
.add-btn,
.primary-btn,
.find-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--ui-control-height);
    padding: 6px 12px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
}

#show-sidebar {
    text-decoration: none;
}

.control-section,
.items-block,
.items-form,
.group-horizontal,
.range-inp {
    min-width: 0;
    gap: var(--ui-gap);
}

.control-section,
.items-block {
    flex-wrap: wrap;
}

.page-name,
.page-name a,
.part,
.inp,
.lb {
    min-width: 0;
}

.page-name a,
.responsive-table th,
.responsive-table td,
.items-form,
.inp,
.lb {
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Permission captions wrap at spaces instead of splitting words. */
.access-modules-page {
    max-width: 100%;
}

.access-modules-page .main-list {
    max-width: 100%;
    overflow-x: auto;
}

.access-modules-page .part-roles-text .items-form,
.access-modules-page .part-roles-block .items-form,
.access-modules-page .part-roles-text .lb,
.access-modules-page .part-roles-block .lb,
.access-modules-page label {
    min-width: min-content;
    overflow-wrap: normal;
    word-break: normal;
}

/* Module editor captions and actions also keep words intact. */
#form-block-mng .items-form,
#form-block-mng .lb,
#form-block-mng label,
#form-block-mng .btn-style {
    overflow-wrap: normal;
    word-break: normal;
}

#form-block-mng .module-edit-field > .inp {
    width: 100%;
    justify-self: stretch;
}

#form-block-mng .module-edit-field .inp-form-max,
#form-block-mng .module-edit-field .select2,
#form-block-mng .module-edit-field .select2-selection__rendered {
    width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
}

/* Fields that need more than the 200px main.css default (logos, file pickers,
   checkbox groups) opt in with .inp-wide instead of fighting the column width. */
.items-form .inp-wide {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}

.items-form .inp-wide .inp-form-max {
    width: 100%;
    min-width: 0;
}

/* main.css gives .lb `width: 100%`, so the label box swallowed the whole row and
   justify-content: space-between pushed the field past the dialog edge. Size the
   label to its text and never let the field wrapper shrink below its control
   (.inp-form-max has min-width: 200px, so a collapsed .inp pushed the input out). */
.modal-content .items-form .lb {
    width: auto;
    min-width: 0;
    flex: 0 1 auto;
    margin-right: 0;
}

.modal-content .items-form .inp {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
}

.modal-content .items-form .inp.inp-wide {
    flex: 1 1 auto;
}

/* Modal editors: controls fill the field column. */
:is(#form-edit-lot, .dictionary-users-edit-modal, #form-shedule-edit, .general-user-editor,
    #form-car-mng, #form-driver-mng, #form-trailer-mng, #form-point-location-mng) .field-box .items-form > .inp {
    width: 100%;
    justify-self: stretch;
}

:is(#form-edit-lot, .dictionary-users-edit-modal, #form-shedule-edit, .general-user-editor,
    #form-car-mng, #form-driver-mng, #form-trailer-mng, #form-point-location-mng) .field-box .inp-form-max,
:is(#form-edit-lot, .dictionary-users-edit-modal, #form-shedule-edit, .general-user-editor,
    #form-car-mng, #form-driver-mng, #form-trailer-mng, #form-point-location-mng) .field-box .select2,
:is(#form-edit-lot, .dictionary-users-edit-modal, #form-shedule-edit, .general-user-editor,
    #form-car-mng, #form-driver-mng, #form-trailer-mng, #form-point-location-mng) .field-box .select2-selection__rendered,
#form-point-location-mng .field-box .SlectBox {
    width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
}

#form-shedule-edit .field-box .clock-timepicker {
    width: 100%;
}

#form-shedule-edit .field-box .clock-timepicker .time {
    min-width: 0 !important;
}

/* Full-page block and picture editors share aligned label and field columns. */
:is(.block-edit-form, .picture-edit-form) > .items-form:has(> .lb):has(> .inp):not(.lst-picture) {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.block-edit-form > .items-form.msg-editor {
    align-items: start;
}

.block-edit-form > .items-form.msg-editor > .lb {
    text-align: left !important;
    padding: 0 !important;
}

:is(.block-edit-form, .picture-edit-form) > .items-form:has(> .lb):has(> .inp):not(.lst-picture) > .lb,
:is(.block-edit-form, .picture-edit-form) > .items-form:has(> .lb):has(> .inp):not(.lst-picture) > .inp,
:is(.block-edit-form, .picture-edit-form) > .items-form:has(> .lb):has(> .inp):not(.lst-picture) .inp-form-max {
    width: 100%;
    min-width: 0;
}

.picture-edit-form > .items-form.img-editor {
    align-items: start;
}

.picture-edit-form > .items-form.img-editor > .lb {
    text-align: left !important;
    padding: 0 !important;
}

.picture-edit-form > .items-form.img-editor > .inp {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.picture-edit-form .img-editor img {
    max-width: 100%;
    max-height: 350px;
    height: auto;
    margin: 0;
}

.picture-edit-form .img-editor input[type="file"] {
    max-width: 100%;
}

/* Keep the long option labels readable and all editable values aligned. */
.auction-options-form {
    width: min(800px, 100%);
    max-width: 100%;
    box-sizing: border-box;
}

.auction-options-form .bit-form > .items-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px;
    align-items: center;
    gap: 12px;
}

.auction-options-form .bit-form > .items-form > .inp,
.auction-options-form .bit-form .clock-timepicker {
    width: 100%;
    min-width: 0;
}

.auction-options-form .bit-form .inp-form-min:not([type="checkbox"]) {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

.auction-options-form .bit-form input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

/* Two-column form row: fixed label column, field column beside it. Every row then
   gets the same small gutter, labels and fields line up, and the leftover space
   falls on the right instead of opening a void between the two. Browsers without
   :has() ignore this and keep the safe flex layout above. */
.modal-content .items-form:has(> .lb):has(> .inp):not(.img-style):not(.btn-modal) {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: center;
    gap: 6px 16px;
}

/* Park the control against the right edge of the field column so every input
   lines up, while the label keeps hugging the left. */
.modal-content .items-form:has(> .lb):has(> .inp):not(.img-style):not(.btn-modal) > .inp:not(.inp-wide) {
    justify-self: end;
}

.items-form.img-style {
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.items-form.img-style .inp {
    width: 100%;
    text-align: center;
}

/* RouteEdit: keep point-order actions as complete buttons. The generic
   .btn-edit width and aggressive text wrapping otherwise collapse "Вгору"
   to a one-character-wide column inside the modal form grid. */
.lst-point-location .group-horizontal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: auto;
}

.lst-point-location .group-horizontal .btn-edit {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
}

.lst-point-location .group-horizontal .btn-style {
    width: auto;
    min-width: max-content;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
}

/* TermoModeRouteEdit rows are name | coefficient | default button. Both value
   wrappers are .lb (which main.css gives width: 100%) inside a wrapping
   right-aligned flex row, so long names pushed the input and the button onto
   their own line and every row ended up with a different x. Lay the row out as
   three real columns instead. */
.lst-point-location .group-horizontal:has(input) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px 160px;
    align-items: center;
    justify-content: stretch;
    width: 100%;
    gap: 8px 16px;
}

.lst-point-location .group-horizontal:has(input) > .btn-edit {
    justify-self: end;
    width: auto;
}

.lst-point-location .group-horizontal:has(input) .set-value-koef {
    width: 100%;
    min-width: 0;
}

.checkbox-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0;
}

.checkbox-list .checkbox-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 600;
    cursor: pointer;
}

.checkbox-list .checkbox-item input {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin: 0;
}

/* Tables stay readable instead of shrinking all copy to 11px. */
.table-wrap,
.table-users,
.table-company,
.table-logs,
.scroll-box {
    min-width: 0;
    max-width: 100%;
}

.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.responsive-table {
    font-size: 0.875rem;
    table-layout: auto;
}

.responsive-table th,
.responsive-table td {
    max-width: 26rem;
}

.responsive-table .btn-cell {
    min-width: 42px;
}

.btn-edit a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    text-decoration: none;
}

/* Modal overlays must work at every viewport width, not desktop only. */
.modal-overlay,
.modal-overlay-lot,
.modal-overlay-recaptcha,
.modal-overlay-filter {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 16px;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
}

.modal-overlay.active,
.modal-overlay-lot.active,
.modal-overlay-recaptcha.active,
.modal-overlay-filter.active {
    opacity: 1;
    visibility: visible;
}

/* The datepicker is appended to body, outside the modal's stacking context. */
#datepickers-container {
    z-index: 1100;
}

/* Filter panels are siblings of their backdrop and must remain above it. */
.modal-overlay-filter {
    z-index: 999;
}

.modal-right-filter {
    z-index: 1001;
    right: 0;
    left: auto;
    width: min(350px, 100vw);
    min-width: min(250px, 100vw);
    max-width: 350px;
    height: 100%;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
}

/* Most scripts toggle `active` on every .modal on the page rather than the one
   inside the overlay they opened. main.css lets an active dialog re-declare
   `visibility: visible`, which beats the `visibility: hidden` it inherited from
   the closed overlay, so sibling dialogs floated on top of the open one. A
   dialog may only show while its own backdrop is active. */
.modal-overlay:not(.active) .modal:not(.modal-right-filter),
.modal-overlay-lot:not(.active) .modal:not(.modal-right-filter),
.modal-overlay-recaptcha:not(.active) .modal:not(.modal-right-filter),
.modal-overlay-filter:not(.active) .modal:not(.modal-right-filter),
.modal-overlay:not(.active) .modal-two:not(.modal-right-filter),
.modal-overlay-lot:not(.active) .modal-two:not(.modal-right-filter),
.modal-overlay-recaptcha:not(.active) .modal-two:not(.modal-right-filter),
.modal-overlay-filter:not(.active) .modal-two:not(.modal-right-filter) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* main.css forces a 500px floor and a 75rem ceiling, so dialogs kept stretching
   far past their content. Size them to the content instead, with a 650px floor. */
.modal:not(.modal-right-filter),
.modal-two:not(.modal-right-filter) {
    width: auto;
    min-width: min(var(--ui-modal-min-width), calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
}

.modal:not(.modal-right-filter) {
    max-width: min(var(--ui-modal-width), calc(100vw - 32px));
}

.modal-two:not(.modal-right-filter) {
    max-width: min(var(--ui-modal-min-width), calc(100vw - 32px));
}

/* The captcha dialog is a sibling of its backdrop and must stay clickable. */
.modal.modal-center-recaptcha {
    width: max-content;
    min-width: 0;
    max-width: calc(100vw - 32px);
    z-index: 1001;
}

.modal:not(.modal-right-filter).active .modal-content,
.modal-two:not(.modal-right-filter).active .modal-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    max-height: calc(100dvh - 32px);
    padding: var(--ui-modal-pad);
    overflow-x: hidden;
    overflow-y: auto;
}

/* main.css gives .flex/.flex-col no styling, so the dialog body was a plain block
   and both it and .scroll-box scrolled. Make the body the only scroll region and
   keep the action row pinned to the bottom. */
.modal:not(.modal-right-filter) .modal-content > .flex,
.modal:not(.modal-right-filter) .modal-content > .flex-col,
.modal:not(.modal-right-filter) .modal-content > .scroll-box,
.modal-two:not(.modal-right-filter) .modal-content > .flex,
.modal-two:not(.modal-right-filter) .modal-content > .flex-col,
.modal-two:not(.modal-right-filter) .modal-content > .scroll-box {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.modal:not(.modal-right-filter) .modal-content .flex-col,
.modal-two:not(.modal-right-filter) .modal-content .flex-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
}

.modal:not(.modal-right-filter) .modal-content .scroll-box,
.modal-two:not(.modal-right-filter) .modal-content .scroll-box {
    max-height: none;
    min-width: 0;
    max-width: 100%;
}

.modal:not(.modal-right-filter) .modal-content > .caption-modal,
.modal:not(.modal-right-filter) .modal-content > .items-form.btn-modal,
.modal-two:not(.modal-right-filter) .modal-content > .caption-modal,
.modal-two:not(.modal-right-filter) .modal-content > .items-form.btn-modal {
    flex: 0 0 auto;
}

/* The action row used to hug the frame and spread its buttons to both edges. */
.modal:not(.modal-right-filter) .modal-content > .items-form.btn-modal,
.modal-two:not(.modal-right-filter) .modal-content > .items-form.btn-modal {
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
    padding: 16px 0 0;
    border-top: 1px solid #e2e6ec;
}

#form-lot-ifo .items-form.btn-modal > .inp {
    flex: 1 1 0;
    width: auto !important;
    min-width: 0;
}

#form-lot-ifo .items-form.btn-modal > .inp > .btn-style {
    width: 100%;
    min-width: 0;
}

/* Edit dialogs: park the two actions on opposite edges, cancel on the left and
   save on the right. Keyed on the button pair rather than on a per-view class so
   every dialog picks this up, including any added later.
   The row is matched as a descendant, not as a child: most of these rows sit
   inside .items-form / .scroll-box / .field-box wrappers rather than directly
   under .modal-content.
   The axis is reversed because every such row is written save-first, so the
   primary action lands on the right. Relying on that order rather than on
   `order` matters: some rows label their actions btn-save-claim-cancel and
   btn-close-modal, so there is no .btn-cancel token to key a reordering on. */
.modal:not(.modal-right-filter) .modal-content .items-form.btn-modal:is(:has(.btn-save):has(.btn-cancel), .btn-modal-split),
.modal-two:not(.modal-right-filter) .modal-content .items-form.btn-modal:is(:has(.btn-save):has(.btn-cancel), .btn-modal-split) {
    flex-direction: row-reverse;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* space-between aligns the wrappers, not the buttons, and the small-screen rules
   hand those wrappers a 200px base (then full width), which leaves the buttons
   floating inside them instead of touching the edges. Shrink them to content. */
.modal:not(.modal-right-filter) .modal-content .items-form.btn-modal:is(:has(.btn-save):has(.btn-cancel), .btn-modal-split) .inp,
.modal-two:not(.modal-right-filter) .modal-content .items-form.btn-modal:is(:has(.btn-save):has(.btn-cancel), .btn-modal-split) .inp {
    flex: 0 0 auto;
    width: auto !important;
}

/* main.css gives every claim .inp a 200px floor and right-aligned content.
   Action wrappers need to size to their buttons across all claim dialogs. */
#form-claim-mng .items-form.btn-modal {
    flex-wrap: wrap;
}

#form-claim-mng .items-form.btn-modal > .inp {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 0;
    text-align: center;
}

#form-claim-mng .items-form.btn-modal > .inp:not(:has(a, button, input[type="submit"])) {
    display: none;
}

#form-claim-mng .claim-info-actions {
    justify-content: flex-start;
}

#form-claim-mng .claim-info-actions > .inp:last-child {
    margin-left: auto;
}

.modal:not(.modal-right-filter) .close-modal,
.modal-two:not(.modal-right-filter) .close-modal {
    z-index: 2;
}

/* Nothing inside a dialog may sit flush against its frame. */
.modal:not(.modal-right-filter) .modal-content > *,
.modal-two:not(.modal-right-filter) .modal-content > * {
    max-width: 100%;
}

/* The dialog title used to be a full-bleed strip; inset it like the rest. */
.modal:not(.modal-right-filter) .caption-modal {
    width: 100%;
    max-width: 100%;
    margin: 0 0 14px;
    padding: 0 0 12px;
    border-bottom: 1px solid #e2e6ec;
}

.modal:not(.modal-right-filter) .rows-modal {
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
}

.modal-content .scroll-box,
.modal-content .table-wrap,
.modal-content .flex-col {
    min-width: 0;
    max-width: 100%;
}

.modal-right-filter .modal-content,
.modal-right-filter.active .modal-content {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    max-height: 100%;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.modal-right-filter .top-btn,
.modal-right-filter .bottom-btn {
    padding: 10px 14px;
}

.modal-content .inp-form-max,
.modal-content .SumoSelect,
.modal-content .select2,
.modal-content .select2-selection__rendered {
    max-width: 100%;
}

.files-wr .file-item,
.file-upload {
    min-width: 0;
}

.files-wr .file-name,
.file-upload .file-name {
    min-width: 0;
}

/* Feedback details and discussion share a flexible two-column layout. */
.feedback-overview,
.feedback-comments {
    display: grid;
    grid-template-columns: minmax(280px, 2fr) minmax(0, 3fr);
    align-items: start;
    gap: 16px;
}

.feedback-comments {
    grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr);
    margin: 16px 0;
}

.feedback-summary,
.feedback-protocol,
.feedback-comments-list,
.feedback-comment-editor {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.feedback-summary {
    margin: 0;
}

.feedback-summary .bit-form > .items-form,
.feedback-info-dialog .feedback-summary .bit-form > .items-form {
    display: grid;
    grid-template-columns: minmax(140px, 40%) minmax(0, 1fr);
    align-items: start;
    gap: 12px;
}

.feedback-summary .bit-form .lb,
.feedback-summary .bit-form .inp {
    width: 100%;
    min-width: 0;
}

#form-info-user-request-mng .feedback-summary .bit-form .items-form > .inp {
    justify-self: stretch;
}

.feedback-protocol .table-users,
.feedback-comments-list > .b-style,
.feedback-info-dialog .table-users {
    max-width: 100%;
    overflow-x: auto;
}

.feedback-comment-editor {
    display: block;
}

.feedback-comment-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 12px;
}

.feedback-comment-form textarea {
    width: 100%;
    max-width: 100%;
    min-height: 120px;
    margin: 0;
    box-sizing: border-box;
    resize: vertical;
}

.feedback-comment-form .part {
    align-self: flex-end;
}

.feedback-info-dialog .control-section,
.feedback-info-dialog .page-name {
    display: block;
    width: 100%;
    min-width: 0;
}

@media (max-width: 1050px) {
    .feedback-overview,
    .feedback-comments {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Restore a visible keyboard focus indicator removed by main.css. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid rgba(7, 151, 255, 0.55) !important;
    outline-offset: 2px;
}

@media (min-width: 780px) {
    .responsive-table {
        min-width: 720px;
    }
}

@media (max-width: 779px) {
    .auction-options-form .bit-form > .items-form {
        grid-template-columns: minmax(0, 1fr);
    }

    :is(.block-edit-form, .picture-edit-form) > .items-form:has(> .lb):has(> .inp):not(.lst-picture) {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-wrapper .page-content {
        padding-top: 50px;
    }

    .page-wrapper .page-content > div {
        padding: 8px 12px;
    }

    div.form-control,
    .control-section,
    .group-horizontal,
    .range-inp {
        align-items: stretch;
        flex-direction: column;
    }

    .control-section > *,
    div.form-control > *,
    .group-horizontal > * {
        width: 100% !important;
        max-width: 100%;
    }

    .items-block {
        width: 100%;
    }

    .items-block .part,
    .items-block .part > a,
    .filter-items,
    .filter-items > input,
    .filter-items > button {
        width: 100%;
    }

    .modal-overlay,
    .modal-overlay-recaptcha {
        padding: 0;
    }

    .modal:not(.modal-right-filter),
    .modal-two:not(.modal-right-filter) {
        position: fixed;
        inset: 0;
        width: 100%;
        min-width: 0;
        max-width: none;
        height: 100%;
        max-height: 100dvh;
        border-radius: 0;
    }

    .modal.modal-center-recaptcha {
        inset: auto;
        top: 50%;
        left: 50%;
        width: max-content;
        height: auto;
        max-width: calc(100vw - 16px);
        max-height: calc(100dvh - 32px);
        transform: translate(-50%, -50%) !important;
        border-radius: 3px;
    }

    .modal.modal-center-recaptcha > div {
        padding: 12px !important;
    }

    .modal:not(.modal-right-filter).active .modal-content,
    .modal-two:not(.modal-right-filter).active .modal-content {
        max-height: 100dvh;
        padding: 44px 16px 16px;
    }

    .modal:not(.modal-right-filter) .close-modal,
    .modal-two:not(.modal-right-filter) .close-modal {
        top: 0;
        right: 15px !important;
    }

    .modal-content .items-form:not(.btn-modal) {
        align-items: center;
        flex-direction: row;
    }

    /* A 220px label column eats half a phone screen, so stack instead. */
    .modal-content .items-form:has(> .lb):has(> .inp):not(.img-style):not(.btn-modal) {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    /* Same for the three-column term-mode row. */
    .lst-point-location .group-horizontal:has(input) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 6px 12px;
    }

    .lst-point-location .group-horizontal:has(input) > .btn-edit {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .modal-content .items-form.img-style {
        flex-direction: column;
    }

    .modal-content .items-form .lb {
        width: 100%;
    }

    .modal-content .items-form .inp {
        flex: 0 1 200px;
        width: auto;
    }

    .modal-content .items-form .inp-wide,
    .modal-content .items-form .inp-wide .inp-form-max {
        flex: 1 1 auto;
        width: 100% !important;
        min-width: 0;
    }

    .modal-content .inp-form-max,
    .modal-content .SumoSelect,
    .modal-content .select2,
    .modal-content .select2-selection__rendered {
        width: 200px !important;
        min-width: 0;
        max-width: 100%;
    }

    .responsive-table {
        min-width: 0;
        margin-bottom: 1rem;
    }

    .responsive-table tbody td {
        display: grid;
        grid-template-columns: minmax(7rem, 42%) minmax(0, 1fr);
        align-items: start;
        gap: 10px;
        text-align: left;
    }

    .responsive-table tbody td[data-title]::before {
        float: none;
        min-width: 0;
        font-size: 0.78rem;
        font-weight: 700;
        line-height: 1.35;
    }

    .responsive-table tbody td:first-of-type {
        background: #0797ff;
        color: #fff;
        border-radius: 7px 7px 0 0;
    }

    .responsive-table tbody td:first-of-type[data-title]::before {
        color: inherit;
    }

    .responsive-table .btn-cell {
        display: block;
        width: 100%;
        min-width: 0;
        text-align: right;
    }

    .responsive-table .btn-edit,
    .responsive-table .btn-edit a,
    .responsive-table .btn-edit i {
        width: 100%;
    }

    .date-from,
    .content-control,
    .dabl-date {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .toast,
    #toast-container {
        width: min(300px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
    }
}

@media (max-width: 380px) {
    .modal.modal-center-recaptcha {
        max-width: calc(100vw - 8px);
    }

    .modal.modal-center-recaptcha > div {
        padding: 4px !important;
    }

    .responsive-table tbody td {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .modal-content .items-form:not(.btn-modal) {
        align-items: stretch;
        flex-direction: column;
    }

    .modal-content .items-form .inp,
    .modal-content .inp-form-max,
    .modal-content .SumoSelect,
    .modal-content .select2,
    .modal-content .select2-selection__rendered {
        flex-basis: auto;
        width: 100% !important;
    }
}