/* Shared site-wide composition for the approved personnel appearance.
   The page components still own their controls, state, geometry and actions. */
@media screen {
    /* The adopted EmployeeGroup page has its own literal reference header. */
    html[data-ui-design="personnel"]:not([data-theme="dark"]) .dahs-main:not(:has(> .jafam-personnel-reference)) {
        --jf-font-fa: "JafamPersonnel", sans-serif;
        --jf-font-fa-display: "JafamPersonnel", sans-serif;
    }
    html[data-ui-design="personnel"]:not([data-theme="dark"]) .dahs-main:not(:has(> .jafam-personnel-reference)) .jf-page-header {
        padding: 0 !important;
        margin-bottom: 28px;
        border: 0 !important;
        border-radius: 0;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible;
        align-items: center;
        gap: 16px;
    }
    html[data-ui-design="personnel"]:not([data-theme="dark"]) .dahs-main:not(:has(> .jafam-personnel-reference)) .jf-page-header::before {
        content: none;
    }
    html[data-ui-design="personnel"]:not([data-theme="dark"]) .dahs-main:not(:has(> .jafam-personnel-reference)) .jf-page-header__icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        border-radius: 10px;
        background: #eef2ff;
        box-shadow: none;
    }
    html[data-ui-design="personnel"]:not([data-theme="dark"]) .dahs-main:not(:has(> .jafam-personnel-reference)) .jf-page-header__title {
        color: #17233d;
        font-size: clamp(1.35rem, 1.5vw, 1.8rem);
        font-weight: 800;
        line-height: 1.5;
        letter-spacing: normal;
    }
    html[data-ui-design="personnel"]:not([data-theme="dark"]) .dahs-main:not(:has(> .jafam-personnel-reference)) .jf-page-header__subtitle {
        color: #66748d;
        font-size: .85rem;
        font-weight: 500;
        line-height: 1.7;
    }
    /* Headers with existing filter children keep every child and handler. */
    html[data-ui-design="personnel"]:not([data-theme="dark"]) .dahs-main:not(:has(> .jafam-personnel-reference)) .jf-page-header__content {
        min-width: 0;
        margin-top: 16px;
        padding: 20px;
        border: 1px solid #e5eaf1;
        border-radius: 12px;
        background: #fff;
        box-shadow: none;
    }
    html[data-ui-design="personnel"]:not([data-theme="dark"]) .dahs-main :is(
        .amaudit__filters, .ar-filters, .jf-queue-filters, .pkg-filter-shell,
        .accounting-filter-bar, .cfs-filters, .csl-toolbar, .cfs-toolbar,
        .pgv__toolbar, .rmv__toolbar, .amuperm__toolbar, .amroles__toolbar,
        .jf-zbx__toolbar, .drug-rule-list-toolbar, .oc-experts-list__toolbar,
        .accounting-grid-toolbar, .toolbar-row
    ) {
        border-color: #e5eaf1;
        border-radius: 12px;
        background-color: #fff;
        background-image: none;
        box-shadow: none;
        min-width: 0;
    }
    html[data-ui-design="personnel"]:not([data-theme="dark"]) .dahs-main :is(
        .amaudit__filters, .ar-filters, .jf-queue-filters, .pkg-filter-shell,
        .accounting-filter-bar, .cfs-filters, .csl-toolbar, .cfs-toolbar,
        .pgv__toolbar, .rmv__toolbar, .amuperm__toolbar, .amroles__toolbar,
        .jf-zbx__toolbar, .drug-rule-list-toolbar, .oc-experts-list__toolbar,
        .accounting-grid-toolbar, .toolbar-row
    ) :is(.mud-input-label, label) {
        color: #4e5d76;
        font-weight: 600;
    }

    /* GRID-FAMILY-BRIDGE:START */
    /* Grid-family bridge. The original table sheet gives ordinary Mud grids
       reference spacing, but deliberately leaves dense and specialist grids
       with their own row/column geometry. Give every Mud table family the
       same type weights and material without changing measured type sizes,
       moving sticky columns, filters,
       selection, pagination or virtualized rows. The literal ep-table remains
       owned by the approved EmployeeGroup reference stylesheet. */
    html[data-ui-design="personnel"]:not([data-theme="dark"]) :is(
        .mud-data-grid:not(.ep-table), .mud-table:not(.ep-table),
        .mud-simple-table:not(.ep-table)
    ) {
        color: #17233d;
        --mud-palette-table-lines: #e5eaf1;
    }
    html[data-ui-design="personnel"]:not([data-theme="dark"]) :is(
        .mud-data-grid:not(.ep-table), .mud-table:not(.ep-table),
        .mud-simple-table:not(.ep-table)
    ) .mud-table-head .mud-table-cell:not([style*="color" i]) {
        color: #526079 !important;
        font-weight: 700 !important;
    }
    html[data-ui-design="personnel"]:not([data-theme="dark"]) :is(
        .mud-data-grid:not(.ep-table), .mud-table:not(.ep-table),
        .mud-simple-table:not(.ep-table)
    ) .mud-table-body .mud-table-cell {
        border-bottom-color: #eef1f6;
    }
    html[data-ui-design="personnel"]:not([data-theme="dark"]) :is(
        .mud-data-grid:not(.ep-table), .mud-table:not(.ep-table),
        .mud-simple-table:not(.ep-table)
    ) .mud-table-body .mud-table-cell:not([style*="font-weight" i]) {
        font-weight: 500;
    }
    html[data-ui-design="personnel"]:not([data-theme="dark"]) :is(
        .mud-data-grid:not(.ep-table), .mud-table:not(.ep-table),
        .mud-simple-table:not(.ep-table)
    ) :is(.mud-table-pagination, .mud-data-grid-pager) {
        color: #66748d;
        border-color: #e5eaf1;
    }

    /* Classed page-owned HTML tables include reports and narrow detail lists
       that do not render a Mud wrapper. Only color/type/border materials are shared;
       print, widths, cell padding and any semantic inline colors stay owned. */
    html[data-ui-design="personnel"]:not([data-theme="dark"]) :is(.dahs-main, .mud-dialog) table[class]:not(.mud-table-root):not([role="presentation"]) {
        color: #17233d;
        border: 1px solid #e5eaf1;
        border-radius: 12px;
        background: #fff;
        box-shadow: none;
    }
    html[data-ui-design="personnel"]:not([data-theme="dark"]) :is(.dahs-main, .mud-dialog) table[class]:not(.mud-table-root):not([role="presentation"]) thead > tr > :is(th, td):not([style*="background" i]):not([style*="color" i]) {
        background-color: #f6f8fc;
        color: #526079;
        font-weight: 700;
        border-color: #e5eaf1;
    }
    html[data-ui-design="personnel"]:not([data-theme="dark"]) :is(.dahs-main, .mud-dialog) table[class]:not(.mud-table-root):not([role="presentation"]) tbody > tr > :is(th, td):not([style*="border" i]) {
        border-bottom-color: #eef1f6;
    }

    /* JafamAdaptiveDataGrid is a card grid rather than a Mud table. Retain its
       desktop columns and mobile cards while replacing its legacy glass look. */
    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-grid-shell :is(.jafam-grid-toolbar, .jafam-grid-filter-panel, .jafam-grid-row) {
        border-color: #e5eaf1;
        border-radius: 12px;
        background: #fff;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-grid-shell .jafam-grid-header {
        border: 1px solid #e5eaf1;
        border-radius: 10px;
        background: #f6f8fc;
        color: #526079;
        font-weight: 700;
    }
    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-grid-shell .jafam-grid-row:hover {
        background: #fafbff;
        box-shadow: none;
    }
    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-grid-shell .jafam-grid-pagination {
        color: #66748d;
        font-weight: 500;
    }
    /* GRID-FAMILY-BRIDGE:END */
    /* Merged grid filter bar: reference field borders and the quiet indigo
       selection tint used by dropdown lists. */
    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-filter-bar__label { color: #66748d; }
    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-filter-chip {
        border-color: #dce3ee;
        background: #fff;
        color: #40506b;
    }
    html[data-ui-design="personnel"]:not([data-theme="dark"]) .jafam-filter-chip.is-active {
        border-color: #c7d2fe;
        background: #eef2ff;
        color: #3730a3;
    }
    html[data-ui-design="personnel"]:not([data-theme="dark"]) :is(.jafam-filter-chip__open, .jafam-filter-chip__clear):hover { background: rgba(99,102,241,.08); }
}
@media screen and (max-width: 720px) {
    html[data-ui-design="personnel"]:not([data-theme="dark"]) .dahs-main:not(:has(> .jafam-personnel-reference)) .jf-page-header {
        align-items: stretch;
        gap: 12px;
        margin-bottom: 20px;
    }
    html[data-ui-design="personnel"]:not([data-theme="dark"]) .dahs-main:not(:has(> .jafam-personnel-reference)) .jf-page-header__actions {
        justify-content: flex-start;
    }
    html[data-ui-design="personnel"]:not([data-theme="dark"]) .dahs-main:not(:has(> .jafam-personnel-reference)) .jf-page-header__content {
        padding: 16px;
    }
}