/* v1.6 browser-UAT refinements: delegated Month board, Awaiting Start,
   Task Explorer, lifecycle discoverability and line charts. */

:root {
    --dq-awaiting: #7453b8;
    --dq-awaiting-bg: #f2edff;
    --dq-awaiting-border: #d5c9f4;
}

.m16-status-awaiting {
    border: 1px solid var(--dq-awaiting-border) !important;
    background: var(--dq-awaiting-bg) !important;
    color: #5f429e !important;
}
.m16-kpi-awaiting {
    border-top-color: var(--dq-awaiting) !important;
    background: #fcfaff;
}
.m16-kpi-awaiting > span,
.m16-kpi-awaiting > strong { color: #5f429e; }

.m16-awaiting-start-form {
    width: 100%;
    margin: 0;
}
.m16-awaiting-start-action {
    width: 100%;
    min-height: 31px;
    display: grid;
    place-items: center;
    padding: 5px 8px;
    border: 1px solid var(--dq-awaiting-border);
    border-radius: 5px;
    background: var(--dq-awaiting-bg);
    color: #5f429e;
    font: inherit;
    font-size: 8px;
    font-weight: 850;
    line-height: 1.1;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.m16-awaiting-start-action .m16-start-label { display: none; }
.m16-awaiting-start-action:hover,
.m16-awaiting-start-action:focus-visible {
    border-color: #4e6fae;
    background: #315da8;
    color: #fff;
    outline: none;
}
.m16-awaiting-start-action:hover .m16-awaiting-label,
.m16-awaiting-start-action:focus-visible .m16-awaiting-label { display: none; }
.m16-awaiting-start-action:hover .m16-start-label,
.m16-awaiting-start-action:focus-visible .m16-start-label { display: inline; }

/* Delegated Employee actions live in the Month board instead of requiring a
   separate management page for ordinary task/category/assignment work. */
.m16-employee-access-grant,
.m16-employee-bulk-assign,
.m16-owner-form,
.m16-inline-create-task,
.m16-employee-add-category form {
    display: flex;
    align-items: center;
    gap: 6px;
}
.m16-employee-access-grant,
.m16-employee-bulk-assign {
    padding: 4px 6px;
    border: 1px solid #dfe5e8;
    border-radius: 6px;
    background: #fff;
}
.m16-employee-access-grant label,
.m16-employee-bulk-assign label {
    color: #59656d;
    font-size: 8px;
    font-weight: 850;
    white-space: nowrap;
}
.m16-employee-access-grant select,
.m16-employee-bulk-assign select,
.m16-owner-form select,
.m16-inline-create-task select,
.m16-inline-create-task input,
.m16-employee-add-category input {
    min-height: 28px;
    padding: 4px 7px;
    border: 1px solid #d5dce0;
    border-radius: 5px;
    background: #fff;
    color: var(--dq-text);
    font: inherit;
    font-size: 8px;
}
.m16-employee-access-grant select,
.m16-employee-bulk-assign select { min-width: 150px; }
.m16-employee-bulk-assign {
    border-color: #d9e2e8;
    background: #fbfcfd;
}
.m16-owner-form {
    width: 100%;
    min-width: 0;
}
.m16-owner-form select {
    width: 100%;
    min-width: 0;
    max-width: none;
}
.m16-owner-select-form {
    display: block;
}
.m16-owner-readonly {
    color: #4d5961;
    font-size: 8px;
    font-weight: 750;
}
.m16-employee-add-item-row td {
    padding: 5px 8px !important;
    background: #fbfcfd;
}
.m16-inline-create-task { width: 100%; }
.m16-inline-create-task input[type="text"] {
    min-width: 220px;
    flex: 1 1 420px;
}
.m16-inline-create-task select { flex: 0 1 170px; }
.m16-add-item-plus {
    color: var(--dq-green-dark);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}
.m16-employee-add-category {
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px dashed #cbd9d6;
    border-radius: 7px;
    background: #fbfefd;
}
.m16-employee-add-category form { max-width: 620px; }
.m16-employee-add-category input { flex: 1; min-width: 220px; }
.m11-employee-board-table {
    min-width: 1380px;
}
.m11-employee-board-table th {
    width: auto !important;
}
.m11-employee-board-table.m16-has-owner-column {
    min-width: 1500px;
}
.m11-employee-board-table .m16-col-task { width: 18%; }
.m11-employee-board-table .m16-col-status { width: 11%; }
.m11-employee-board-table .m16-col-progress { width: 16%; }
.m11-employee-board-table .m16-col-notes { width: 21%; }
.m11-employee-board-table .m16-col-attention { width: 10%; }
.m11-employee-board-table .m16-col-priority { width: 9%; }
.m11-employee-board-table .m16-col-last-update { width: 15%; }

.m11-employee-board-table.m16-has-owner-column .m16-col-task { width: 16%; }
.m11-employee-board-table.m16-has-owner-column .m16-col-owner { width: 11%; }
.m11-employee-board-table.m16-has-owner-column .m16-col-status { width: 10%; }
.m11-employee-board-table.m16-has-owner-column .m16-col-progress { width: 14%; }
.m11-employee-board-table.m16-has-owner-column .m16-col-notes { width: 18%; }
.m11-employee-board-table.m16-has-owner-column .m16-col-attention { width: 9%; }
.m11-employee-board-table.m16-has-owner-column .m16-col-priority { width: 8%; }
.m11-employee-board-table.m16-has-owner-column .m16-col-last-update { width: 14%; }

.m16-employee-owner-cell { min-width: 150px; max-width: 190px; }
.m16-last-update-head {
    white-space: nowrap;
}
.m16-last-update-cell {
    min-width: 0;
    padding-right: 10px !important;
}
.m16-last-update-cell .m11-updated-cell {
    display: block;
    max-width: 100%;
    color: #5f6b73;
    font-size: 8px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.m16-last-update-cell .m11-updated-cell.is-empty {
    color: #8a949b;
    font-weight: 650;
}

/* My Work: seven top-level signals now include Awaiting Start explicitly. */
.m11-my-work-kpis {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.m11-my-work-status-list i.is-awaiting-start {
    background: var(--dq-awaiting);
}

/* My Work: Awaiting Start is a first-class queue, not a footnote under In Progress. */
.m16-my-work-action-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
}
.m16-awaiting-work-card {
    border-top: 3px solid var(--dq-awaiting);
}
.m16-awaiting-work-list {
    display: grid;
    gap: 5px;
}
.m16-awaiting-work-list a {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px 9px;
    border: 1px solid #e2dcf1;
    border-radius: 6px;
    background: #fcfaff;
    color: inherit;
    text-decoration: none;
}
.m16-awaiting-work-list a:hover {
    border-color: #c7b8e9;
    background: #f8f4ff;
}
.m16-awaiting-work-list p { min-width: 0; margin: 0; }
.m16-awaiting-work-list p strong,
.m16-awaiting-work-list p small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.m16-awaiting-work-list p strong { font-size: 9px; }
.m16-awaiting-work-list p small { margin-top: 1px; color: var(--dq-muted); font-size: 8px; }
.m16-awaiting-work-list b { color: #654c9c; font-size: 9px; }

/* Dashboard Task Explorer: form labels above controls, consistent widths, no
   run-on inline browser-default layout. */
.m16-task-explorer {
    overflow: hidden;
}
.m16-dashboard-filter-bar {
    display: grid;
    grid-template-columns: minmax(250px, 1.55fr) repeat(5, minmax(145px, .8fr));
    gap: 9px;
    align-items: end;
    margin: 8px 0 12px;
    padding: 12px;
    border: 1px solid #e1e6e9;
    border-radius: 8px;
    background: #f8fafb;
}
.m16-dashboard-filter-bar label {
    min-width: 0;
    display: grid;
    gap: 4px;
}
.m16-dashboard-filter-bar label > span {
    color: #59656d;
    font-size: 9px;
    font-weight: 850;
}
.m16-dashboard-filter-bar input,
.m16-dashboard-filter-bar select {
    width: 100%;
    min-height: 36px;
    padding: 7px 9px;
    border: 1px solid #ced7dc;
    border-radius: 6px;
    background: #fff;
    color: var(--dq-text);
    font: inherit;
    font-size: 10px;
}
.m16-dashboard-filter-bar input:focus,
.m16-dashboard-filter-bar select:focus {
    outline: 2px solid rgba(43, 156, 141, .14);
    border-color: var(--dq-green);
}
.m16-dashboard-filter-bar .m16-filter-search { grid-column: span 2; }
.m16-dashboard-filter-bar .m16-filter-actions {
    display: flex;
    gap: 7px;
    align-items: center;
}
.m16-task-explorer-table td:first-child { min-width: 310px; }
.m16-task-explorer-table td:first-child .table-action {
    display: inline-block;
    max-width: 100%;
    line-height: 1.35;
}

/* Row-level task actions stay beside the task title so Admin never needs
   horizontal scrolling just to edit, inspect history, archive, or delete.
   They read as one compact toolbar instead of a run of tiny text links. */
.m16-admin-task-cell-content {
    min-width: 0;
    display: grid;
    gap: 5px;
}
#board .m11-board-table tbody tr:not(.m11-add-item-row):not(.m11-empty-row) td {
    height: 58px;
    padding-top: 6px;
    padding-bottom: 6px;
}
#board .m11-task-name-cell {
    height: 58px;
}
#board .m11-task-name-cell .m11-row-handle {
    align-self: center;
}
.m16-task-title-line {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.m16-admin-task-title {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    color: var(--dq-night);
    font-size: 11px;
    font-weight: 850;
    line-height: 1.3;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
a.m16-admin-task-title:hover {
    color: var(--dq-green-dark);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
a.m16-admin-task-title:focus-visible {
    border-radius: 3px;
    outline: 2px solid rgba(43, 156, 141, .22);
    outline-offset: 2px;
}
.m16-admin-task-title.is-static {
    display: block;
}
.m16-task-archived-label {
    flex: 0 0 auto;
    padding: 2px 5px;
    border: 1px solid #d8dfe3;
    border-radius: 999px;
    background: #f4f6f7;
    color: #69747c;
    font-size: 7px;
    font-weight: 850;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.m16-task-row-actions {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.m16-task-row-actions form {
    display: inline-flex;
    margin: 0;
}
.m16-row-action {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-sizing: border-box;
    padding: 3px 7px;
    border: 1px solid #dce3e7;
    border-radius: 6px;
    background: #fff;
    color: #53616a;
    font: inherit;
    font-size: 8px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        border-color .12s ease,
        background .12s ease,
        color .12s ease,
        box-shadow .12s ease,
        transform .12s ease;
}
.m16-row-action svg {
    width: 11px;
    height: 11px;
    flex: 0 0 11px;
    fill: currentColor;
}
.m16-row-action:hover {
    border-color: #b9d6d1;
    background: #f4faf8;
    color: var(--dq-green-dark);
    box-shadow: 0 1px 3px rgba(26, 58, 66, .08);
    transform: translateY(-1px);
}
.m16-row-action:focus-visible {
    border-color: #8dc2b8;
    outline: 2px solid rgba(43, 156, 141, .2);
    outline-offset: 1px;
}
.m16-row-action:active {
    box-shadow: none;
    transform: translateY(0);
}
.m16-row-action.is-restore {
    border-color: #bdddd6;
    background: #f4faf8;
    color: #237d70;
}
.m16-row-action.is-restore:hover,
.m16-row-action.is-restore:focus-visible {
    border-color: #88c4b8;
    background: #eaf6f3;
    color: #17675d;
}
.m16-row-action.is-danger {
    border-color: #ead5d5;
    background: #fffafa;
    color: #9a4545;
}
.m16-row-action.is-danger:hover,
.m16-row-action.is-danger:focus-visible {
    border-color: #dcaeae;
    background: #fff1f1;
    color: #7d2525;
}
.m16-row-action.is-disabled {
    border-color: #e4e8ea;
    background: #f7f8f9;
    color: #9aa3a9;
    cursor: not-allowed;
    box-shadow: none;
}
.m16-row-action.is-disabled:hover {
    border-color: #e4e8ea;
    background: #f7f8f9;
    color: #9aa3a9;
    box-shadow: none;
    transform: none;
}

/* Task lifecycle/history controls should be visible as primary task actions. */
.m16-task-action-danger {
    border-color: #e7c7c7 !important;
    color: #a33c3c !important;
    background: #fffafa !important;
}
.m16-task-action-danger:hover { background: #fff1f1 !important; }
.m16-record-lifecycle-card {
    scroll-margin-top: 78px;
    border-top: 3px solid #bd5a5a;
}
.m16-record-lifecycle-card .m16-record-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 16px 16px 8px;
}
.m16-record-lifecycle-card .m16-record-actions form {
    margin: 0;
}
.m16-record-lifecycle-card > .field-help {
    margin: 0;
    padding: 0 16px 16px;
    color: #69757d;
    font-size: 9px;
    line-height: 1.5;
}

/* Lightweight, dependency-free SVG line chart surface. */
.m16-line-chart {
    min-height: 310px;
    position: relative;
    padding: 8px 4px 0;
}
.m16-line-chart svg {
    width: 100%;
    height: 310px;
    overflow: visible;
}
.m16-line-chart .grid-line { stroke: #e7ebee; stroke-width: 1; }
.m16-line-chart .axis-label {
    fill: #78838b;
    font-size: 10px;
}
.m16-line-chart .axis-title {
    fill: #66727a;
    font-size: 10px;
    font-weight: 800;
}
.m16-chart-guide {
    stroke: #b7c1c8;
    stroke-width: 1;
    stroke-dasharray: 4 4;
}
.m16-line-chart .series-line {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.m16-line-chart .series-point { stroke-width: 2; fill: #fff; }
.m16-line-chart .series-a { stroke: #315da8; }
.m16-line-chart .series-b { stroke: #8766c7; }
.m16-line-chart .series-c { stroke: #2b9c8d; }
.m16-line-chart .series-d { stroke: #b78a55; }
.m16-line-chart .series-point.series-a { fill: #315da8; }
.m16-line-chart .series-point.series-b { fill: #8766c7; }
.m16-line-chart .series-point.series-c { fill: #2b9c8d; }
.m16-line-chart .series-point.series-d { fill: #b78a55; }
.m16-chart-legend {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.m16-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #59656d;
    font-size: 9px;
}
.m16-chart-legend i {
    width: 18px;
    height: 3px;
    border-radius: 999px;
}
.m16-chart-legend .series-a { background: #315da8; }
.m16-chart-legend .series-b { background: #8766c7; }
.m16-chart-legend .series-c { background: #2b9c8d; }
.m16-chart-legend .series-d { background: #b78a55; }
.m16-chart-data { display: none; }
.m16-chart-tooltip {
    position: absolute;
    z-index: 4;
    min-width: 150px;
    display: grid;
    gap: 5px;
    padding: 8px 10px;
    border: 1px solid #d5dde2;
    border-radius: 7px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 8px 22px rgba(25, 39, 49, .14);
    color: #27343c;
    font-size: 9px;
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 8px));
}
.m16-chart-tooltip[hidden] { display: none; }
.m16-chart-tooltip strong {
    font-size: 9px;
}
.m16-chart-tooltip span {
    display: grid;
    grid-template-columns: 10px 1fr auto;
    align-items: center;
    gap: 6px;
    color: #5f6b73;
}
.m16-chart-tooltip span i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.m16-chart-tooltip span i.series-a { background: #315da8; }
.m16-chart-tooltip span i.series-b { background: #8766c7; }
.m16-chart-tooltip span i.series-c { background: #2b9c8d; }
.m16-chart-tooltip span i.series-d { background: #b78a55; }
.m16-chart-tooltip span i.is-under { background: #4c9d8e; }
.m16-chart-tooltip span i.is-on { background: #8a75bf; }
.m16-chart-tooltip span i.is-exceeded { background: #cc7b7b; }
.m16-chart-tooltip span b {
    color: #27343c;
    font-weight: 850;
}
.m16-trend-detail-table {
    margin-top: 10px;
}
.m16-trend-detail-table .m11-dashboard-table {
    min-width: 760px;
}

/* Executive Dashboard now uses real routed views instead of one long page. */
.m16-dashboard-page-tabs {
    gap: 4px;
}
.m16-dashboard-page-tabs a {
    white-space: nowrap;
}
.m16-dashboard-view {
    min-height: 480px;
}
.m16-completion-trend-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.m16-trend-filter-form {
    display: grid;
    grid-template-columns: minmax(160px, 1.4fr) repeat(2, minmax(120px, .8fr)) auto;
    gap: 8px;
    align-items: end;
    margin: 8px 0 10px;
    padding: 10px;
    border: 1px solid #e1e6e9;
    border-radius: 8px;
    background: #f8fafb;
}
.m16-trend-filter-form label {
    display: grid;
    gap: 4px;
    min-width: 0;
}
.m16-trend-filter-form label > span {
    color: #59656d;
    font-size: 8px;
    font-weight: 850;
}
.m16-trend-filter-form select {
    width: 100%;
    min-height: 34px;
    padding: 6px 8px;
    border: 1px solid #ced7dc;
    border-radius: 6px;
    background: #fff;
    color: var(--dq-text);
    font: inherit;
    font-size: 9px;
}
.m16-trend-explainer {
    margin: 0 0 4px;
    color: #657178;
    font-size: 9px;
    line-height: 1.45;
}
.m16-trend-explainer strong {
    color: #26333a;
}
.m16-completion-line-chart {
    min-height: 330px;
}

/* Variance semantic labels. */
.m16-variance-under { color: #237c6f; }
.m16-variance-over { color: #a44e4e; }
.m16-variance-on { color: #637078; }

@media (max-width: 1450px) {
    .m11-my-work-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .m16-dashboard-filter-bar { grid-template-columns: repeat(4, minmax(155px, 1fr)); }
    .m16-dashboard-filter-bar .m16-filter-search { grid-column: span 2; }
}
@media (max-width: 1100px) {
    .m11-my-work-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .m16-completion-trend-grid { grid-template-columns: 1fr; }
    .m16-my-work-action-grid { grid-template-columns: 1fr; }
    .m16-employee-access-grant { width: 100%; }
}
@media (max-width: 780px) {
    .m16-dashboard-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .m16-trend-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .m16-dashboard-filter-bar .m16-filter-search { grid-column: 1 / -1; }
    .m16-owner-form { min-width: 170px; }
}
@media (max-width: 560px) {
    .m11-my-work-kpis { grid-template-columns: 1fr; }
    .m16-trend-filter-form { grid-template-columns: 1fr; }
    .m16-dashboard-filter-bar { grid-template-columns: 1fr; }
    .m16-dashboard-filter-bar .m16-filter-search { grid-column: auto; }
    .m16-inline-create-task,
    .m16-employee-add-category form,
    .m16-employee-access-grant,
    .m16-employee-bulk-assign { align-items: stretch; flex-direction: column; }
}


/* UAT clarity refinements: score distribution, attention trend and benchmark history. */
body:has(.m16-dashboard-view) .m11-score-bars > div {
    max-width: 64px;
    grid-template-rows: 18px 150px auto;
}
body:has(.m16-dashboard-view) .m11-score-bars strong {
    font-size: 10px;
}
body:has(.m16-dashboard-view) .m11-score-bars small {
    min-height: 28px;
    color: #4f5b63;
    font-size: 9px;
    line-height: 1.35;
}
body:has(.m16-dashboard-view) .m11-score-bars > div > span {
    background:
        linear-gradient(to top, transparent 24%, #e4e9ec 25%, transparent 26%),
        linear-gradient(to top, transparent 49%, #e4e9ec 50%, transparent 51%),
        linear-gradient(to top, transparent 74%, #e4e9ec 75%, transparent 76%),
        #f3f5f6;
}
body:has(.m16-dashboard-view) .m11-score-bars i {
    width: 76%;
}

.m16-attention-trend-filter {
    grid-template-columns:
        minmax(150px, 1.2fr)
        minmax(170px, 1.3fr)
        minmax(120px, .8fr)
        minmax(120px, .8fr)
        auto;
}

.m16-benchmark-mix-wrap {
    position: relative;
    width: 100%;
    overflow-x: auto;
    margin-top: 8px;
    padding: 4px 0 8px;
}
.m16-benchmark-mix-wrap .m16-chart-tooltip {
    transform: translate(-50%, 8px);
}
.m16-benchmark-mix-chart {
    min-width: 760px;
    min-height: 270px;
    display: flex;
    align-items: end;
    gap: 10px;
    padding: 10px 10px 0;
    border-left: 1px solid #dfe5e8;
    border-bottom: 1px solid #dfe5e8;
    background:
        linear-gradient(to top, transparent 24%, #edf1f3 25%, transparent 26%),
        linear-gradient(to top, transparent 49%, #edf1f3 50%, transparent 51%),
        linear-gradient(to top, transparent 74%, #edf1f3 75%, transparent 76%);
}
.m16-benchmark-month {
    min-width: 48px;
    flex: 1 0 48px;
    display: grid;
    grid-template-rows: 190px 18px 28px;
    gap: 4px;
    align-items: end;
    text-align: center;
}
.m16-benchmark-column {
    width: min(34px, 72%);
    height: 190px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: end;
    overflow: hidden;
    border: 1px solid #dbe2e6;
    border-radius: 5px 5px 2px 2px;
    background: #f1f3f5;
    box-shadow: 0 2px 6px rgba(24, 38, 46, .05);
}
.m16-benchmark-column:focus-visible {
    outline: 2px solid #8aa9d8;
    outline-offset: 2px;
}
.m16-benchmark-column span {
    width: 100%;
    display: block;
    cursor: help;
    transition: filter .12s ease, box-shadow .12s ease;
}
.m16-benchmark-column span:hover,
.m16-benchmark-column span:focus-visible {
    filter: brightness(.92) saturate(1.08);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55);
    outline: none;
}
.m16-benchmark-column .is-exceeded {
    background: #cc7b7b;
}
.m16-benchmark-column .is-on {
    background: #8a75bf;
}
.m16-benchmark-column .is-under {
    background: #4c9d8e;
}
.m16-benchmark-month > strong {
    color: #27343c;
    font-size: 9px;
}
.m16-benchmark-month > small {
    color: #68747c;
    font-size: 8px;
    line-height: 1.25;
}
.m16-benchmark-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 6px 0 10px;
}
.m16-benchmark-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #59656d;
    font-size: 9px;
}
.m16-benchmark-legend i {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}
.m16-benchmark-legend .is-under {
    background: #4c9d8e;
}
.m16-benchmark-legend .is-on {
    background: #8a75bf;
}
.m16-benchmark-legend .is-exceeded {
    background: #cc7b7b;
}

@media (max-width: 900px) {
    .m16-attention-trend-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 560px) {
    .m16-attention-trend-filter {
        grid-template-columns: 1fr;
    }
}


/* Admin Month board mirrors the Employee board's operational recency signal. */
.m16-admin-month-board-table {
    min-width: 1550px;
}
.m16-admin-month-board-table th {
    width: auto !important;
}
.m16-admin-month-board-table .m16-admin-col-task { width: 27%; }
.m16-admin-month-board-table .m16-admin-col-assignee { width: 13%; }
.m16-admin-month-board-table .m16-admin-col-status { width: 9%; }
.m16-admin-month-board-table .m16-admin-col-progress { width: 10%; }
.m16-admin-month-board-table .m16-admin-col-priority { width: 7%; }
.m16-admin-month-board-table .m16-admin-col-expected { width: 8%; }
.m16-admin-month-board-table .m16-admin-col-notes { width: 10%; }
.m16-admin-month-board-table .m16-admin-col-assessment { width: 7%; }
.m16-admin-month-board-table .m16-admin-col-last-update { width: 9%; }

/* Completion bars expose exact numerator/denominator details on hover/focus. */
.m16-client-completion-bar {
    position: relative;
    overflow: visible !important;
    cursor: help;
}
.m16-client-completion-bar:hover {
    box-shadow: inset 0 0 0 1px rgba(43, 156, 141, .3);
}
.m16-client-completion-bar:focus-visible {
    outline: 2px solid rgba(43, 156, 141, .35);
    outline-offset: 2px;
}
.m16-client-completion-bar::after {
    content: attr(data-completion-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 7px);
    z-index: 8;
    min-width: max-content;
    max-width: 220px;
    padding: 6px 8px;
    border: 1px solid #d5dde2;
    border-radius: 6px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 8px 20px rgba(25, 39, 49, .14);
    color: #27343c;
    font-size: 8px;
    font-weight: 800;
    line-height: 1.25;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 3px);
    transition: opacity .12s ease, transform .12s ease;
}
.m16-client-completion-bar:hover::after,
.m16-client-completion-bar:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Archived work stays in its original Category context without cluttering the
   live operational board. The native details element keeps the section
   accessible and collapsed by default without JavaScript state. */
.m16-archived-task-drawer {
    margin: 7px 8px 10px;
    border: 1px solid #dfe5e8;
    border-radius: 7px;
    background: #f8fafb;
}
.m16-archived-task-drawer > summary {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    color: #59656d;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.m16-archived-task-drawer > summary::-webkit-details-marker { display: none; }
.m16-archived-task-drawer > summary:hover {
    background: #f3f6f7;
    color: #35444c;
}
.m16-archived-task-drawer > summary:focus-visible {
    outline: 2px solid rgba(43, 156, 141, .24);
    outline-offset: 2px;
}
.m16-archived-summary-main {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 9px;
}
.m16-archived-summary-caret {
    font-size: 16px;
    line-height: 1;
    transform-origin: center;
    transition: transform .12s ease;
}
.m16-archived-task-drawer[open] .m16-archived-summary-caret {
    transform: rotate(90deg);
}
.m16-archived-count {
    min-width: 22px;
    padding: 2px 6px;
    border-radius: 999px;
    background: #e7ecef;
    color: #506069;
    text-align: center;
    font-size: 8px;
    font-weight: 850;
}
.m16-archived-task-drawer > summary small {
    color: #7a858c;
    font-size: 8px;
}
.m16-archived-task-wrap {
    overflow-x: auto;
    border-top: 1px solid #e1e6e9;
}
.m16-archived-task-table {
    width: 100%;
    min-width: 840px;
    border-collapse: collapse;
    background: #fbfcfc;
}
.m16-archived-task-table th {
    padding: 7px 9px;
    border-bottom: 1px solid #e2e7ea;
    color: #6d7880;
    font-size: 8px;
    font-weight: 850;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .035em;
}
.m16-archived-task-table td {
    padding: 8px 9px;
    border-bottom: 1px solid #edf0f2;
    color: #59656d;
    font-size: 9px;
    vertical-align: middle;
}
.m16-archived-task-table tbody tr:last-child td { border-bottom: 0; }
.m16-archived-task-table td:first-child {
    min-width: 260px;
    color: #39464e;
}
.m16-archived-task-table td:first-child strong {
    margin-right: 6px;
    font-size: 10px;
}
.m16-archived-task-table time {
    color: #748087;
    white-space: nowrap;
}