/* ========================================
   Portax Mobile Styles
   All styles for screens <= 768px (phones)
   ======================================== */

/* Hide mobile-only elements on desktop */
.menu-expand,
.submenu-separator,
.submenu-close {
    display: none;
}

@media screen and (max-width: 768px) {

    /* Prevent body scroll when modal dialog is open */
    body:has(.ui-widget-overlay) {
        overflow: hidden;
    }

    /* Dim body-wrapper when dialog is open */
    body:has(.ui-widget-overlay) .body-wrapper {
        opacity: 0.15;
    }

    /* Mobile form controls - touch-friendly sizing */
    input[type="text"],
    input[type="password"],
    input[type="search"],
    input[type="email"],
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    select,
    textarea,
    .ui-widget input {
        padding: 0.5rem;
        min-height: 44px;
        box-sizing: border-box;
    }

		div.subcontent.static {
			margin: 0;
		}

    /* Status card grid - single column */
    .status-card-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
        max-width: 100%;
        overflow: hidden;
    }

    .status-card {
        max-width: 100%;
        overflow: hidden;
    }

    .status-card-row {
        padding: 0.375rem 0.75rem;
        max-width: 100%;
        overflow: hidden;
        flex-wrap: wrap;
    }

    .status-card-value {
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        word-break: break-word;
    }

    /* Status card fonts - larger for readability */
    .status-card-label {
        font-size: 0.9375rem;
    }

    .status-card-value {
        font-size: 1rem;
    }

    .status-card-value .ip-via {
        display: block;
    }

    /* Normalize margins for elements inside status-card-value */
    .status-card-value ul.phonebook,
    .status-card-value ul.tags {
        text-align: right;
        justify-content: flex-end;
        margin: 0;
        padding: 0;
    }

    .status-card-value div {
        margin: 0;
    }

    .status-card-value b {
        font-size: 1.0625rem;
    }

    .status-card-value label.checkbox {
        display: inline-block;
        padding-left: 0;
				padding-right: 0;
        margin: 0;
    }

    .status-card-value label.checkbox > span {
        position: relative;
        display: inline-block;
    }

    .status-card-row .status-card-value input[type="text"] {
        display: block;
        margin-bottom: 0.5rem;
    }

    /* Body */
    body {
        white-space: normal;
    }

    /* Prevent Safari zoom on input focus */
    input[type="text"],
    input[type="password"],
    input[type="search"],
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    select,
    textarea,
    label,
    button,
    button.ui-button,
    a.button,
		a.portax-popup,
    .ui-widget-content .ui-button,
    .portax-dialog .ui-button,
		div.alert-detail textarea.alert-note,
		.ui-widget textarea,
    .ui-dialog .ui-dialog-buttonpane button,
    .ui-widget button {
        font-size: 16px;
    }

    /* Checkbox/radio touch targets - global mobile size */
    label.checkbox,
    label.radio {
        padding-left: 32px;
        min-height: 24px;
        line-height: 24px;
    }

    label.checkbox > span,
    label.radio > span {
        width: 24px;
        height: 24px;
        top: 0;
    }

    label.radio > span::after {
        width: 12px;
        height: 12px;
        top: 6px;
        left: 6px;
    }

    label.checkbox > span::after {
        left: 8px;
        top: 3px;
        width: 6px;
        height: 12px;
    }

    /* Tag input - touch-friendly size */
    .portax-dialog .tagsinput {
        line-height: 32px;
    }

    .portax-dialog .tagsinput .tag {
        line-height: 24px;
        padding: 4px 20px 4px 8px;
        display: inline-flex;
        align-items: center;
    }

    .portax-dialog .tagsinput .tag .tag-remove {
        width: 24px;
        height: 24px;
        top: 0;
        bottom: 0;
        margin: auto 0;
    }

    .portax-dialog .tagsinput .tag .tag-remove:after,
    .portax-dialog .tagsinput .tag .tag-remove:before {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

    .portax-dialog .tagsinput div input,
    input.tag-input {
        font-size: 16px !important;
        min-height: 32px;
        padding: 4px !important;
        line-height: 24px;
    }

    /* Login page mobile */
    .login-form {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
    }

    .login-logo img {
        max-width: 160px;
    }

    .login-box {
        width: 100%;
        padding: 1.25rem;
    }

    /* Noauth pages (forgot password, etc.) - override inline width */
    .portax-box-square {
        width: 100%;
        max-width: 100%;
        padding: 1rem;
        box-sizing: border-box;
    }

    .portax-box-square > div[style*="width"] {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    .login-field input {
        padding: 0.5em;
    }

    .login-actions input[type="submit"] {
        padding: 0.5em;
    }

    .login-actions a {
        display: block;
        min-height: 44px;
        line-height: 44px;
        text-align: center;
    }

    /* Body margin padding on mobile */
    div.body-margin {
        padding: 0.5rem 0.5rem 2.4em;
        overflow-x: hidden;
    }

    /* Header mobile layout - override display: table from .portax-box and fixed height */
    div.portax-box.portax-header {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: center;
        padding: 0.5rem 0.75rem;
        height: auto !important;
        min-height: 56px;
        line-height: normal !important;
        gap: 0.75rem;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }

    .portax-header .header-left {
        float: none !important;
        width: auto !important;
        flex-shrink: 0;
    }

    .portax-header .header-left .portax-version {
        float: none !important;
        height: auto !important;
        min-height: auto;
        min-width: auto !important;
    }

    .portax-header .header-left .portax-logo img {
        max-height: 28px;
        width: auto;
    }

    .portax-header .header-right {
        float: none !important;
        width: auto !important;
        text-align: right;
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-left: auto;
        flex-shrink: 0;
        min-width: 0;
    }

    .portax-header .header-right > b {
        display: none;
    }

    .portax-header .switch-origin {
        display: none;
    }

    /* Larger header icons on mobile with proper touch targets */
    .portax-header .header-right > a {
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        width: 44px;
        height: 44px;
    }

    .portax-header .header-right span.header-tool {
        font-size: 1.75rem;
    }

    /* Hamburger in header-right - shares flex alignment with icons */
    .portax-header .header-right > button.menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        line-height: 1;
        border: none;
        background: transparent;
    }

    /* Larger hamburger icon on mobile */
    .portax-header .hamburger-icon {
        width: 28px;
        height: 3px;
        line-height: 0;
        vertical-align: middle;
    }

    .portax-header .hamburger-icon::before,
    .portax-header .hamburger-icon::after {
        width: 28px;
        height: 3px;
    }

    .portax-header .hamburger-icon::before {
        top: -8px;
    }

    .portax-header .hamburger-icon::after {
        top: 8px;
    }

    /* Shared dropdown container styles - main menu and static submenu */
    .menu-top-level > ul.main-menu,
    div.submenu > div > div.submenu-list {
        display: none;
        position: fixed;
        left: 1rem;
        right: 1rem;
        background: var(--bg-color);
        border: 1px solid var(--elem-border);
        border-radius: 8px;
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
        padding: 0.5rem 0;
        overflow-y: auto;
    }

    /* Main menu position */
    .menu-top-level > ul.main-menu {
        top: 64px;
        z-index: 1000;
        margin: 0;
        max-height: 70vh;
    }

    .menu-top-level > ul.main-menu.open {
        display: block;
    }

    /* Remove menu level borders and padding on mobile */
    .menu-level,
    div.menu-level,
    div.menu,
    div.submenu > div {
        border-top: none !important;
        border-bottom: none !important;
        padding: 0;
    }

    /* Menu items base styling */
    /* Reset display:contents from desktop for all submenu-active items */
    .menu-top-level ul.main-menu li.submenu-active {
        display: block;
    }

    /* All menu items - no padding on li */
    .menu-top-level ul.main-menu > li {
        display: block;
        margin: 0;
    }

    /* Shared menu item styles - main menu and static submenu */
    .menu-top-level ul.main-menu > li > a,
    div.submenu > div > div.submenu-list > a.link {
        display: flex;
        align-items: center;
        padding: 0 1rem;
        margin: 0 0.5rem;
        min-height: 48px;
        font-size: 16px;
        line-height: 1.4;
        box-sizing: border-box;
        border-radius: 8px;
        color: var(--primary-color);
        text-decoration: none;
    }

    .menu-top-level ul.main-menu > li > a:hover,
    .menu-top-level ul.main-menu > li > a:active,
    div.submenu > div > div.submenu-list > a.link:hover,
    div.submenu > div > div.submenu-list > a.link:active {
        background: var(--hilite-color);
    }

    /* Active link highlight - exclude parents when nested child is active */
    .menu-top-level ul.main-menu > li:not(:has(.menu-level .link-active)) > a.link-active {
        background: var(--secondary-bg-color);
    }

    .menu-top-level div.menu-level ul.main-menu > li > a:hover,
    .menu-top-level div.menu-level ul.main-menu > li > a.link-active:hover {
        background: var(--hilite-color);
    }

    /* Items with submenus - hide the ::after, use .menu-expand span instead */
    .menu-top-level li.has-submenu > a::after {
        display: none;
    }

    /* Ensure li.has-submenu is positioned for absolute child */
    .menu-top-level li.has-submenu {
        position: relative;
    }

    /* Expand button - large tap target with smaller visible circle */
    /* Use fixed top to stay aligned with anchor row, not li which grows with submenu */
    .menu-top-level li.has-submenu > .menu-expand {
        position: absolute;
        right: 0.5rem;
        top: 0;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    /* Visible circle - smaller than tap target */
    .menu-top-level li.has-submenu > .menu-expand::before {
        content: '';
        position: absolute;
        width: 2rem;
        height: 2rem;
        background: var(--hilite-color);
        border: 1px solid var(--elem-border);
        border-radius: 50%;
        transition: background 0.15s ease;
    }

    .menu-top-level li.has-submenu > .menu-expand:active::before {
        background: var(--secondary-bg-color);
    }

    .menu-top-level li.has-submenu > .menu-expand::after {
        content: '\f078';
        font-family: FontAwesome;
        font-size: 0.75rem;
        transition: transform 0.2s ease;
        position: relative;
        z-index: 1;
    }

    /* Chevron rotates when expanded (XOR: active-not-toggled OR toggled-not-active) */
    .menu-top-level li.has-submenu.submenu-active:not(.submenu-expanded) > .menu-expand::after,
    .menu-top-level li.has-submenu.submenu-expanded:not(.submenu-active) > .menu-expand::after {
        transform: rotate(180deg);
    }

    /* Nested menu levels - accordion style with max-height transition */
    /* Include .submenu-active selectors to override desktop specificity */
    .menu-top-level > ul.main-menu > li > .menu-level,
    .menu-top-level > ul.main-menu > li.submenu-active > .menu-level,
    .menu-top-level .menu-level .menu-level,
    .menu-top-level .menu-level li.submenu-active > .menu-level {
        display: block;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease-out;
        padding: 0;
        margin: 0;
        border: none;
        position: static;
    }

    /* Expanded: active (not toggled) OR toggled (not active) - XOR logic */
    .menu-top-level > ul.main-menu > li.submenu-active:not(.submenu-expanded) > .menu-level,
    .menu-top-level > ul.main-menu > li.submenu-expanded:not(.submenu-active) > .menu-level,
    .menu-top-level .menu-level li.submenu-active:not(.submenu-expanded) > .menu-level,
    .menu-top-level .menu-level li.submenu-expanded:not(.submenu-active) > .menu-level {
        max-height: 500px;
        transition: max-height 0.3s ease-in;
        border: none;
        padding: 0;
        margin: 0;
    }

    .menu-top-level li > .menu-level > ul.main-menu {
        display: block;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    /* Indent nested levels via padding on anchors for full-width hover */
    .menu-top-level .menu-level ul.main-menu > li > a {
        padding-left: 2rem;
    }

    .menu-top-level .menu-level .menu-level ul.main-menu > li > a {
        padding-left: 3rem;
    }

    .menu-top-level .menu-level .menu-level .menu-level ul.main-menu > li > a {
        padding-left: 4rem;
    }

    /* Hide empty list items (placeholders without links) */
    .menu-top-level ul.main-menu > li:not(:has(> a)) {
        display: none;
    }

    /* Hide Cables, Tools, and DHCP menu items on mobile - not mobile-friendly */
    .menu-top-level ul.main-menu > li[data-path="Cables"],
    .menu-top-level ul.main-menu > li[data-path="Tools"],
    .menu-top-level ul.main-menu > li[data-path="DHCP"] {
        display: none;
    }

    /* Admin menu - hide all sub-items except specific paths */
    .menu-top-level ul.main-menu > li[data-path^="Admin/"] {
        display: none;
    }

    /* Admin menu - show specific mobile-friendly paths */
    .menu-top-level ul.main-menu > li[data-path="Admin/System"],
    .menu-top-level ul.main-menu > li[data-path="Admin/System/DHCP"],
    .menu-top-level ul.main-menu > li[data-path="Admin/System/Users"],
    .menu-top-level ul.main-menu > li[data-path="Admin/System/Groups"],
    .menu-top-level ul.main-menu > li[data-path="Admin/Firmware"],
    .menu-top-level ul.main-menu > li[data-path="Admin/Services"],
    .menu-top-level ul.main-menu > li[data-path="Admin/Services/Basic"],
    .menu-top-level ul.main-menu > li[data-path="Admin/Services/Packages"],
    .menu-top-level ul.main-menu > li[data-path="Admin/Inventory"] {
        display: block;
    }

    /* DHCP log table styling - specificity beats .portax-pager-wrapper table.rrplain:has(caption) tfoot */
    .portax-pager-wrapper table.rrplain.dhcplog:has(caption) > tfoot,
    .portax-pager-wrapper table.rrplain.dhcplog > tfoot,
    table.rrplain.dhcplog > tfoot {
        display: none;
    }

    table.rrplain.dhcplog > caption {
        border-radius: 4px 4px 0 0;
    }

    /* tbody gets bottom border and rounded corners when tfoot is hidden */
    table.rrplain.dhcplog > tbody {
        border-bottom: 1px solid var(--elem-border) !important;
        border-radius: 0 0 8px 8px !important;
    }

    /* Round bottom corners on caption when no rows (empty tbody) */
    table.rrplain.dhcplog:not(:has(tbody > tr.portax-table-row)) > caption {
        border-radius: 4px;
        border-bottom: 1px solid var(--elem-border);
    }

    table.rrplain.dhcplog:not(:has(tbody > tr.portax-table-row)) > tbody {
        display: none;
    }

    /* Hide footer on mobile */
    .portax-footer {
        display: none;
    }

    /* Submenu (subscriber tabs) - dropdown style */
    div.submenu > div {
        padding: 0;
        position: relative;
    }

    div.submenu > div > .submenu-toggle {
        margin: 0.5rem 0;
    }

    /* Static submenu position */
    div.submenu > div > div.submenu-list {
        top: 56px;
        z-index: 999;
        max-height: 70vh;
    }

    div.submenu > div > div.submenu-list.open {
        display: block;
    }

    div.submenu > div > div.submenu-list > hr.submenu-separator {
        display: block;
        border: none;
        border-top: 1px solid var(--elem-border);
    }


    div.submenu > div > div.submenu-list > a.menu-item.link-active {
        background: var(--secondary-bg-color);
        color: var(--primary-color);
        font-weight: 600;
    }

    /* Submenu toggle button */
    .submenu-toggle {
        display: block;
        position: relative;
        padding: 0.75rem 3rem 0.75rem 1rem;
        background: var(--secondary-bg-color);
        color: var(--primary-color);
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        border-radius: 8px;
        border: none;
        width: 100%;
        margin-bottom: 0.5rem;
        text-align: left;
    }

    /* Hamburger icon in submenu toggle - absolutely positioned on right */
    .submenu-toggle .hamburger-icon {
        position: absolute;
        right: 1rem;
        top: 0;
        bottom: 0;
        margin: auto 0;
        width: 28px;
        height: 19px;
        background: transparent;
    }

    /* Top bar */
    .submenu-toggle .hamburger-icon::before {
        content: '';
        position: absolute;
        left: 0;
        width: 28px;
        height: 3px;
        background: var(--primary-color);
        top: 0;
        transition: transform 0.2s ease, top 0.2s ease;
    }

    /* Bottom bar */
    .submenu-toggle .hamburger-icon::after {
        content: '';
        position: absolute;
        left: 0;
        width: 28px;
        height: 3px;
        background: var(--primary-color);
        top: 16px;
        transition: transform 0.2s ease, top 0.2s ease;
    }

    /* Middle bar using box-shadow on top bar */
    .submenu-toggle .hamburger-icon::before {
        box-shadow: 0 8px 0 var(--primary-color);
    }

    /* Animation when submenu is open - X shape */
    .submenu-toggle.open .hamburger-icon::before {
        transform: rotate(45deg);
        top: 8px;
        box-shadow: none;
    }

    .submenu-toggle.open .hamburger-icon::after {
        transform: rotate(-45deg);
        top: 8px;
    }

    /* Hide detach component on mobile */
    div.submenu .detach {
        display: none;
    }

    /* Hide jstree path section and notes on mobile */
    .path-section,
    .notes-section {
        display: none;
    }

    /* Override portax-box display: table to block */
    div.portax-box,
    form.portax-box {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin-left: 0;
        margin-right: 0;
    }

    /* Error/info boxes - flex for vertical centering */
    div.portax-box-error,
    div.portax-box-info,
    div.subtitle > div.portax-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0.5rem 0.75rem;
				font-size: 16px;
    }

    /* Inner content of error/info boxes - reset margins */
    div.portax-box-error > div,
    div.portax-box-error > ul,
    div.portax-box-info > div,
    div.portax-box-info > ul,
    div.subtitle > div.portax-box > div,
    div.subtitle > div.portax-box > ul,
    div.subtitle > div.portax-box > span {
        margin: 0;
        width: auto;
    }

    /* Labels wrapping inputs - block with flex inside */
    div.portax-box label:not(.radio):not(.checkbox),
    form.portax-box label:not(.radio):not(.checkbox) {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        margin: 0;
    }

    /* Input inside label expands - reset all margins */
    div.portax-box label:not(.radio):not(.checkbox) > input,
    div.portax-box label:not(.radio):not(.checkbox) > select,
    form.portax-box label:not(.radio):not(.checkbox) > input,
    form.portax-box label:not(.radio):not(.checkbox) > select {
        flex: 1;
        min-width: 0 !important;
        width: auto !important;
        margin: 0 !important;
    }

    /* Specific fix for search input - remove any margin */
    div.portax-box input#q {
        margin: 0 !important;
    }

    /* Radio/checkbox - block, touch-friendly size */
    div.portax-box label.radio,
    div.portax-box label.checkbox {
        display: block;
        position: relative;
        min-height: 44px;
				line-height: 44px;
        padding-left: 32px;
        margin: 0;
    }

    /* Checkbox/radio span - vertical center */
    div.portax-box label.checkbox > span,
    div.portax-box label.radio > span {
        top: 0;
        bottom: 0;
        margin: auto 0;
    }

    /* Hide search icon in portax-box labels */
    div.portax-box label > span.fas {
        display: none;
    }

    /* Users/groups search forms - flex column to reorder button */
    #users-form > div.portax-box,
    #groups-form > div.portax-box {
        display: flex;
        flex-direction: column;
    }

    /* Move create button to end on mobile */
    #users-form > div.portax-box > button:first-child,
    #groups-form > div.portax-box > button:first-child {
        order: 10;
        margin-top: 0.5rem;
    }

    /* Checklist in forms - left align, inherit base checkbox styling */
    form.portax-box ul.checklist {
        margin-bottom: 0.5rem;
        text-align: left;
    }

    form.portax-box ul.checklist > li {
        text-align: left;
    }

    /* Checkbox labels - spread across full width */
    .checkbox-labels {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    /* Submit button wrapper span - block full width (exclude radio-group) */
    div.portax-box > div > span:not(.radio-group) {
        display: block;
        width: 100%;
    }

    /* Float containers - block */
    div.portax-box div.f-l,
    div.portax-box div.f-r,
    div.f-l,
    div.f-r {
        display: block;
        width: 100%;
        float: none;
    }

    /* Span inside float containers - flex to keep inline elements together */
    div.f-l > span,
    div.portax-box div.f-l > span {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /* Labels inside f-l spans - flex to fill available space */
    div.f-l > span > label:not(.radio):not(.checkbox),
    div.portax-box div.f-l > span > label:not(.radio):not(.checkbox) {
        flex: 1;
        min-width: 0;
        margin-bottom: 0;
    }

    /* Checkbox inside f-l - match select height, not full touch target */
    div.f-l > span > label.checkbox,
    div.portax-box div.f-l > span > label.checkbox {
        line-height: 36px;
    }

    /* Radio group - full width, spread across on mobile */
    div.portax-box .radio-group {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        width: 100%;
        margin: 0;
    }

    /* Radio labels in group - horizontal alignment */
    div.portax-box .radio-group label.radio {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        margin: 0;
    }

    /* Radio span - vertically center in 44px container (span is 24px, so top = (44-24)/2 = 10px) */
    div.portax-box .radio-group label.radio > span {
        top: 10px;
        bottom: auto;
    }

    /* Form containers inside portax-box - full width */
    div.portax-box > form,
    div.portax-box > #seldiv,
    div.portax-box > div.search-row,
    div.portax-box > div.f-l,
    div.portax-box > div.f-r {
        display: block;
        width: 100%;
        margin-bottom: 0;
    }

    /* seldiv children and inline elements - block on mobile */
    #seldiv > div,
    .seldiv-inline {
        display: block;
        width: 100%;
        margin-bottom: 0.5rem;
    }

    /* Search rows - flex column on mobile */
    div.portax-box > div.search-row,
    div.portax-box > div.search-row + hr.form-div + div.search-row {
        display: flex;
        flex-direction: column;
        margin: 0;
    }

    div.portax-box > div.search-row > *:not(:last-child) {
        margin-bottom: 0.5rem;
    }

    /* Labels in seldiv */
    #seldiv label:not(.radio):not(.checkbox) {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        margin-bottom: 0.5rem;
    }

    /* Text inputs in seldiv - general rule */
    #seldiv input[type="text"] {
        width: 100%;
    }

    #seldiv label:not(.radio):not(.checkbox) > input,
    #seldiv label:not(.radio):not(.checkbox) > select {
        flex: 1;
        min-width: 0;
    }

    /* Selects in seldiv - full width */
    #seldiv select {
        display: block;
        width: 100%;
        margin-bottom: 0.5rem;
        box-sizing: border-box;
    }

    /* Input-button pairs (region selector) */
    .portax-box > span.portax-input-button,
    #selreg > span.portax-input-button {
        display: flex;
        width: 100%;
        margin: 0 0 0 0;
    }

    span.portax-input-button button {
        flex-shrink: 0;
        min-height: 44px;
    }

    span.portax-input-button input[type="text"] {
        flex: 1;
        min-width: 0;
    }

    /* Filters section */
    #filters form {
        display: block;
    }

    #filters .filter-or {
        display: block;
        text-align: center;
        margin-bottom: 0.5rem;
    }

    #filters select,
    #filters input[type="button"] {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    #filters label.checkbox {
        width: auto;
    }

    /* Form dividers */
    hr.form-div {
        margin: 0.75rem 0;
    }

    /* Interface select section */
    div.select-interfaces {
        display: block;
        margin-top: 0.5rem;
    }

    /* ========================================
       Simplified Search Forms
       Must come AFTER general mobile layout rules
       ======================================== */

    /* Services basic search form - flex column layout on mobile */
    #services > div.portax-box,
    #services-form {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    #services-form label {
        flex-wrap: wrap;
    }

    /* All selects in search forms - full width, force new line */
    #services-form select,
    form#search select {
        flex-basis: 100%;
        width: 100%;
    }

    /* Hide search form toggle button (no longer needed) */
    form#search > .search-form-toggle,
    .search-form-toggle {
        display: none;
    }

    /* Show first portax-box with simplified layout */
    form#search > div.portax-box:first-of-type {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem;
    }

    /* Hide second portax-box (device-selector) by default on endpoints (revealed via filters toggle) */
    form#search > div.portax-box:not(:first-of-type) {
        display: none;
    }

    /* Stack portax-box containers without gaps - rounded only on outer edges */
    form#search > div.portax-box {
        margin-bottom: 0;
    }

    /* Default (filters closed): all corners rounded */
    form#search > div.portax-box {
        border-radius: 4px;
    }

    /* Filters open: first box has top corners, last has bottom corners */
    form#search.filters-open > div.portax-box:first-of-type {
        border-radius: 4px 4px 0 0;
    }

    form#search.filters-open > div.portax-box:last-of-type {
        border-radius: 0 0 4px 4px;
    }

    /* Single portax-box keeps all corners rounded even when open */
    form#search.filters-open > div.portax-box:only-of-type {
        border-radius: 4px;
    }

    /* No margin after search form, spacing handled by following content */
    form#search {
        margin-bottom: 0;
    }

    /* Spacing between search form and listing content */
    form#search + #listing,
    form#search + div,
    form#search + script + #listing,
    form#search + script + div {
        margin-top: 0.5rem;
    }

    /* In second portax-box (endpoints page), hide device input and submit */
    form#search > div.portax-box:not(:first-of-type) #seldiv > #selff,
    form#search > div.portax-box:not(:first-of-type) #seldiv > #seldev {
        display: none;
    }

    /* Hide advanced filters in first box */
    form#search select#a,
    form#search hr.form-div,
    form#search div.f-l,
    form#search div.search-row:not(:first-of-type),
    form#search div.search-row > label:first-child,
    form#search div.search-row label > span.fas,
    #filters {
        display: none;
    }

    /* Search inputs - flexible width */
    form#search input#q,
    form#search input#ff {
        flex: 1;
        min-width: 120px;
        padding: 0.5rem;
        margin: 0;
    }

    /* Submit button */
    form#search input[type="submit"] {
        padding: 0.5rem 1rem;
        margin: 0;
    }

    /* seldiv in search form - vertical stack layout, no gap */
    form#search > div.portax-box #seldiv {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    /* Hide all seldiv children except device input (#selff) and submit button (#seldev) */
    form#search > div.portax-box #seldiv > input[type="hidden"],
    form#search > div.portax-box #seldiv > #seltype,
    form#search > div.portax-box #seldiv > #selmod,
    form#search > div.portax-box #seldiv > .select-interfaces,
    form#search > div.portax-box #seldiv > hr.form-div,
    form#search > div.portax-box #seldiv > div.seldiv-inline,
    form#search > div.portax-box #seldiv > #seldev > input[type="reset"],
    form#inventory-form > div.portax-box #seldiv > #seldev > input[type="reset"],
    form#search > div.portax-box #seldiv > #filters,
    form#search > div.portax-box #seldiv > #selreg {
        display: none;
    }

    /* Re-show device input and submit button - full width, stacked */
    form#search > div.portax-box #seldiv > #selff {
        display: block;
        width: 100%;
        margin-bottom: 0.5rem;
    }

    form#search > div.portax-box #seldiv > #seldev {
        display: block;
        width: 100%;
        margin-bottom: 0;
    }

    /* Region input - hide tree button only */
    form#search > div.portax-box #seldiv > #selreg button#region_tree {
        display: none;
    }

    form#search > div.portax-box #seldiv > #selreg input#region {
        width: 100%;
        min-height: 44px;
        padding: 0.5rem;
        box-sizing: border-box;
        border-radius: 4px;
    }

    /* Device input wrapper - with chevron toggle */
    form#search > div.portax-box #seldiv > #selff .search-input-wrapper {
        display: flex;
        width: 100%;
        align-items: stretch;
    }

    form#search > div.portax-box #seldiv > #selff input#ff {
        flex: 1;
        min-width: 0;
        padding: 0.5rem;
        box-sizing: border-box;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    /* Chevron toggle for #selff */
    #seldiv > #selff .search-filters-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        flex-shrink: 0;
        padding: 0 1rem;
        background: var(--input-background);
        border: 1px solid var(--elem-border);
        border-left: none;
        border-radius: 0 3px 3px 0;
        cursor: pointer;
    }

    #seldiv > #selff .chevron-icon {
        display: block;
        width: 8px;
        height: 8px;
        border-right: 2px solid var(--primary-color);
        border-bottom: 2px solid var(--primary-color);
        transform: rotate(45deg);
        margin-top: -2px;
        transition: transform 0.2s ease;
    }

    #seldiv > #selff .search-filters-toggle.open .chevron-icon {
        transform: rotate(-135deg);
        margin-top: 2px;
    }

    /* Submit button - full width */
    form#search > div.portax-box #seldiv > #seldev input[type="submit"] {
        width: 100%;
        padding: 0.5rem 1rem;
    }

    /* Hide internal submit button when form has its own */
    .device-selector #seldev input[type="submit"] {
        display: none;
    }

    /* Hide device label on mobile */
    form#search > div.portax-box #seldiv > #selff > label {
        display: none;
    }

    /* Admin Inventory form - no margin, spacing handled by content */
    #inventory-form {
        margin-bottom: 0;
    }

    /* Spacing between inventory form and content */
    #inventory-form + #devices {
        margin-top: 0.5rem;
    }

    /* Admin Inventory form - simplified mobile layout */
    #inventory-form > div.portax-box {
        display: block;
        padding: 0.5rem;
    }

    /* Hide standalone Filters button on mobile */
    #inventory-form > div.portax-box > button.search-filters-toggle {
        display: none;
    }

    /* Wrapper divs - full width block */
    #inventory-form > div.portax-box > div {
        display: block;
        width: 100%;
    }

    /* Hide advanced elements on mobile */
    #inventory-form hr.form-div,
    #inventory-form div.inline-block.float-left,
    #inventory-form div.inline-block.float-right input[type="reset"] {
        display: none;
    }

    /* seldiv in admin inventory - vertical stack, no gap */
    #inventory-form #seldiv {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    /* Hide all seldiv children except device input and submit button */
    #inventory-form #seldiv > input[type="hidden"],
    #inventory-form #seldiv > #selreg,
    #inventory-form #seldiv > #seltype,
    #inventory-form #seldiv > #selmod,
    #inventory-form #seldiv > .select-interfaces,
    #inventory-form #seldiv > hr.form-div,
    #inventory-form #seldiv > div.seldiv-inline,
    #inventory-form #seldiv > #filters {
        display: none;
    }

    /* Show device input and submit button - full width */
    #inventory-form #seldiv > #selff {
        display: block;
        width: 100%;
        margin-bottom: 0.5rem;
    }

    #inventory-form #seldiv > #seldev {
        display: block;
        width: 100%;
        margin-bottom: 0;
    }

    /* Device input wrapper - with chevron toggle */
    #inventory-form #seldiv > #selff .search-input-wrapper {
        display: flex;
        width: 100%;
        align-items: stretch;
    }

    #inventory-form #seldiv > #selff input#ff {
        flex: 1;
        min-width: 0;
        padding: 0.5rem;
        box-sizing: border-box;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    /* Hide device label */
    #inventory-form #seldiv > #selff > label {
        display: none;
    }

    /* Submit button inside seldiv - show on mobile (hidden on desktop), full width */
    #inventory-form #seldiv > #seldev input[type="submit"] {
        display: block;
        width: 100%;
        padding: 0.5rem 1rem;
    }

    /* Hide external button containers on mobile */
    #inventory-form > div.portax-box > div:last-child {
        display: none;
    }

    /* Admin Inventory modify - hide complex tabs on mobile */
    #inventory-tabs > ul > li:has(a[href="#tab-properties"]),
    #inventory-tabs > ul > li:has(a[href="#tab-meta"]),
    #inventory-tabs > ul > li:has(a[href="#tab-provisioning"]),
    #inventory-tabs > ul > li:has(a[href="#tab-snmp"]),
    #inventory-tabs > #tab-properties,
    #inventory-tabs > #tab-meta,
    #inventory-tabs > #tab-provisioning,
    #inventory-tabs > #tab-snmp {
        display: none;
    }

    /* Dialog forms with flex columns - stack vertically on mobile */
    .portax-dialog .flex {
        flex-direction: column;
        gap: 1rem;
    }

    .portax-dialog .flex > div {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0;
    }

    .portax-dialog .flex > div > button {
        margin: 0;
        min-height: 44px;
    }

    /* Dialog form labels - wrap selects to new line */
    .portax-dialog form .flex label.block {
        flex-wrap: wrap;
    }

    .portax-dialog form .flex label.block select {
        flex-basis: 100%;
        width: 100%;
    }

    /* Reset margin-top for radio/checkbox following label.block */
    label.block ~ label.radio,
    label.block:not(.select) ~ label.checkbox {
        margin-top: 0;
				display: inline-flex;
				align-items: center;
    }

    /* Checklist boxes - flex wrap on mobile */
    div.block.checklist.portax-box {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* CRM/Dialog grid system - stack columns vertically on mobile */
    div.portax-row {
        flex-direction: column;
    }

    /* Make all column width variants full width on mobile */
    div.portax-col,
    div.portax-col.portax-col-m,
    div.portax-col.portax-col-ml,
    div.portax-col.portax-col-l,
    div.portax-col.portax-col-xl,
    div.portax-col.portax-col-xxl {
        width: 100%;
    }

    /* Reset dialog padding on mobile */
    .portax-dialog,
    .flex ~ div.portax-dialog {
        padding: 0;
    }

    /* Alert filters form - simplified mobile */
    div#alert-filters.portax-box > form#search-form {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0;
    }

    /* Default: Hide everything except search input with chevron */
    div#alert-filters.portax-box > form#search-form > label,
    div#alert-filters.portax-box > form#search-form > select,
    div#alert-filters.portax-box > form#search-form > input.portax-save-alert-filters,
    div#alert-filters.portax-box > form#search-form > input.portax-reset-alert-filters,
    div#alert-filters.portax-box > form#search-form > input[type="hidden"],
    div#alert-filters.portax-box > form#search-form > script,
    div#alert-filters.portax-box .portax-trigger-filter-list,
    div#alert-filters.portax-box > #portax-filter-save-preset-dialog,
    div#alert-filters.portax-box > #portax-filter-preset-dialog {
        display: none;
    }

    /* Filters open state */
    div#alert-filters.portax-box > form#search-form.filters-open {
        flex-direction: column;
        align-items: stretch;
    }

    div#alert-filters.portax-box > form#search-form.filters-open > .region-wrapper,
    div#alert-filters.portax-box > form#search-form.filters-open > input.portax-reset-alert-filters,
    div#alert-filters.portax-box > form#search-form.filters-open > select#addFilters {
        display: flex;
    }

    div#alert-filters.portax-box > form#search-form.filters-open > .search-input-wrapper {
        order: 1;
    }

    div#alert-filters.portax-box > form#search-form.filters-open > .region-wrapper {
        order: 2;
        flex-wrap: wrap;
        margin-top: 0.5rem;
    }

    div#alert-filters.portax-box > form#search-form.filters-open > select#addFilters {
        order: 3;
        margin-top: 0.5rem;
    }

    div#alert-filters.portax-box > form#search-form.filters-open > input.portax-reset-alert-filters {
        order: 4;
        padding: 0.5rem 1rem;
        margin: 0;
        margin-top: 0.5rem;
    }

    /* Show filter list when filters open and has items */
    div#alert-filters.portax-box:has(form#search-form.filters-open) .portax-trigger-filter-list:has(li) {
        display: block;
        margin-top: 0.5rem;
    }

    div#alert-filters.portax-box .portax-trigger-filter-list ul.filter-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    div#alert-filters.portax-box .portax-trigger-filter-list ul.filter-list > li {
        min-height: 32px;
        line-height: 32px;
        padding: 0 0.5rem;
        font-size: 16px;
    }

    /* Region wrapper styling when open */
    div#alert-filters.portax-box > form#search-form.filters-open > .region-wrapper > label[for="region"] {
        width: 100%;
    }

    div#alert-filters.portax-box > form#search-form.filters-open > .region-wrapper > span.portax-input-button {
        flex: 1;
    }

    div#alert-filters.portax-box > form#search-form.filters-open > .region-wrapper > span.portax-input-button > input {
        flex: 1;
        border-radius: 3px;
    }

    div#alert-filters.portax-box > form#search-form.filters-open > .region-wrapper > span.portax-input-button > button {
        min-height: 44px;
        min-width: 44px;
    }

    /* ========================================
       Mobile Pager Card View
       ======================================== */

    /* Hide mobile-hidden pager columns */
    .pager-mobile-hide {
        display: none !important;
    }

    /* Pager wrapper spacing */
    .portax-pager-wrapper {
        margin-bottom: 0.5rem;
    }

    /* Table caption - attached to table with sharp bottom corners */
    .portax-pager-wrapper table.rrplain:has(caption) {
        width: 100%;
        display: block;
    }

    .portax-pager-wrapper table.rrplain > caption {
        caption-side: top;
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        font-weight: bold;
        color: var(--primary-color);
        background-color: var(--secondary-bg-color);
        padding: 0.5rem;
        margin-bottom: 0;
        border-radius: 8px 8px 0 0;
        border: 1px solid var(--elem-border);
        border-bottom: none;
        white-space: normal;
    }

    /* Table body with border - round bottom when no tfoot */
    .portax-pager-wrapper table.rrplain:has(caption) tbody {
        display: block;
        width: 100%;
        box-sizing: border-box;
        border: 1px solid var(--elem-border);
        border-top: none;
        border-radius: 0 0 8px 8px;
        overflow: hidden;
    }

    /* No round corners on tbody when tfoot present */
    .portax-pager-wrapper table.rrplain:has(caption):has(tfoot) tbody {
        border-bottom: none;
        border-radius: 0;
    }

    /* Rows inside captioned table - no individual card styling */
    .portax-pager-wrapper table.rrplain:has(caption) tbody tr.portax-table-row {
        border: none;
        border-radius: 0;
        box-shadow: none;
        margin-bottom: 0;
        border-bottom: 1px solid var(--elem-border);
    }

    .portax-pager-wrapper table.rrplain:has(caption) tbody tr.portax-table-row:last-child {
        border-bottom: none;
    }

    /* Footer with caption - round bottom, padding for breathing */
    .portax-pager-wrapper table.rrplain:has(caption) tfoot {
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin-top: 0;
        border: 1px solid var(--elem-border);
        border-top: none;
        border-radius: 0 0 8px 8px;
        padding: 0.5rem 0.5rem 0 0.5rem;
    }

    .portax-pager-wrapper table.rrplain:has(caption) tfoot tr.empty-table-footer td {
        padding: 1rem;
    }

    /* Hide table header on mobile */
    .portax-pager-wrapper table.rrplain thead {
        display: none;
    }

    /* Make table body display as block */
    .portax-pager-wrapper table.rrplain,
    .portax-pager-wrapper table.rrplain tbody {
        display: block;
        width: 100%;
    }

    /* Transform each row into a card */
    .portax-pager-wrapper table.rrplain tbody tr.portax-table-row {
        display: block;
        margin-bottom: 1rem;
        padding: 0;
        border: 1px solid var(--elem-border);
        border-radius: 8px;
        background: var(--bg-color);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        overflow: hidden;
    }

    .portax-pager-wrapper table.rrplain tbody tr.portax-table-row:last-child {
        margin-bottom: 0;
    }

    /* Transform each cell into a flex row */
    .portax-pager-wrapper table.rrplain tbody tr.portax-table-row > td {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 0.625rem 0.875rem;
        border-bottom: 1px solid var(--hilite-color);
        gap: 0.25rem;
        text-align: right;
				flex-wrap: wrap;
    }

    .portax-pager-wrapper table.rrplain tbody tr.portax-table-row > td a.portax-popup {
			font-size: initial;
		}

    .portax-pager-wrapper table.rrplain tbody tr.portax-table-row > td:last-child {
        border-bottom: none;
    }

    /* Label from data-label attribute - push to left */
    .portax-pager-wrapper table.rrplain tbody tr.portax-table-row > td::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-weight: 500;
        color: var(--blur-color);
        text-align: left;
        margin-right: auto;
    }

    /* Hide cells with empty data-label (checkbox, actions) */
    .portax-pager-wrapper table.rrplain tbody tr.portax-table-row > td[data-label=""] {
        justify-content: flex-end;
        background: var(--secondary-bg-color);
    }

    .portax-pager-wrapper table.rrplain tbody tr.portax-table-row > td[data-label=""]::before {
        display: none;
    }

    /* Selectable checkbox cell - move to card header */
    .portax-pager-wrapper table.rrplain tbody tr.portax-table-row > td.selectable {
        order: -1;
        border-bottom: 1px solid var(--elem-border);
    }

    /* Action buttons cell - move to card footer */
    .portax-pager-wrapper table.rrplain tbody tr.portax-table-row > td.action-buttons,
    .portax-pager-wrapper table.rrplain tbody tr.portax-table-row > td.pager-actions {
        order: 999;
        border-top: 1px solid var(--elem-border);
        border-bottom: none;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Buttons should be full width */
    .portax-pager-wrapper table.rrplain tbody tr.portax-table-row > td.action-buttons button,
    .portax-pager-wrapper table.rrplain tbody tr.portax-table-row > td.pager-actions input[type="button"] {
        flex: 1;
        min-width: calc(50% - 0.25rem);
    }

    /* Cell value alignment */
    .portax-pager-wrapper table.rrplain tbody tr.portax-table-row > td > *,
    .portax-pager-wrapper table.rrplain tbody tr.portax-table-row > td > span {
        text-align: right;
    }

    .portax-pager-wrapper table.rrplain tbody tr.portax-table-row > td > span.dhcp-restart-result {
			text-align: center;
		}

    /* Reset alignRight/alignLeft classes in card view - they break content alignment */
    .portax-pager-wrapper table.rrplain tbody tr.portax-table-row > td.alignRight,
    .portax-pager-wrapper table.rrplain tbody tr.portax-table-row > td.alignLeft,
    .portax-pager-wrapper table.rrplain tbody tr.portax-table-row > td .alignRight,
    .portax-pager-wrapper table.rrplain tbody tr.portax-table-row > td .alignLeft {
        text-align: left !important;
    }

    /* Icons should not spread - stay with content */
    .portax-pager-wrapper table.rrplain tbody tr.portax-table-row > td > span.fas,
    .portax-pager-wrapper table.rrplain tbody tr.portax-table-row > td > .fas {
        flex: none;
        margin-left: 0.25rem;
    }

    /* Grouped columns display */
    .portax-pager-wrapper table.rrplain tbody tr.portax-table-row > td.grouped {
        flex-direction: column;
        align-items: end;
        text-align: right;
        max-width: none;
        overflow: visible;
    }

    /* Reset max-width constraints for alert-note column */
    .portax-pager-wrapper table.rrplain tbody tr.portax-table-row > td.alert-note {
        max-width: none;
    }

    .portax-pager-wrapper table.rrplain tbody tr.portax-table-row > td.grouped::before {
        margin-bottom: 0.25rem;
    }

    .portax-pager-wrapper table.rrplain tbody tr.portax-table-row > td.grouped > * {
        /* text-align: left; */
    }

    /* Wrap groups - display as block elements */
    .portax-pager-wrapper table.rrplain tbody tr.portax-table-row > td .wrap-group {
        display: block;
    }

    /* Footer - compact inline layout */
    .portax-pager-wrapper table.rrplain tfoot {
        display: block;
        width: 100%;
        margin-top: 0.75rem;
        padding-bottom: 0;
    }

    .portax-pager-wrapper table.rrplain tfoot tr {
        display: block;
    }

    .portax-pager-wrapper table.rrplain tfoot td {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.5rem 0 0 0;
    }

    /* Pager navigation - inline */
    .portax-pager-wrapper .portax-pager-nav {
        float: none !important;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }

    .portax-pager-wrapper .portax-pager-nav a[role="button"] {
        padding: 0.25rem 0.5rem;
    }

    /* Filter section - inline */
    .portax-pager-wrapper div.portax-pager-filter {
        float: none !important;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.25rem 0.5rem;
        padding: 0 !important;
        flex: 1;
        min-width: 150px;
    }

    .portax-pager-wrapper div.portax-pager-filter input.text,
    .portax-pager-wrapper div.portax-pager-filter input.search {
        flex: 1;
        min-width: 100px;
        min-height: 32px;
        padding: 0.25rem 0.5rem;
        box-sizing: border-box;
    }

    .portax-pager-wrapper div.portax-pager-filter a[role="button"] {
        font-size: 0.875rem;
        white-space: nowrap;
    }

    /* Tools section - full width, justified */
    .portax-pager-wrapper .portax-pager-nav-tools {
        float: none !important;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.25rem 0.75rem;
        font-size: 0.875rem;
        width: 100%;
        order: 10;
    }

    .portax-pager-wrapper .portax-pager-nav-tools span.timestamp {
        font-size: 0.75rem;
        color: var(--blur-color);
    }

    .portax-pager-wrapper .portax-pager-nav-tools a {
        white-space: nowrap;
        font-size: 1rem;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Disabled/obsolete rows styling */
    .portax-pager-wrapper table.rrplain tbody tr.portax-table-row.disabled {
        opacity: 0.6;
    }

    /* Alert level indicators */
    .portax-pager-wrapper table.rrplain tbody tr.portax-table-row.alert-pending {
        border-left: 4px solid var(--warning-color, #fbbf24);
    }

    .portax-pager-wrapper table.rrplain tbody tr.portax-table-row.CRIT {
        border-left: 4px solid var(--bg-color-error);
    }

    .portax-pager-wrapper table.rrplain tbody tr.portax-table-row.WARN {
        border-left: 4px solid var(--orange);
    }

    .portax-pager-wrapper table.rrplain tbody tr.portax-table-row.INFO {
        border-left: 4px solid var(--blue);
    }

    /* Pulled (expandable detail) rows - hidden by default */
    .portax-pager-wrapper table.rrplain tbody tr.pulled {
        display: none;
    }

    /* Parent card when expanded - remove bottom radius and margin */
    .portax-pager-wrapper table.rrplain tbody tr.portax-pullable.portax-pullable-pulled {
        border-radius: 8px 8px 0 0;
        margin-bottom: 0;
    }

    /* Pulled rows when expanded */
    .portax-pager-wrapper table.rrplain tbody tr.portax-pullable.portax-pullable-pulled + tr.pulled {
        display: block;
        margin-top: 0;
        margin-bottom: 1rem;
        border: 1px solid var(--elem-border);
        border-top: none;
        border-radius: 0 0 8px 8px;
    }

    /* Pulled rows inherit alert level border from parent */
    .portax-pager-wrapper table.rrplain tbody tr.portax-pullable.portax-pullable-pulled.CRIT + tr.pulled {
        border-left: 4px solid var(--bg-color-error);
    }

    .portax-pager-wrapper table.rrplain tbody tr.portax-pullable.portax-pullable-pulled.WARN + tr.pulled {
        border-left: 4px solid var(--orange);
    }

    .portax-pager-wrapper table.rrplain tbody tr.portax-pullable.portax-pullable-pulled.INFO + tr.pulled {
        border-left: 4px solid var(--blue);
    }

    .portax-pager-wrapper table.rrplain tbody tr.pulled > td {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 0.75rem;
    }

    /* Graph rows */
    .portax-pager-wrapper table.rrplain tbody tr:has(td.if-graph) {
        display: block;
        margin-top: -0.5rem;
        margin-bottom: 1rem;
    }

    .portax-pager-wrapper table.rrplain tbody td.if-graph {
        display: block;
        padding: 0.5rem;
        border: 1px solid var(--elem-border);
        border-top: none;
        border-radius: 0 0 8px 8px;
        background: var(--secondary-bg-color);
    }

    /* Empty table footer */
    .portax-pager-wrapper table.rrplain tfoot tr.empty-table-footer td {
        justify-content: center;
        text-align: center;
        padding: 1rem 0.5rem;
        color: var(--blur-color);
    }

    /* Hide internal id column on mobile */
    .portax-pager-wrapper table.rrplain tbody tr.portax-table-row > td.id:not(.pn):not(.unit_id) {
        display: none;
    }

    /* MAC address styling in cards */
    .portax-pager-wrapper table.rrplain tbody tr.portax-table-row span.ma {
        font-family: var(--monospace-font);
        word-break: break-all;
    }

    /* IP address styling in cards */
    .portax-pager-wrapper table.rrplain tbody tr.portax-table-row td.cpe_ip,
    .portax-pager-wrapper table.rrplain tbody tr.portax-table-row td.device_ip {
        word-break: break-all;
    }

    /* Clickable/pullable row indicator */
    .portax-pager-wrapper table.rrplain tbody tr.portax-pullable,
    .portax-pager-wrapper table.rrplain tbody tr.portax-popup {
        cursor: pointer;
    }

    .portax-pager-wrapper table.rrplain tbody tr.portax-pullable:active,
    .portax-pager-wrapper table.rrplain tbody tr.portax-popup:active {
        background: var(--hilite-color);
    }

    /* RADIUS value styling */
    div.radius-value {
        padding: 0.125rem 0;
        word-break: break-word;
    }

    /* ========================================
       Alert Detail Page
       ======================================== */

    div.alert-detail {
        margin-top: 0;
        padding: 0.5rem;
    }

    div.alert-detail > div {
        padding: 0.5rem 0;
    }

    div.alert-detail > div.alert-control > div {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    div.alert-detail > div.alert-control > div > div {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    div.alert-detail a[download] {
        display: block;
        min-height: 44px;
        padding: 0.5rem 1rem;
        text-align: center;
    }

    div.alert-detail select {
        padding: 0.5rem;
        width: 100%;
    }

    div.alert-detail input[type="text"],
    div.alert-detail textarea {
        padding: 0.5rem;
        width: 100%;
        box-sizing: border-box;
    }

    div.alert-detail textarea {
        min-height: 120px;
    }

    div.alert-detail textarea.alert-note.e-mail {
        min-height: 200px;
    }

    div.alert-detail label.block {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    div.alert-detail div.template-action {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
    }

    div.alert-detail div.message {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    /* Disable hilite background on mobile - causes dark background in dark mode */
    div.alert-detail div.hilite {
        background: transparent;
    }

    /* Changelog in alert detail */
    div[id^="changelog"] .portax-pager-wrapper {
        margin: 0;
    }

    /* ========================================
       jQuery UI Tabs - Vertical Stack
       ======================================== */

    div.simple-tabs.ui-tabs > ul.ui-tabs-nav {
        display: flex;
        flex-direction: column;
        padding: 0;
        border: none;
        background: transparent;
        touch-action: pan-y;
    }

    div.simple-tabs.ui-tabs > ul.ui-tabs-nav > li.ui-tab {
        display: block;
        float: none;
        margin: 0;
        padding: 0;
        border-radius: 0;
        border: 1px solid var(--elem-border);
        border-bottom: none;
        touch-action: pan-y;
    }

    div.simple-tabs.ui-tabs > ul.ui-tabs-nav > li.ui-tab:first-child {
        border-radius: 8px 8px 0 0;
    }

    div.simple-tabs.ui-tabs > ul.ui-tabs-nav > li.ui-tab:last-child {
        border-radius: 0 0 8px 8px;
        border-bottom: 1px solid var(--elem-border);
    }

    div.simple-tabs.ui-tabs > ul.ui-tabs-nav > li.ui-tab:only-child {
        border-radius: 8px;
    }

    div.simple-tabs.ui-tabs > ul.ui-tabs-nav > li.ui-tab > a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 0.75rem 1rem;
        min-height: 44px;
        box-sizing: border-box;
        text-align: center;
        touch-action: pan-y;
				font-size:16px;
    }

    div.simple-tabs.ui-tabs > ul.ui-tabs-nav > li.ui-tab.ui-tabs-active {
        background: var(--secondary-bg-color);
    }

    div.simple-tabs.ui-tabs > div.ui-tabs-panel {
        border: none;
        padding: 0.5rem 0;
    }

    /* ========================================
       Mobile Dialog (Settings, etc.)
       ======================================== */

    /* Full-screen dialog on mobile - !important needed to override jQuery UI inline styles */
    .ui-dialog.portax-dialog {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        overflow: hidden;
        z-index: 1100 !important;
    }

    /* Ensure dialog overlay covers viewport and is above header */
    .ui-widget-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: auto !important;
        height: auto !important;
        z-index: 1099 !important;
    }

    .ui-dialog.portax-dialog .ui-dialog-titlebar {
        flex-shrink: 0;
        border-radius: 4px;
				margin: 2px;
        min-height: 44px;
        font-size: 1rem;
        display: flex;
        align-items: center;
    }

    .ui-dialog.portax-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
        position: relative;
        top: auto;
        right: auto;
        width: 36px;
        height: 36px;
        margin: 0 0 0 auto;
    }

    .ui-dialog.portax-dialog .ui-dialog-content {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 1rem;
        box-sizing: border-box;
        width: 100%;
    }

    .ui-dialog.portax-dialog .ui-dialog-content > form {
        width: 100%;
        box-sizing: border-box;
    }

    .ui-dialog.portax-dialog .ui-dialog-content input[type="text"],
    .ui-dialog.portax-dialog .ui-dialog-content input.text,
    .ui-dialog.portax-dialog .ui-dialog-content textarea {
        display: block;
        width: 100%;
        box-sizing: border-box;
        font-size: 16px !important;
    }

    .ui-dialog.portax-dialog .ui-dialog-content textarea {
        padding: 0.5rem;
    }

    .ui-dialog.portax-dialog .ui-dialog-content select,
    .ui-dialog.portax-dialog .ui-dialog-content select.portax-ui {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align-last: center;
    }

    .ui-dialog.portax-dialog .ui-dialog-content fieldset {
        margin: 0;
        padding: 0;
        border: none;
    }

    .ui-dialog.portax-dialog .ui-dialog-buttonpane {
        flex-shrink: 0;
        padding: 0.75rem 1rem;
        border-top: 1px solid var(--elem-border);
    }

    .ui-dialog.portax-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
        display: flex;
        gap: 0.5rem;
        width: 100%;
    }

    .ui-dialog.portax-dialog .ui-dialog-buttonpane button {
        flex: 1;
        margin: 0;
        min-height: 44px;
        font-size: 16px;
    }

    /* User settings form - stack columns */
    form#user-settings fieldset {
        margin: 0;
        padding: 0;
        border: none;
    }

    form#user-settings div.flex {
        flex-direction: column;
        gap: 0;
    }

    form#user-settings div.flex > div {
        width: 100%;
        padding: 0;
    }

    /* Remove dialog border on mobile */
    .ui-dialog.portax-dialog {
        border: none;
    }

    form#user-settings label.block {
        margin-bottom: 0.75rem;
    }

    form#user-settings input.text,
    form#user-settings select {
        width: 100%;
        box-sizing: border-box;
    }

    /* Confirm dialog forms (subscriber tools, etc.) */
    .portax-confirm-dialog {
        min-width: 0;
    }

    .ui-dialog.portax-confirm-dialog .ui-dialog-content {
        min-height: 0;
    }

    .ui-dialog.portax-confirm-dialog form label.block {
        display: block;
        margin-bottom: 0.75rem;
    }

    .ui-dialog.portax-confirm-dialog form label.block input.text,
    .ui-dialog.portax-confirm-dialog form label.block input[type="text"] {
        width: 100%;
        box-sizing: border-box;
        margin-top: 0.25rem;
    }

    .ui-dialog.portax-confirm-dialog form label.block span.help {
        display: block;
        font-size: 0.875rem;
        color: var(--blur-color);
        margin-top: 0.25rem;
    }

    .ui-dialog.portax-confirm-dialog form label.checkbox {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        min-height: 44px;
    }

    .ui-dialog.portax-confirm-dialog form select {
        width: 100%;
        box-sizing: border-box;
    }

    /* Pager control dialog (customize pager) */
    .ui-dialog.portax-dialog form > label.block select {
        width: 100%;
        box-sizing: border-box;
    }

    .ui-dialog.portax-dialog form > label.checkbox {
        min-height: 44px;
    }

    .ui-dialog.portax-dialog ul.checklist {
        margin: 0;
        padding: 0;
        max-height: none;
    }

    .ui-dialog.portax-dialog ul.checklist > li {
        min-height: 44px;
        padding: 0;
    }

    .ui-dialog.portax-dialog ul.checklist > li > label.checkbox {
        margin: 0;
    }

    /* ========================================
       Table-based Forms - Mobile Layout
       ======================================== */

    /* Stack table rows vertically */
    form table tr {
        display: flex;
        flex-direction: column;
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--elem-border);
    }

    form table td {
        display: block;
        width: 100%;
        text-align: left;
        padding: 0.25rem 0;
        box-sizing: border-box;
        min-height: 32px;
    }

    form table td:has(label.checkbox),
    form table td:has(label.radio) {
        display: flex;
        align-items: center;
    }

    form table td.portax-box {
        padding: 0.25rem 0;
    }

    /* Full width tables */
    div.body-margin table {
        width: 100%;
        margin: 0;
    }

    /* Full width form elements */
    div.body-margin input[type="text"],
    div.body-margin select,
    div.body-margin textarea {
        width: 100%;
        box-sizing: border-box;
        margin: 0;
    }

    /* Full width buttons and button-like elements */
    div.body-margin button,
    div.body-margin a.button,
    div.body-margin input[type="submit"],
    div.body-margin input[type="button"] {
        display: block;
        width: 100%;
        min-height: 44px;
        box-sizing: border-box;
        margin: 0;
    }

    /* Stack subscriber tools vertically */
    div.subscriber-tools,
    div.subscriber-tools > div {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    /* Hide empty divs that have no buttons rendered */
    div.subscriber-tools > div:not(:has(*)) {
        display: none;
    }

    div.subscriber-tools > div > a,
    div.subscriber-tools > div > form > input,
    div.subscriber-tools > div > button,
    div.subscriber-tools a > button {
        margin: 0;
    }

    div.subscriber-tools a.call-detach {
        text-decoration: none;
    }

    div.subscriber-tools a.button {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Fixed IP form - labels block on mobile */
    div.fixed-ip table td > label {
        display: block;
        font-weight: bold;
    }

    div.fixed-ip table td > label > input[type="text"],
    div.fixed-ip table td > label > select {
        display: block;
        width: 100%;
        margin-top: 0.25rem;
        box-sizing: border-box;
    }

    /* ========================================
       Telemetry Widget - Mobile Layout
       ======================================== */

    div.telemetry {
        min-height: auto;
        display: flex;
        flex-direction: column;
    }

    div.telemetry > div.telemetry-container {
        height: 200px;
        margin-bottom: 0;
        order: 1;
    }

    div.telemetry > time {
        position: static;
        order: 2;
        text-align: right;
        margin-bottom: 0.75rem;
    }

    div.telemetry > div.values {
        order: 3;
    }

    div.telemetry > div.refresh-response {
        order: 4;
    }

    div.telemetry > div.overlay {
        order: 0;
    }

    div.telemetry > div.loader {
        order: 0;
    }

    div.telemetry > div.values {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    div.telemetry > div.values > div.value {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        flex: none;
        min-width: 0;
        width: 100%;
        padding: 0.375rem 0;
        margin: 0;
        border: none;
        border-bottom: 1px solid var(--elem-border);
        border-radius: 0;
        text-align: left;
    }

    div.telemetry > div.values > div.value:last-child {
        border-bottom: none;
    }

    div.telemetry > div.values > div.value > label {
        order: -1;
        text-align: left;
        min-width: 0;
        flex: 1;
        font-size: 0.9375rem;
        color: var(--blur-color);
    }

    div.telemetry > div.values > div.value > span {
        text-align: right;
        font-size: 1rem;
        font-weight: 500;
        min-width: 0;
    }

    /* ========================================
       SNMP Data Table - Mobile Card Layout
       ======================================== */

    .snmp-table-wrapper {
        overflow: visible;
    }

    table.snmp-data {
        display: block;
        width: 100%;
    }

    table.snmp-data > thead {
        display: none;
    }

    table.snmp-data .snmp-index {
        display: none;
    }

    table.snmp-data > tbody {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    table.snmp-data > tbody > tr {
        display: block;
        background: var(--secondary-bg-color);
        border: 1px solid var(--elem-border);
        border-radius: 8px;
        padding: 0.5rem;
    }

    table.snmp-data > tbody > tr.disabled {
        opacity: 0.5;
    }

    table.snmp-data > tbody > tr > td {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0 1rem;
        padding: 0.375rem 0;
        border-bottom: 1px solid var(--elem-border);
        white-space: normal;
    }

    table.snmp-data > tbody > tr > td:last-child {
        border-bottom: none;
    }

    table.snmp-data > tbody > tr > td::before {
        content: attr(data-label);
        font-size: 0.9375rem;
        color: var(--blur-color);
        text-align: left;
        white-space: pre-line;
        grid-column: 1;
        grid-row: 1 / span 10;
        align-self: center;
    }

    table.snmp-data > tbody > tr > td > span.display-block {
        grid-column: 2;
        text-align: right;
    }

    /* Pulled/expandable rows */
    table.snmp-data > tbody > tr.pulled {
        background: var(--bg-color);
        padding: 0.75rem;
    }

    table.snmp-data > tbody > tr.pulled > td {
        display: block;
        border: none;
        padding: 0;
    }

    table.snmp-data > tbody > tr.pulled > td::before {
        display: none;
    }

    /* Pullable toggler button */
    button.pullable-toggler {
        margin-bottom: 0.5rem;
    }

    /* Varbind popup links - adequate touch target */
    a.portax-varbind-popup {
        display: inline-block;
        min-height: 32px;
        line-height: 32px;
    }

    /* Event queue styling */
    ul.legacyq {
        margin: 0 0 0.5rem 0;
        padding: 0.1rem;
        font-size: 0.9375rem;
        list-style: none;
    }

    /* ========================================
       Varbind Popup Dialog - Fullscreen
       ======================================== */

    .ui-dialog.portax-varbind-popup {
        min-width: 0 !important;
    }

    .ui-dialog.portax-varbind-popup .ui-dialog-content * {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Form inputs spacing - must come after div.body-margin rules */
    form.portax-box > input[type="text"] {
        margin-bottom: 0.25rem;
    }

    /* ========================================
       Autocomplete - Mobile Friendly
       ======================================== */

    .ui-autocomplete {
        max-width: calc(100vw - 2rem);
        max-height: 50vh;
        z-index: 1101 !important;
    }

    .ui-autocomplete .ui-menu-item {
        padding: 0;
    }

    .ui-autocomplete .ui-menu-item-wrapper {
        padding: 0.75rem 1rem;
        min-height: 44px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }

    /* ========================================
       Meta Data Store - Mobile Layout
       ======================================== */

    .portax-metadata-store > p {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .portax-metadata-store > p > label {
        display: block;
        width: 100%;
        margin: 0;
    }

    .portax-metadata-store > p > label > button {
        display: block;
        width: 100%;
        min-height: 44px;
        margin: 0;
        box-sizing: border-box;
        text-align: center;
    }

    .portax-metadata-store > p > label > select,
    .portax-metadata-store > p > label > select.portax-ui {
        display: block;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        text-align-last: center;
    }

    /* Meta form radio buttons - wrap on mobile */
    .meta-radio {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .meta-radio > label.block {
        width: 100%;
        flex-basis: 100%;
    }

    /* Map page - no footer on mobile, use full height */
    html:has(.map-wrapper) body {
        height: 100%;
    }

    /* Map page - match normal mobile body-margin padding */
    html:has(.map-wrapper) .body-margin {
        padding: 0.5rem !important;
    }

    /* Map toolbar button groups span full width on mobile */
    div.map-wrapper > div.leftColumn > div.toolbar > div.buttons > .button-group {
        width: 100%;
    }

    div.map-wrapper > div.leftColumn > div.toolbar > div.buttons > .button-group > input {
        float: none;
        width: auto;
    }

    div.map-wrapper > div.leftColumn > div.toolbar > div.buttons > .button-group > .groupedLeft {
        flex: 1 1 auto;
    }

    div.map-wrapper > div.leftColumn > div.toolbar > div.buttons > .button-group > .groupedRight {
        flex: 0 0 auto;
        aspect-ratio: 1;
    }

    /* Map toolbar: consistent width on mobile */
    div.map-wrapper > div.leftColumn > div.toolbar {
        min-width: 17.5rem;
    }

    /* Map toolbar: override desktop margin-bottom on input */
    div.map-wrapper > div.leftColumn > div.toolbar > .search-input-wrapper > input.search {
        margin-bottom: 0;
    }

    /* Map toolbar: toggle button needs fixed width (no text content) */
    div.map-wrapper > div.leftColumn > div.toolbar > .search-input-wrapper > .search-filters-toggle {
        display: flex;
        align-self: stretch;
        width: 2.75rem;
        padding: 0;
    }

    /* Map toolbar: hide buttons by default on mobile */
    div.map-wrapper > div.leftColumn > div.toolbar > div.buttons {
        display: none;
    }

    /* Map toolbar: show buttons when filters-open */
    div.map-wrapper > div.leftColumn > div.toolbar.filters-open > div.buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }

    div.map-wrapper > div.leftColumn > div.toolbar.filters-open > div.buttons > input {
        flex: 1 1 auto;
    }

    div.map-wrapper > div.leftColumn > div.toolbar.filters-open > div.buttons > .logger,
    div.map-wrapper > div.leftColumn > div.toolbar.filters-open > div.buttons > .clear {
        display: none;
    }

    /* Card body flex layout for button margins */
    .status-card-body {
        display: flex;
        flex-direction: column;
    }

    .status-card button.refresh {
        width: auto;
        margin: 0 0.5rem;
    }

    /* ========================================
       Search Filters Toggle (Mobile)
       ======================================== */

    /* Endpoints search: hide filters by default */
    form#search .search-row-primary .radio-group,
    form#search hr.form-div {
        display: none;
    }

    /* Always hide select#a label on mobile - never needed */
    form#search .search-row-primary > label:has(select#a) {
        display: none !important;
    }

    /* Always hide region tree button on mobile */
    #region_tree {
        display: none !important;
    }

    /* Search input wrapper: contains input + chevron toggle */
    form#search .search-input-wrapper,
    form#search-form .search-input-wrapper,
    div.toolbar > .search-input-wrapper {
        display: flex !important;
        flex: 1;
        min-width: 0;
        align-items: stretch;
    }

    form#search .search-input-wrapper input#q,
    form#search-form .search-input-wrapper input#q,
    div.toolbar > .search-input-wrapper > input.search {
        flex: 1;
        min-width: 0;
        padding: 0.5rem;
        margin: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        box-sizing: border-box;
    }

    /* Chevron toggle for search forms and toolbar */
    form#search .search-input-wrapper .search-filters-toggle,
    form#search-form .search-input-wrapper .search-filters-toggle,
    div.toolbar > .search-input-wrapper > .search-filters-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        flex-shrink: 0;
        padding: 0 1rem;
        background: var(--input-background);
        border: 1px solid var(--elem-border);
        border-left: none;
        border-radius: 0 3px 3px 0;
        cursor: pointer;
    }

    form#search .search-input-wrapper .chevron-icon,
    form#search-form .search-input-wrapper .chevron-icon,
    div.toolbar > .search-input-wrapper .chevron-icon {
        display: block;
        width: 8px;
        height: 8px;
        border-right: 2px solid var(--primary-color);
        border-bottom: 2px solid var(--primary-color);
        transform: rotate(45deg);
        margin-top: -2px;
        transition: transform 0.2s ease;
    }

    form#search .search-input-wrapper .search-filters-toggle.open .chevron-icon,
    form#search-form .search-input-wrapper .search-filters-toggle.open .chevron-icon,
    div.toolbar > .search-input-wrapper > .search-filters-toggle.open .chevron-icon {
        transform: rotate(-135deg);
        margin-top: 2px;
    }

    /* Search actions: full width submit button */
    form#search .search-actions {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    form#search .search-actions input[type="submit"] {
        order: 1;
        width: 100%;
    }

    /* CRM button - position last with vertical spacing */
    form#search .search-actions input[portax-role="crm"] {
        order: 2;
        width: 100%;
        margin-top: 0.5rem;
    }

    /* Toggle button - default style for other pages (interfaces, inventory) */
    .search-filters-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        padding: 0.5rem;
        margin-bottom: 0.5rem;
        background: var(--input-background);
        border: 1px solid var(--elem-border);
        border-radius: 8px;
        cursor: pointer;
        color: var(--blur-color);
    }

    .search-filters-toggle .fa-caret-down {
        transition: transform 0.2s ease;
    }

    .search-filters-toggle.open .fa-caret-down {
        transform: rotate(180deg);
    }

    /* When toggle is open, show the hidden filters */
    form#search.filters-open .search-row:not(.search-row-primary),
    form#search.filters-open div.search-row > label:first-child,
    form#search.filters-open div.f-l,
    form#search.filters-open select#c,
    form#inventory-form.filters-open > div:not(:first-of-type) {
        display: block;
    }

    form#search.filters-open > .portax-box:not(:first-of-type) {
        display: block;
        padding: 0.5rem;
        padding-top: 0;
        margin-top: 0;
    }

    /* Remove bottom padding from portax-box */
    form#search.filters-open > .portax-box {
        padding-bottom: 0 !important;
    }

    /* Remove margin between portax-boxes when filters open */
    form#search.filters-open > .portax-box {
        margin-bottom: 0;
    }

    form#search.filters-open .search-row-primary .radio-group {
        display: flex;
        width: 100%;
    }

    /* Style family selector (div.f-l / select#c) when filters open - stacked layout */
    form#search.filters-open div.f-l {
        display: block;
        width: 100%;
    }

    form#search.filters-open div.f-l > span:first-child {
        display: block;
        width: 100%;
    }

    form#search.filters-open div.f-l > span:first-child > label:first-child {
        display: block;
        width: 100%;
        margin-bottom: 0.25rem;
    }

    form#search.filters-open select#c {
        display: block;
        width: 100% !important;
        margin-top: 0.25rem;
        box-sizing: border-box;
    }

    /* Verbose checkbox below select - left aligned */
    form#search.filters-open div.f-l > span:first-child > label.checkbox {
        display: block;
        position: relative;
        min-height: 44px;
        line-height: 44px;
    }

    form#search.filters-open div.f-l > span:first-child > label.checkbox > span {
        top: 0;
        bottom: 0;
        margin: auto 0;
    }

    /* Status filter - stacked layout */
    form#search.filters-open .status-filter {
        display: block;
        width: 100%;
    }

    form#search.filters-open .status-label {
        display: block;
    }

    form#search.filters-open .status-selects {
        display: flex;
        gap: 0.5rem;
        width: 100%;
    }

    form#search.filters-open .status-selects select {
        flex: 1;
    }

    /* Status checkboxes - justified across full width */
    form#search.filters-open .status-flags {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 0;
    }

    form#search.filters-open .status-flags > label.checkbox {
        display: inline-flex;
        flex-direction: row-reverse;
        align-items: center;
        gap: 0.5rem;
        min-height: 44px;
				line-height: initial;
        margin-left: 0;
        padding-left: 0;
    }

    form#search.filters-open .status-flags > label.checkbox > span,
    form#search.filters-open #filters .checkbox-disabled > span,
    #inventory-form.filters-open #filters .checkbox-disabled > span {
        position: relative;
        flex-shrink: 0;
        margin: 0;
    }

    /* Style the revealed seldiv filters for mobile */
    form#search.filters-open #seldiv,
    #inventory-form.filters-open #seldiv {
        display: flex;
        flex-direction: column;
        gap: 0; /* Use margin-top on children for spacing */
    }

    form#search.filters-open #seldiv > div,
    form#search.filters-open > div.portax-box #seldiv > #selreg,
    #inventory-form.filters-open #seldiv > div,
    #inventory-form.filters-open #seldiv > #selreg {
        display: block;
        width: 100%;
    }

    /* Remove all margins from seldiv-inline and child selects */
    form#search.filters-open #seldiv > div.seldiv-inline,
    form#search.filters-open #seldiv > div.seldiv-inline select,
    #inventory-form.filters-open #seldiv > div.seldiv-inline,
    #inventory-form.filters-open #seldiv > div.seldiv-inline select {
        margin-top: 0;
        margin-bottom: 0;
    }

    /* Reorder seldiv elements - shared for form#search and #inventory-form */
    form#search.filters-open > div.portax-box #seldiv > #selff,
    #inventory-form.filters-open #seldiv > #selff {
        order: 1;
        margin-top: 0;
        margin-bottom: 0;
    }

    form#search.filters-open > div.portax-box #seldiv > #seldev,
    #inventory-form.filters-open #seldiv > #seldev {
        order: 2;
        margin-top: 0.5rem;
        margin-bottom: 0;
    }

    form#search.filters-open #seldiv > #selreg,
    #inventory-form.filters-open #seldiv > #selreg {
        order: 3;
        margin-top: 0.5rem;
    }

    form#search.filters-open #seldiv > #seltype,
    #inventory-form.filters-open #seldiv > #seltype {
        order: 4;
        margin-top: 0.5rem;
    }

    form#search.filters-open #seldiv > #selmod,
    #inventory-form.filters-open #seldiv > #selmod {
        order: 5;
        margin-top: 0.5rem;
    }

    form#search.filters-open #seldiv > div.seldiv-inline:not(#selff):not(#seldev):not(#selreg),
    #inventory-form.filters-open #seldiv > div.seldiv-inline:not(#selff):not(#seldev):not(#selreg) {
        order: 6;
        margin-top: 0.5rem;
    }

    /* Show type, model, and status selectors when filters open */
    form#search.filters-open > div.portax-box #seldiv > #seltype,
    form#search.filters-open > div.portax-box #seldiv > #selmod,
    form#search.filters-open > div.portax-box #seldiv > div.seldiv-inline,
    #inventory-form.filters-open #seldiv > #seltype,
    #inventory-form.filters-open #seldiv > #selmod,
    #inventory-form.filters-open #seldiv > div.seldiv-inline {
        display: block;
        width: 100%;
    }

    form#search.filters-open #seldiv select,
    form#search.filters-open #seldiv input[type="text"],
    form#inventory-form.filters-open #seldiv select,
    form#inventory-form.filters-open #seldiv input[type="text"] {
        width: 100%;
    }

    #inventory-form.filters-open > .portax-box {
        padding-bottom: 0;
    }

    /* Show #filters when filters-open */
    form#search.filters-open #seldiv > #filters,
    #inventory-form.filters-open #seldiv > #filters {
        display: block !important;
        order: 99;
        margin: 0;
    }

    /* Hide the list.html div (second div) */
    form#search.filters-open #filters > div:last-of-type,
    #inventory-form.filters-open #filters > div:last-of-type {
        display: none;
    }

    /* Hide all filter controls except checkbox-disabled */
    /* Note: form#search and #inventory-form both have nested form which browser ignores, so target div directly */
    form#search.filters-open #filters > div:first-of-type > *:not(.checkbox-disabled),
    #inventory-form.filters-open #filters > div:first-of-type > *:not(.checkbox-disabled) {
        display: none !important;
    }

    /* Show only checkbox-disabled inside form (inventory only, hidden on endpoints/interfaces) */
    form#search.inventory.filters-open #filters .checkbox-disabled,
    #inventory-form.filters-open #filters .checkbox-disabled {
        display: flex !important;
        flex-direction: row-reverse;
        justify-content: flex-end;
        align-items: center;
        gap: 0.5rem;
        min-height: 44px;
        padding-left: 0;
    }

    /* Checkbox labels in search filters - proper vertical alignment */
    form#search.filters-open .checkbox-labels,
    form#search.filters-open #seldiv .checkbox-labels {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
    }

    form#search.filters-open .checkbox-labels label.checkbox,
    form#search.filters-open #seldiv label.checkbox,
    #inventory-form.filters-open #seldiv label.checkbox,
    #inventory-form.filters-open #filters label.checkbox {
        display: inline-flex;
        align-items: center;
        vertical-align: middle;
        margin: 0;
    }

    /* Hide checkbox-disabled and device_status on endpoints and interfaces */
    form.endpoints .checkbox-disabled,
    form.endpoints select[name="device_status"],
    form.interfaces .checkbox-disabled,
    form.interfaces select[name="device_status"] {
        display: none !important;
    }

    /* ========================================
       Leaflet Popup Tables (Mobile)
       ======================================== */

    /* Leaflet popup: force light theme */
    .leaflet-popup-content-wrapper {
        --bg-color: #fff;
        --primary-color: #000;
        --secondary-bg-color: #C3D9FF;
        --hover-bg: #ccc;
        --elem-border: #bbb;
    }

    /* Hide relay columns in popup tables on mobile */
    .leaflet-popup-content th.relay,
    .leaflet-popup-content td.relay {
        display: none !important;
    }

    /* Hide pager footer in popup on mobile */
    .leaflet-popup-content-wrapper tfoot {
        display: none !important;
    }

		div.form {
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
		}

    /* Allow mobile inspection tooltip to overflow in tab panels */
    .ui-tabs .ui-tabs-panel {
        overflow: visible;
    }

}