/* Page content only: opt in with smallsize-content. Never target shared
   wrapper/header classes or header calendar/dropdown popups. 16 / 14 / 13 / 12px. */
.smallsize-content {
    --vms-font-title: 14px;
    --vms-font-section: 13px;
    --vms-font-body: 13px;
    --vms-font-meta: 12px;
    font-size: 16px;
}
.smallsize-content :is(h1, .mh, .savehd, .leftrightview_title h1, .vms-ehd h1) {
    font-size: 14px !important;
}
.smallsize-content :is(h2, h3, h4, h5, h6, p, label, table, .mp, .vms-sub) {
    font-size: 13px;
}
.smallsize-content :is(small, .small, .vms-hint, .vms-help, .vms-muted, .vms-pill, .dt-info, .notelbl) {
    font-size: 12px;
}

/* Text fields only: preserve checkboxes, switches, file inputs and textareas. */
.smallsize-content :is(input:not([type]), input[type=text], input[type=search], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=date], input[type=time], input[type=datetime-local], input[type=url], select, .select2-selection--single) {
    box-sizing: border-box;
    height: 32px !important;
    min-height: 32px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.smallsize-content .select2-selection--single .select2-selection__rendered {
    line-height: 30px !important;
    font-size: 13px !important;
}
.smallsize-content .select2-selection--single .select2-selection__arrow {
    height: 30px !important;
}
.smallsize-content .select2-selection--multiple {
    min-height: 32px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
}
.smallsize-content .select2-search--inline .select2-search__field {
    height: 24px !important;
    min-height: 24px !important;
}

/* Keep existing button variants, icons and colors; standardize their size. */
.smallsize-content :is(button, .btn, .vms-btn, .vms-actionbtn, .table_header_icon, input[type=submit], input[type=button], .bigbtn):not(.vms-switch, [role="switch"]) {
    box-sizing: border-box;
    height: 32px !important;
    min-height: 32px !important;
    font-size: 13px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.smallsize-content :is(.vms-actionbtn, .table_header_icon) {
    width: 32px;
    border-radius: 6px;
    flex-shrink: 0;
}

/* Keep count/status badges beside their title; actions own the free space. */
.smallsize-content .vms-panel-head { justify-content: flex-start; }
.smallsize-content .vms-panel-head > b { min-width: 0; flex: 0 1 auto; }
.smallsize-content .vms-panel-head > :is(.vms-headacts, .vms-searchtoggle),
.smallsize-content .vms-panel-head > .vms-btn { margin-left: auto; }
.smallsize-content .vms-panel-head > .vms-btn ~ .vms-btn { margin-left: 0; }
.smallsize-content .vms-panel-head:has(> .vms-headacts) > .vms-searchtoggle { margin-left: 0; }
.smallsize-content .vms-panel-head > .vms-pill { max-width: 100%; }
.smallsize-content .vms-panel-head + .vms-seg { padding-top: 12px !important; }

/* Font icons need their glyph centered inside the same box as SVG icons. */
.smallsize-content :is(.vms-btn, .vms-actionbtn, .vms-segi, .table_header_icon) { line-height: 1.2; }
.smallsize-content :is(.vms-btn, .vms-actionbtn, .vms-segi, .table_header_icon) .vms-icon.ti {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    line-height: 1;
    color: inherit;
    filter: none !important;
}
.smallsize-content :is(.vms-btn, .vms-actionbtn, .vms-segi, .table_header_icon) .vms-icon.ti::before { display: block; line-height: 1; }
/* The shared icon centering rule must not reveal the inactive toggle glyph. */
.smallsize-content .vms-panel-head:not(.searchopen) .vms-searchtoggle .vms-ic-close,
.smallsize-content .vms-panel-head.searchopen .vms-searchtoggle .vms-ic-lens { display: none; }

/* Search is a second row at every width, with no width/slide animation. */
:where(.smallsize-content) .vms-panel-head.vms-table-search-head { gap: 10px; }
:where(.smallsize-content) .vms-table-search-head .vms-headacts { margin-left: auto; }
:where(.smallsize-content) .vms-table-search-head .vms-searchtoggle { order: 5; border-radius: 6px; }
:where(.smallsize-content) .vms-panel-head.vms-table-search-head .searchnewlook {
    display: flex;
    order: 10;
    flex: 1 0 calc(100% + 32px);
    width: calc(100% + 32px);
    max-width: none;
    margin: 2px -16px -14px;
    padding: 12px 16px;
    border-top: 1px solid var(--vms-hairline);
    gap: 0;
}
:where(.smallsize-content) .vms-panel-head.vms-table-search-head .vms-headspacer { display: block; width: 100%; min-width: 0; }
:where(.smallsize-content) .vms-panel-head.vms-table-search-head .vms-headsearch,
:where(.smallsize-content) .vms-panel-head.vms-table-search-head.searchopen .vms-headsearch {
    display: flex;
    position: static;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 32px;
    margin: 0;
    padding: 0 12px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    border: 1px solid var(--button-bordercolor);
    border-radius: 6px;
    transition: none;
}
:where(.smallsize-content) .vms-panel-head.vms-table-search-head .vms-headsearch:focus-within { border-color: var(--brandprimary-color); }
:where(.smallsize-content) .vms-panel-head.vms-table-search-head .vms-headsearch input {
    height: 30px !important;
    min-height: 0 !important;
    border-radius: 0 !important;
}
:where(.smallsize-content) .vms-panel-head.vms-table-search-head .vms-headsearch .edsy_datatablesearch_icon {
    width: 100%; height: 100%; border: 0; padding: 0; border-radius: 0;
}
:where(.smallsize-content) .vms-panel-head.vms-table-search-head:not(.searchopen) .searchnewlook { display: none; }
:where(.smallsize-content) .vms-panel-head.vms-table-search-head .vms-searchtoggle { display: grid; }

/* Footer labels must not inherit the 16px main-page size. */
.smallsize-content .datatable_bottom {
    font-size: 13px;
    gap: 12px;
}
.smallsize-content .datatable_bottom :is(.datatable_bottom_left, .dt-length, .dt-buttons, .infoview, .dt-info) {
    font-size: 12px !important;
    line-height: 1.4;
    align-items: center;
}
.smallsize-content .datatable_bottom :is(.dt-length, .dt-buttons)::before {
    font-size: 12px !important;
    white-space: nowrap;
}
.smallsize-content .datatable_bottom :is(.dt-button.buttons-colvis, select.dt-input, .select2-selection--single) {
    height: 32px !important;
    min-height: 32px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
}
.smallsize-content .datatable_bottom .select2-selection--single {
    position: relative;
}
.smallsize-content .datatable_bottom .select2-selection__arrow {
    top: 0 !important;
    right: 0px !important;
    height: 30px !important;
}
.smallsize-content .datatable_bottom .select2-selection__arrow b {
    top: 7px!important;
    mask-size: 16px!important;
    width: 16px!important;
    height: 16px!important;
}
/* The compatibility sheet draws previous/next with a mask on the button.
   Keep the glyph 16px while its clickable button remains 32px tall. */
.smallsize-content .edsytable div.dt-container .dt-paging .dt-paging-button {
    width: 32px;
    height: 32px;
}
.smallsize-content .edsytable div.dt-container .dt-paging .dt-paging-button:is(.previous, .next) {
    top: 0;
    font-size: 0;
    mask-size: 16px 16px;
    mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-size: 16px 16px;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
}
@media (max-width: 767px) {
    :where(.smallsize-content) .vms-table-search-head .vms-headacts { gap: 6px; }
}