/* Approved personnel grid, applied to the existing Mud components. Ordinary
   tables receive the reference type scale and comfortable spacing. Dense,
   virtualized, frozen-header and specialist grids keep their measured geometry.
   Row states, selection, column widths/order and scroll/sticky owners remain
   page-owned. Removing the root preference restores the previous appearance. */
@media screen {
    html[data-ui-design="personnel"]:not([data-theme="dark"]) :is(.mud-data-grid:not(.ep-table), .mud-table:not(.ep-table)):not(.claim-track-grid) {
        border-radius: 16px !important;
        border-color: #e5eaf1 !important;
        background-color: #fff;
        background-image: none;
        box-shadow: 0 5px 24px #23355706 !important;
    }

    /* Header backgrounds must stay opaque for existing frozen/sticky columns.
       Inline report colors (for example liabilities/equity) are not replaced. */
    html[data-ui-design="personnel"]:not([data-theme="dark"]) :is(.mud-data-grid:not(.ep-table), .mud-table:not(.ep-table)) .mud-table-head {
        background-color: #f6f8fc !important;
        background-image: none !important;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) :is(.mud-data-grid:not(.ep-table), .mud-table:not(.ep-table)) .mud-table-head .mud-table-cell:not([style*="background" i]) {
        background-color: #f6f8fc !important;
        background-image: none !important;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) :is(.mud-data-grid:not(.ep-table), .mud-table:not(.ep-table)) .mud-table-head .mud-table-cell {
        color: #526079;
        font-weight: 700;
        border-bottom-color: #e5eaf1 !important;
    }

    /* Preserve the title/filter distinction without changing either row's
       measured height or the frozen offsets in Track and the personnel grid. */
    html[data-ui-design="personnel"]:not([data-theme="dark"]) .mud-data-grid:not(.ep-table) .mud-table-head .filter-header-cell:not([style*="background" i]),
    html[data-ui-design="personnel"]:not([data-theme="dark"]) :is(.claim-track-grid, .person-excel-grid) .mud-table-head > tr:nth-child(2) > .mud-table-cell:not([style*="background" i]) {
        background-color: #f8faff !important;
        background-image: none !important;
    }

    /* The shared legacy layers set headers to 900/.85rem, body to .92rem and
       actions to 800. Override these measured reference values, not just the
       surrounding border. Virtualize emits height/flex-shrink spacer rows;
       exclude the whole grid while those are present. An explicit preserve
       hook also lets future specialized grids retain their own geometry. */
    html[data-ui-design="personnel"]:not([data-theme="dark"]) .mud-table:not(.ep-table):not(:where(.mud-table-dense, .claim-track-grid, .person-excel-grid, .lightstyle-data-grid, .policy-member-grid, .center-grid, .provider-grid, .drug-grid, .pcd-table, .mud-table-sticky-header, .mud-table-sticky-footer, .mud-virtualize, .jafam-table-geometry-owned, [data-personnel-density="preserve"])):not(:has(.mud-virtualize, .mud-table-body > tr[style*="height" i][style*="flex-shrink" i])) .mud-table-head .mud-table-cell {
        font-size: .72rem !important;
        font-weight: 650 !important;
        line-height: 1.5;
        letter-spacing: normal;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .mud-table:not(.ep-table):not(:where(.mud-table-dense, .claim-track-grid, .person-excel-grid, .lightstyle-data-grid, .policy-member-grid, .center-grid, .provider-grid, .drug-grid, .pcd-table, .mud-table-sticky-header, .mud-table-sticky-footer, .mud-virtualize, .jafam-table-geometry-owned, [data-personnel-density="preserve"])):not(:has(.mud-virtualize, .mud-table-body > tr[style*="height" i][style*="flex-shrink" i])) .mud-table-head .mud-table-cell:not([style*="color" i]) {
        color: #526079 !important;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .mud-table:not(.ep-table):not(:where(.mud-table-dense, .claim-track-grid, .person-excel-grid, .lightstyle-data-grid, .policy-member-grid, .center-grid, .provider-grid, .drug-grid, .pcd-table, .mud-table-sticky-header, .mud-table-sticky-footer, .mud-virtualize, .jafam-table-geometry-owned, [data-personnel-density="preserve"])):not(:has(.mud-virtualize, .mud-table-body > tr[style*="height" i][style*="flex-shrink" i])) .mud-table-body .mud-table-cell {
        font-size: .81rem !important;
        font-weight: 400;
        line-height: 1.5;
        border-bottom-color: #eef1f6 !important;
    }

    /* Comfortable padding is not applied to dense grids or the mobile card
       layouts generated by Mud breakpoints. No widths, sticky offsets, row
       heights, wrapping rules or scroll-container properties are replaced. */
    html[data-ui-design="personnel"]:not([data-theme="dark"]) .mud-table:not(.ep-table):not(:where(.mud-table-dense, .mud-xs-table, .mud-sm-table, .mud-md-table, .mud-lg-table, .mud-xl-table, .mud-xxl-table, .claim-track-grid, .person-excel-grid, .lightstyle-data-grid, .policy-member-grid, .center-grid, .provider-grid, .drug-grid, .pcd-table, .mud-table-sticky-header, .mud-table-sticky-footer, .mud-virtualize, .jafam-table-geometry-owned, [data-personnel-density="preserve"])):not(:has(.mud-virtualize, .mud-table-body > tr[style*="height" i][style*="flex-shrink" i])) .mud-table-head .mud-table-cell:not(.filter-header-cell):not([style*="padding" i]) {
        padding: 14px 18px !important;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .mud-table:not(.ep-table):not(:where(.mud-table-dense, .mud-xs-table, .mud-sm-table, .mud-md-table, .mud-lg-table, .mud-xl-table, .mud-xxl-table, .claim-track-grid, .person-excel-grid, .lightstyle-data-grid, .policy-member-grid, .center-grid, .provider-grid, .drug-grid, .pcd-table, .mud-table-sticky-header, .mud-table-sticky-footer, .mud-virtualize, .jafam-table-geometry-owned, [data-personnel-density="preserve"])):not(:has(.mud-virtualize, .mud-table-body > tr[style*="height" i][style*="flex-shrink" i])) .mud-table-body .mud-table-cell:not([colspan]):not([style*="padding" i]) {
        padding: 16px 18px !important;
    }

    /* White rows are optically important to the reference, but only plain Mud
       rows qualify: any custom class, inline style or selected flag retains
       its existing appearance. Cells are never painted over, so inline and
       class-based financial/status colors remain visible. */
    html[data-ui-design="personnel"]:not([data-theme="dark"]) .mud-table:not(.ep-table):not(.mud-table-striped) .mud-table-body > tr:is([class="mud-table-row"], [class="mud-table-row "]):not([style]:not([style=""])):not([aria-selected="true"]) {
        background: #fff !important;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .mud-table:not(.ep-table):not(.mud-table-striped) .mud-table-body > tr:is([class="mud-table-row"], [class="mud-table-row "]):not([style]:not([style=""])):not([aria-selected="true"]):hover {
        background: #fafbff !important;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .mud-table:not(.ep-table) .mud-table-body > tr:is([class="mud-table-row"], [class="mud-table-row "]):not([style]:not([style=""])) > .mud-table-cell:is([class="mud-table-cell"], [class="mud-table-cell "]):not([style]:not([style=""])) {
        color: #17233d;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) :is(.mud-data-grid:not(.ep-table), .mud-table:not(.ep-table)) :is(.mud-table-toolbar, .mud-table-pagination, .mud-data-grid-pager) {
        background-image: none !important;
        border-color: #e5eaf1;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) :is(.mud-data-grid:not(.ep-table), .mud-table:not(.ep-table)) .mud-table-cell :is(.mud-button, .mud-icon-button, .mud-button-group) {
        border-radius: 7px !important;
    }

    /* Explicitly requested: remove only Mud 7.15's duplicate, inactive funnel
       shortcut when its own enabled column-options menu still exposes Filter.
       Keep active .filtered indicators, no-menu fallback, ColumnFilterRow and
       custom filter controls. Filterable, definitions and handlers are intact. */
    html[data-ui-design="personnel"]:not([data-theme="dark"]) .mud-data-grid:not(.ep-table) .mud-table-head .column-header > .column-options:has(> .mud-menu > button:not(:disabled):not(.mud-disabled)) > button.filter-button:not(.filtered) {
        display: none !important;
    }

    /* Keep selection and column settings as real Mud controls. Remove the
       legacy raised white tiles, but retain state colors, focus and hit areas.
       Checkbox geometry is never changed, including in measured grids. */
    html[data-ui-design="personnel"]:not([data-theme="dark"]) .mud-table:not(.ep-table) .mud-table-cell .mud-checkbox .mud-icon-button {
        background-color: transparent !important;
        background-image: none !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .mud-table:not(.ep-table):not(:where(.mud-table-dense, .claim-track-grid, .person-excel-grid, .lightstyle-data-grid, .policy-member-grid, .center-grid, .provider-grid, .drug-grid, .pcd-table, .mud-table-sticky-header, .mud-table-sticky-footer, .mud-virtualize, .jafam-table-geometry-owned, [data-personnel-density="preserve"])):not(:has(.mud-virtualize, .mud-table-body > tr[style*="height" i][style*="flex-shrink" i])) .mud-table-head .mud-icon-button:not(.mud-checkbox .mud-icon-button) {
        min-width: 28px;
        min-height: 28px;
        padding: 6px !important;
        background-color: transparent !important;
        background-image: none !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .mud-table:not(.ep-table):not(:where(.mud-table-dense, .claim-track-grid, .person-excel-grid, .lightstyle-data-grid, .policy-member-grid, .center-grid, .provider-grid, .drug-grid, .pcd-table, .mud-table-sticky-header, .mud-table-sticky-footer, .mud-virtualize, .jafam-table-geometry-owned, [data-personnel-density="preserve"])):not(:has(.mud-virtualize, .mud-table-body > tr[style*="height" i][style*="flex-shrink" i])) .mud-table-head .mud-icon-button:not(.mud-checkbox .mud-icon-button) .mud-icon-root {
        width: 14px;
        height: 14px;
        font-size: 14px;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .mud-table:not(.ep-table):not(:where(.mud-table-dense, .claim-track-grid, .person-excel-grid, .lightstyle-data-grid, .policy-member-grid, .center-grid, .provider-grid, .drug-grid, .pcd-table, .mud-table-sticky-header, .mud-table-sticky-footer, .mud-virtualize, .jafam-table-geometry-owned, [data-personnel-density="preserve"])):not(:has(.mud-virtualize, .mud-table-body > tr[style*="height" i][style*="flex-shrink" i])) .mud-table-head .mud-icon-button:not(.mud-checkbox .mud-icon-button):not(:disabled):not(.mud-disabled):hover {
        background-color: #e9edf5 !important;
    }

    /* site.css paints every grid-cell icon button as a bordered tile. In the
       headers of dense and specialist grids those tiles read as empty boxes
       beside sort and filter icons. Remove only that material: sizes, hit
       areas, icons and filled or inline-colored buttons stay as they are. */
    html[data-ui-design="personnel"]:not([data-theme="dark"]) :is(.mud-data-grid:not(.ep-table), .mud-table:not(.ep-table)) .mud-table-head .mud-icon-button:not(.mud-checkbox .mud-icon-button):not(.mud-button-filled):not([style*="background" i]) {
        background-color: transparent !important;
        background-image: none !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) :is(.mud-data-grid:not(.ep-table), .mud-table:not(.ep-table)) .mud-table-head .mud-icon-button:not(.mud-checkbox .mud-icon-button):not(.mud-button-filled):not([style*="background" i]):not(:disabled):not(.mud-disabled):hover {
        background-color: #e9edf5 !important;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .mud-table:not(.ep-table):not(:where(.mud-table-dense, .claim-track-grid, .person-excel-grid, .lightstyle-data-grid, .mud-virtualize, .jafam-table-geometry-owned, [data-personnel-density="preserve"])):not(:has(.mud-virtualize, .mud-table-body > tr[style*="height" i][style*="flex-shrink" i])) .mud-table-body .mud-table-cell .mud-button {
        font-size: .72rem !important;
        font-weight: 500 !important;
        letter-spacing: normal;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) :is(.mud-data-grid:not(.ep-table), .mud-table:not(.ep-table)) .mud-chip {
        border-radius: 6px !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) :is(.mud-data-grid:not(.ep-table), .mud-table:not(.ep-table)) .mud-table-pagination .mud-button-root {
        border-radius: 8px !important;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .mud-table:not(.ep-table):not(:where(.claim-track-grid, .person-excel-grid, .lightstyle-data-grid, .jafam-table-geometry-owned)) .mud-table-pagination {
        padding: 17px 20px !important;
        background: #fff !important;
        color: #66748d !important;
        font-size: .75rem;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .mud-table:not(.ep-table):not(:where(.claim-track-grid, .person-excel-grid, .lightstyle-data-grid, .jafam-table-geometry-owned)) .mud-table-pagination :is(.mud-table-pagination-caption, .mud-table-pagination-select, .mud-select-input) {
        color: #66748d !important;
        font-size: .75rem !important;
        font-weight: 400 !important;
    }

    /* Reusable composition classes mirror the approved personnel page without
       supplying controls, routes, data or handlers. Existing pages can keep
       their exact components while sharing one toolbar/table/pager surface. */
    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-personnel-surface {
        min-width: 0;
        background: #fff;
        border: 1px solid #e5eaf1;
        border-radius: 16px;
        box-shadow: 0 5px 24px #23355706;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-personnel-surface > .mud-table:not(.ep-table) {
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-personnel-toolbar {
        display: flex;
        align-items: flex-end;
        flex-wrap: wrap;
        gap: 12px;
        padding: 20px;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-personnel-toolbar > label {
        display: flex;
        flex-direction: column;
        gap: 7px;
        min-width: 0;
        color: #4e5d76;
        font-size: .78rem;
        font-weight: 600;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-personnel-search {
        flex: 1 1 190px;
        min-width: 140px;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-personnel-toolbar .jafam-personnel-filter {
        flex: 0 1 145px;
        min-width: 0;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-personnel-toolbar > label > :is(input:not([type="checkbox"]):not([type="radio"]), select) {
        width: 100%;
        min-height: 42px;
        padding: 10px 12px;
        border: 1px solid #dce3ee;
        border-radius: 9px;
        background: #fff;
        color: #25324a;
        font-family: inherit;
        font-size: .81rem;
        font-weight: 400;
        line-height: 20px;
    }

    /* In this explicit toolbar composition, render Mud's existing associated
       label above its outlined field like the reference. The real input,
       accessible label, clear/adornment buttons and validation stay intact. */
    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-personnel-toolbar .mud-input-control:has(.mud-input-outlined) {
        margin-top: 0 !important;
        padding-top: 23px;
        min-width: 0;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-personnel-toolbar .mud-input-control:has(.mud-input-outlined) .mud-input-label {
        top: -23px;
        inset-inline-start: 0;
        inset-inline-end: auto;
        transform: none !important;
        padding: 0;
        font-size: .78rem !important;
        font-weight: 600 !important;
        line-height: 16px;
        background: transparent;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-personnel-toolbar .mud-input-control:not(.mud-input-error):not(:has(.mud-input-error, [aria-invalid="true"])):has(.mud-input-outlined) .mud-input-label {
        color: #4e5d76 !important;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-personnel-toolbar .mud-input-outlined-border legend {
        max-width: 0;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-personnel-toolbar .mud-input.mud-input-outlined {
        margin-top: 0;
        min-height: 42px;
        border-radius: 9px;
        background: #fff;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-personnel-toolbar .mud-input-outlined > :is(input.mud-input-root, .mud-select-input) {
        padding: 10px 12px;
        font-size: .81rem !important;
        font-weight: 400;
        line-height: 20px;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-personnel-toolbar .mud-button {
        min-height: 44px;
        padding: 10px 16px;
        border-radius: 12px !important;
        font-size: 1rem;
        font-weight: 400;
        line-height: 24px;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-personnel-summary {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px;
        padding: 12px 20px;
        border-top: 1px solid #eef1f6;
        color: #66748d;
        font-size: .76rem;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-personnel-summary strong {
        color: #17233d;
        font-size: 1rem;
        font-weight: 750;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-personnel-name {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-weight: 700;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-personnel-avatar {
        display: inline-grid;
        place-items: center;
        flex-shrink: 0;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: #edf1fc;
        color: #4b61a4;
        font-size: .82rem;
        font-weight: 700;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-personnel-code {
        font-variant-numeric: tabular-nums;
        direction: ltr;
        unicode-bidi: isolate;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-personnel-subline {
        display: block;
        margin-top: 5px;
        color: #66748d;
        font-size: .69rem;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-personnel-badge {
        display: inline-block;
        padding: 4px 9px;
        border-radius: 6px;
        background: #edf1fc;
        color: #53649e;
        font-size: .68rem;
        font-weight: 600;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-personnel-row-actions {
        display: grid;
        grid-template-columns: auto auto;
        gap: 5px;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-personnel-row-actions > .mud-button {
        min-width: 0;
        padding: 6px 8px;
        font-size: .72rem !important;
        font-weight: 500 !important;
        line-height: 1.5;
        white-space: nowrap;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-personnel-pagination {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 14px;
        padding: 17px 20px;
        color: #66748d;
        font-size: .75rem;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-personnel-pagination :is(label, .jafam-personnel-pager-actions) {
        display: flex;
        align-items: center;
        gap: 9px;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-personnel-pagination select {
        width: 76px;
        min-height: 34px;
        padding: 5px 8px;
        border: 1px solid #dce3ee;
        border-radius: 8px;
        background: #fff;
        color: #25324a;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-personnel-pagination .mud-button {
        min-height: 34px;
        padding: 5px 12px;
        border-radius: 8px !important;
        font-size: .75rem !important;
        line-height: 22px;
    }

    /* The custom adaptive grid shares only the header and action materials.
       Its responsive card geometry and semantic status chips are untouched. */
    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-grid-header {
        color: #526079;
        font-weight: 700;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) :is(.jafam-grid-toolbar-button, .jafam-grid-toolbar-icon) {
        border-radius: 9px !important;
    }
}

@media screen and (max-width: 900px) {
    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-personnel-toolbar .jafam-personnel-search {
        flex-basis: 100%;
    }
}

@media screen and (max-width: 540px) {
    html[data-ui-design="personnel"]:not([data-theme="dark"]) .mud-table:not(.ep-table):not(:where(.mud-table-dense, .mud-xs-table, .mud-sm-table, .mud-md-table, .mud-lg-table, .mud-xl-table, .mud-xxl-table, .claim-track-grid, .person-excel-grid, .lightstyle-data-grid, .policy-member-grid, .center-grid, .provider-grid, .drug-grid, .pcd-table, .mud-table-sticky-header, .mud-table-sticky-footer, .mud-virtualize, .jafam-table-geometry-owned, [data-personnel-density="preserve"])):not(:has(.mud-virtualize, .mud-table-body > tr[style*="height" i][style*="flex-shrink" i])) .mud-table-body .mud-table-cell:not([colspan]):not([style*="padding" i]) {
        padding: 13px !important;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) :is(.jafam-personnel-toolbar, .jafam-personnel-pagination) {
        padding: 14px;
        gap: 10px;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-personnel-summary {
        padding: 12px 14px;
        gap: 15px;
    }
}

/* Retained targeted exception: the built-in column chooser can be anchored
   outside a phone viewport after horizontal scrolling. Mud still owns its
   visibility, keyboard behavior, selection and backdrop; no other popover
   position or the table's scrolling behavior is changed. */
@media screen and (max-width: 600px) {
    html[data-ui-design="personnel"]:not([data-theme="dark"]) .mud-table:not(.ep-table):not(:where(.mud-table-dense, .claim-track-grid, .person-excel-grid, .lightstyle-data-grid, .policy-member-grid, .center-grid, .provider-grid, .drug-grid, .pcd-table, .mud-table-sticky-header, .mud-table-sticky-footer, .mud-virtualize, .jafam-table-geometry-owned, [data-personnel-density="preserve"])):not(:has(.mud-virtualize, .mud-table-body > tr[style*="height" i][style*="flex-shrink" i])) .mud-table-head .mud-icon-button:not(.mud-checkbox .mud-icon-button) {
        min-width: 44px;
        min-height: 44px;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-personnel-toolbar > label > :is(input:not([type="checkbox"]):not([type="radio"]), select),
    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-personnel-row-actions > .mud-button {
        min-height: 44px;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-personnel-pagination .mud-button {
        min-height: 40px;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .mud-data-grid-columns-panel {
        position: fixed !important;
        inset-inline: 12px !important;
        top: auto !important;
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
        width: auto !important;
        max-width: calc(100vw - 24px) !important;
        max-height: min(480px, 65dvh) !important;
        overflow-x: auto;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .mud-data-grid-columns-panel .mud-input-control-boolean-input {
        min-width: 0;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .mud-data-grid-columns-panel .mud-typography {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    html[data-ui-design="personnel"]:not([data-theme="dark"]) .mud-data-grid-columns-panel .mud-drop-item > [role="group"] {
        gap: 4px !important;
    }
}