/* v2 responsive layout overrides — loaded globally by mem_scripts_css.html. */

/* === Layout-shifting compensation =========================================
   The v2 topbar is position:fixed full-width and the v2 drawer is fixed at
   left:0. We add body padding so the page content doesn't sit under them.
   Scoped via :has() so login/timeout pages without these elements aren't
   affected.                                                                  */
body:has(.v2-topbar) {
    padding-top: 3.5rem;        /* topbar height = h-14 = 56px */
}
@media (min-width: 1024px) {
    body:has(.v2-drawer) {
        padding-left: 14rem;    /* drawer width = w-56 = 224px */
    }
}

/* The legacy <div id="main_menu" style="display:none"> still wraps the menu
   include on every page. Force it transparent for layout so the v2 drawer it
   contains is laid out at body level (display:contents drops the wrapper's
   own box). The !important beats the inline display:none.                    */
#main_menu {
    display: contents !important;
    background: none !important;
    border: 0 !important;
    height: auto !important;
    line-height: normal !important;
}

/* The default jQuery .show() that some legacy mem_*.js files run on
   #mem_main / forms still works — those are not affected here.               */

/* === Action toolbar wrap ==================================================
   Legacy <table class="global_filter"> with one row of <td> doesn't wrap and
   overflows on narrow screens. Flatten the table to a flex-wrap container.   */
.global_filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    width: 100%;
    border-collapse: separate;
    margin-bottom: 12px;
    padding: 8px 1rem;     /* breathing room before and after the action buttons */
    box-sizing: border-box;
}
.global_filter > tbody,
.global_filter > tbody > tr {
    display: contents;
}
.global_filter > tbody > tr > td {
    display: inline-flex;
    align-items: center;
    height: auto;
    width: auto;
    padding: 2px 4px;
    white-space: nowrap;
    flex: 0 0 auto;
}
.global_filter > tbody > tr > td.icon_border_left,
.global_filter > tbody > tr > td.filter_border_left {
    border-left: 1px solid #e2e8f0;
    margin-left: 4px;
    padding-left: 8px;
}
.global_filter > tbody > tr > td:last-child {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}
.global_filter > tbody > tr > td.header_title,
.global_filter > tbody > tr > td[class*="header_title"] {
    flex: 1 1 100%;
    padding: 6px 8px;
    font-size: 0.95rem;
    color: #334155;
    white-space: normal;
    border-left: none;
    margin-left: 0;
}
@media (min-width: 1280px) {
    .global_filter > tbody > tr > td.header_title,
    .global_filter > tbody > tr > td[class*="header_title"] {
        flex: 1 1 auto;
        padding-left: 16px;
    }
}

/* === Mobile / narrow viewports ============================================ */
/* The legacy form CSS uses fixed pixel widths (block_child = 320px,          */
/* block_child_2 = 660px, label = 30em, fieldset = 50em). On phones this      */
/* preserves a multi-column desktop layout shrunk to a sliver. Force columns  */
/* to stack and inputs to fill their container.                               */
@media (max-width: 900px) {
    form fieldset {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    form label {
        width: 100%;
        float: none;
        margin-right: 0;
    }
    .block_parent {
        display: block;
    }
    .block_child,
    .block_child_2,
    .block_child_full {
        width: auto;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        display: block;
        box-sizing: border-box;
    }
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="password"],
    input[type="search"],
    select,
    textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .tabs,
    .ui-tabs {
        width: 100%;
        box-sizing: border-box;
    }
}