/* Compatibility refinements for the existing GEMS shell and controls. Print layouts retain their own styles. */
@media screen {
    .main-panel, .content-wrapper, .modal-content { min-width: 0; }
    .modal-title, .alert, .user-menu__name { overflow-wrap: anywhere; }
    .modal-header .btn-close { flex-shrink: 0; }
    .navbar-dropdown { max-width: calc(100vw - 2rem); }
    .user-menu__name { white-space: normal; }
    .transaction-notifications { max-width: calc(100vw - 2rem); }
    .employee-analytics .info-box .value { overflow-wrap: anywhere; }
}
@media screen and (max-width: 767.98px) {
    /* Honour the original col-md grid on small screens instead of shrinking four text cards to slivers. */
    .employee-analytics .info-box { flex: 0 0 100%; }
    .modal-dialog { max-width: calc(100vw - 1rem); }
    .modal .form-control, .modal .form-select, .modal .ts-wrapper { min-width: 0; max-width: 100%; }
}
@media screen and (pointer: coarse) {
    .form-control, .form-select, .ts-control, .dt-input { font-size: 16px; }
    input.form-control:not([type=checkbox]):not([type=radio]), select.form-control, .form-select, .ts-control { min-height: 44px; }
    .topbar-btn, .topbar-user__trigger, .sidebar-search__clear { min-width: 44px; min-height: 44px; }
    .btn:not(.btn-close), .page-link { min-height: 44px; }
    .table .btn { min-width: 36px; min-height: 36px; }
    .btn-close { min-width: 24px; min-height: 24px; }
    .sidebar .sub-menu .nav-link { min-height: 44px; display: flex; align-items: center; }
}