/* ==========================================================================
   Admin dashboard - Project Details card (.pd-mx) and its View All modal
   (:is(#TaskUserModal, #AtworkUserModal)). The card's title and date pill come from .wt-head
   (worktask-metrics.css); this file shapes what is inside it in the same
   language as the Work/Task and At Work cards beside it: Poppins throughout,
   muted column labels, ink names, tabular times, hairline rules.
   The inner markup (admin/partial, admin/get_project_details) is shared with
   My Desklog, so everything here is scoped to .pd-mx or the modal's id.
   ========================================================================== */

.pd-mx,
:is(#TaskUserModal, #AtworkUserModal) {
    --pd-ink: #34444e;
    --pd-ink-strong: #1f2a33;
    --pd-muted: #5f6b75;
    --pd-faint: #8b98a1;
    --pd-line: #eef1f4;
    --pd-surface: #ffffff;
    --pd-link: #045ba0;
    --pd-hover: #f7f9fb;
    --pd-sk: #edf0f3;
    --pd-track: #edf1f4;
    --pd-work: #81B504;
    --pd-task: #045ba0;
    --pd-font: "Poppins", sans-serif;
    /* User names keep the app's original list face (new_theme.css td). */
    --pd-font-name: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.dark-mode .pd-mx,
.dark-mode :is(#TaskUserModal, #AtworkUserModal) {
    --pd-ink: #c3ccd2;
    --pd-ink-strong: #e6edf1;
    --pd-muted: #8b98a1;
    --pd-faint: #6b7d89;
    --pd-line: #0b2c40;
    --pd-surface: #010e18;
    --pd-link: #6aa8dc;
    --pd-hover: #04192a;
    --pd-sk: #0a2131;
    --pd-track: #0a3046;
    --pd-work: #8fc31a;
    --pd-task: #3b8fd6;
}

/* --- Layout: donut + project list | user list ------------------------------ */
.pd-mx #project_task_dtl > .row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

/* new_theme.css stacks the halves under 1580px (.tsk_box_full 100% !important)
   and spreads the donut and its list apart (space-between). This card spans the
   dashboard, so it keeps them side by side down to 992px. */
/* Flex columns: as plain blocks the left half's content started 25px below
   the right half's, so the two lists' column labels did not line up. */
.pd-mx #project_task_dtl > .row > .tsk_box_full {
    display: flex;
    flex-direction: column;
    float: none;
    width: 100% !important;
}

@media (min-width: 992px) {
    .pd-mx #project_task_dtl > .row > .tsk_box_full:first-child {
        flex: 0 0 56%;
        width: 56% !important;
    }

    /* The halves were set apart only by empty space; a hairline makes them two
       readings of the same hours. "~": a hidden input sits between them. */
    .pd-mx #project_task_dtl > .row > .tsk_box_full ~ .tsk_box_full {
        flex: 1 1 0;
        width: auto !important;
        min-width: 0;
        border-left: 1px solid var(--pd-line);
        padding-left: 24px;
    }
}

/* Top-aligned, so the project list's "Project / Task Spent" labels sit on the
   same line as the user list's "User / Task Spent" across the divider. */
.pd-mx .project_task_dtl_graph_sec {
    justify-content: flex-start;
    gap: 32px;
    margin: 0;
    padding: 0;
    align-items: flex-start;
}

.pd-mx .prj_dtl_list_head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--pd-line);
    font-family: var(--pd-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--pd-muted);
}

/* --- Donut ------------------------------------------------------------------ */
.pd-mx .project_task_dtl_graph_sec .graph_prj_box {
    flex: 0 0 176px;
    width: 176px;
    max-width: 176px;
    margin: 0;
}

.pd-mx .graph_prj_box_total_round {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    pointer-events: none;
}

/* Donut tooltip (dashboard_ajax.js pdDonutTip): the card tooltip used across
   the dashboard - white panel, hairline, soft shadow, 12px Poppins ink - as an
   HTML panel on <body>, above the "Total" in the ring's hole. */
.pd-donut-tip {
    position: fixed;
    z-index: 1060;
    top: 0;
    left: 0;
    padding: 8px 10px;
    border: 1px solid #e6ebef;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .12), 0 2px 6px rgba(16, 24, 40, .06);
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: #1f2a33;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .1s ease, visibility .1s;
}

.pd-donut-tip.is-on {
    opacity: 1;
    visibility: visible;
}

.pd-donut-tip__row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pd-donut-tip__key {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.dark-mode .pd-donut-tip {
    border-color: #12344a;
    background: #0b1f2e;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .35);
    color: #e6edf1;
}

@media (prefers-reduced-motion: reduce) {
    .pd-donut-tip { transition: none; }
}

.pd-mx .graph_prj_box_total_round span {
    float: none;
    width: auto;
    font-family: var(--pd-font);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: var(--pd-muted);
}

.pd-mx .graph_prj_box_total_round strong {
    float: none;
    width: auto;
    margin-top: 2px;
    font-family: "Poppins TM Label", "Poppins", sans-serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    color: var(--pd-ink-strong);
}

/* --- Project list beside the donut ------------------------------------------ */
.pd-mx .prj_fr_dashbord_name {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 380px;
    margin: 0;
}

.pd-mx .dashbrd_project_prgs_box {
    display: block;
    max-width: none;
    max-height: 176px;
    overflow: auto;
}

.pd-mx .dashbrd_project_prgs_box_row {
    display: block;
    width: 100%;
    margin: 0;
}

.pd-mx .dashbrd_project_prgs_box_row {
    border-bottom: 1px solid var(--pd-line);
}

.pd-mx .dashbrd_project_prgs_box_name {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: none;
    padding: 8px 0;
    font-family: var(--pd-font) !important;
    font-size: 13px;
    line-height: 18px;
    color: var(--pd-ink) !important;
}

.pd-mx .prjrct_clr_box {
    flex: none;
    width: 8px;
    height: 8px;
    margin: 0;
    border-radius: 2px;
}

.pd-mx .prj_dtl_name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pd-mx .dashbrd_project_prgs_box_name .project_spent_hr {
    position: static;
    top: auto;
    right: auto;
    flex: none;
    float: none;
    width: auto;
    padding: 0 0 0 12px;
    font-family: var(--pd-font);
    font-size: 13px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: var(--pd-ink-strong);
}

/* --- User list -------------------------------------------------------------- */
.pd-mx .dashboard_prj_task_dtl_box {
    float: none;
    margin: 0;
    max-height: none;
    overflow: visible;
}

/* The server sends the top five; View All has the rest. */
.pd-mx .prj_dtl_table {
    float: none;
    table-layout: fixed;
    border-collapse: collapse;
}

.pd-mx .prj_dtl_table th {
    padding: 0 0 8px;
    border-bottom: 1px solid var(--pd-line);
    font-family: var(--pd-font);
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    color: var(--pd-muted);
}

.pd-mx .prj_dtl_table th:last-child,
.pd-mx .prj_dtl_table td:last-child {
    width: 110px;
    text-align: right;
}

/* !important on the size: new_theme.css sets every td to 14px !important under
   1450px, which made the times a step larger than the names. */
.pd-mx .prj_dtl_table td {
    padding: 7px 0;
    border-top: 0;
    border-bottom: 1px solid var(--pd-line);
    font-family: var(--pd-font);
    font-size: 13px !important;
    line-height: 18px;
    color: var(--pd-ink);
}

.pd-mx .prj_dtl_table td:last-child {
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: var(--pd-ink-strong);
}

.pd-mx .prj_dtl_table .productivity_user_box_row {
    float: none;
    gap: 10px;
    margin: 0;
}

.pd-mx .prj_dtl_table .productivity_user_avatar {
    flex: none;
    width: 28px;
    min-width: 28px !important;
    height: 28px !important;
    font-family: var(--pd-font);
    font-size: 11px;
    font-weight: 500;
}

.pd-mx .prj_dtl_table .appusage-user-icon,
.pd-mx .prj_dtl_table .appusage-user-icon img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.pd-mx .prj_dtl_table .productivity_user_name_bx {
    float: none;
    max-width: none;
    min-width: 0;
    padding: 0;
    font-family: var(--pd-font-name);
    font-size: 13px;
    line-height: 18px;
    color: var(--pd-ink);
}

/* --- View All ---------------------------------------------------------------- */
.pd-mx #project_task_dtl a[onclick^="showProject"] {
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
    padding: 2px 0;
    font-family: var(--pd-font);
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    color: var(--pd-link);
    text-decoration: none;
}

.pd-mx #project_task_dtl a[onclick^="showProject"]:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pd-mx #project_task_dtl a[onclick^="showProject"]:focus-visible {
    outline: 2px solid var(--pd-link);
    outline-offset: 2px;
    border-radius: 3px;
}

.pd-mx .prj_fr_dashbord_name > .col-md-12 {
    float: none;
    width: auto;
}

/* --- Type scale --------------------------------------------------------------
   Everything inside the card was 13px at every width - below the app's own
   14px floor for table text under 1450px (new_theme.css), and one size for
   column labels, names and values alike. Two steps that follow the card
   title's breakpoint (17px over 1450px, 14px under):
     names and values   15px / 14px   (weight 400; values in the darker ink)
     column labels      14px / 13px   (muted, 500)
     donut total        22px / 19px
   Sizes carry !important where new_theme.css forces td to 14px !important. */
.pd-mx .dashbrd_project_prgs_box_name,
.pd-mx .dashbrd_project_prgs_box_name .project_spent_hr,
.pd-mx .prj_dtl_table td,
.pd-mx .prj_dtl_table .productivity_user_name_bx {
    font-size: 15px !important;
    line-height: 22px;
}

.pd-mx .prj_dtl_table th,
.pd-mx #project_task_dtl a[onclick^="showProject"] {
    font-size: 14px;
    line-height: 20px;
}

/* Project rows take the user rows' height (32px avatar + 8px + 8px), so the
   rules on both sides of the divider line up. */
.pd-mx .dashbrd_project_prgs_box_name { padding: 13px 0; }
.pd-mx .prj_dtl_table td { padding: 8px 0; }

.pd-mx .prj_dtl_table .productivity_user_avatar,
.pd-mx .prj_dtl_table .appusage-user-icon,
.pd-mx .prj_dtl_table .appusage-user-icon img {
    width: 32px;
    min-width: 32px !important;
    height: 32px !important;
}

.pd-mx .prj_dtl_table .productivity_user_avatar { font-size: 12px; }

.pd-mx .prjrct_clr_box { width: 9px; height: 9px; }

.pd-mx .project_task_dtl_graph_sec .graph_prj_box {
    flex-basis: 196px;
    width: 196px;
    max-width: 196px;
}

.pd-mx .graph_prj_box_total_round span { font-size: 13px; line-height: 18px; }
.pd-mx .graph_prj_box_total_round strong { font-size: 22px; line-height: 28px; }

.pd-mx .prj_fr_dashbord_name { max-width: 420px; }
.pd-mx .dashbrd_project_prgs_box { max-height: 245px; }

@media (max-width: 1450px) {
    .pd-mx .dashbrd_project_prgs_box_name,
    .pd-mx .dashbrd_project_prgs_box_name .project_spent_hr,
    .pd-mx .prj_dtl_table td,
    .pd-mx .prj_dtl_table .productivity_user_name_bx {
        font-size: 14px !important;
        line-height: 20px;
    }

    .pd-mx .prj_dtl_table th,
    .pd-mx #project_task_dtl a[onclick^="showProject"] {
        font-size: 13px;
        line-height: 18px;
    }

    .pd-mx .dashbrd_project_prgs_box_name { padding: 12px 0; }
    .pd-mx .prj_dtl_list_head { font-size: 13px; line-height: 18px; }
    .pd-mx .prj_dtl_table td { padding: 7px 0; }

    .pd-mx .prj_dtl_table .productivity_user_avatar,
    .pd-mx .prj_dtl_table .appusage-user-icon,
    .pd-mx .prj_dtl_table .appusage-user-icon img {
        width: 30px;
        min-width: 30px !important;
        height: 30px !important;
    }

    .pd-mx .prj_dtl_table .productivity_user_avatar { font-size: 11px; }

    .pd-mx .prjrct_clr_box { width: 8px; height: 8px; }

    .pd-mx .project_task_dtl_graph_sec .graph_prj_box {
        flex-basis: 176px;
        width: 176px;
        max-width: 176px;
    }

    .pd-mx .graph_prj_box_total_round span { font-size: 12px; line-height: 16px; }
    .pd-mx .graph_prj_box_total_round strong { font-size: 19px; line-height: 24px; }

    .pd-mx .prj_fr_dashbord_name { max-width: 380px; }
    .pd-mx .dashbrd_project_prgs_box { max-height: 225px; }
}

/* --- No data: centred in the card's own height rather than a 10px nudge ----- */
.pd-mx #project_task_dtl .no-data-found {
    width: 100%;
    padding: 24px 0;
}

/* --- Narrow ------------------------------------------------------------------ */
@media (max-width: 991px) {
    .pd-mx #project_task_dtl > .row > .tsk_box_full ~ .tsk_box_full {
        margin-top: 16px;
    }
}

/* From 768px up the donut stays beside its project list. new_theme.css stacks
   them at some widths (1000-1199px), which put the project list below the
   donut while the user list stayed at the top on the right. Under 1280px the
   donut is 150px so both lists keep their room. */
@media (min-width: 768px) {
    /* The legacy column is a wrapping flex container. Use a single stretched
       grid cell so the chart/list area receives the entire user-list height. */
    .pd-mx #project_task_dtl > .row > .tsk_box_full:first-child {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .pd-mx .project_task_dtl_graph_sec {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr);
        grid-template-rows: 1fr;
        align-items: start !important;
    }

    /* The single grid row fills the list area; only the ring moves down. */
    .pd-mx .project_task_dtl_graph_sec .graph_prj_box {
        align-self: center;
    }

    /* Takes what the donut leaves (it asked for 380px and wrapped under it). */
    .pd-mx .project_task_dtl_graph_sec .prj_fr_dashbord_name {
        align-self: start;
        width: auto;
        min-width: 0;
    }
}

@media (min-width: 768px) and (max-width: 1279px) {
    .pd-mx .project_task_dtl_graph_sec {
        gap: 24px;
    }

    .pd-mx .project_task_dtl_graph_sec .graph_prj_box {
        flex-basis: 150px;
        width: 150px;
        max-width: 150px;
    }

    .pd-mx .graph_prj_box_total_round strong {
        font-size: 17px;
        line-height: 22px;
    }
}

/* 992-1155px: the narrowest side-by-side range. The donut's half takes 60%
   and the donut 128px, so project names keep ~270px instead of truncating
   at ~190px. */
@media (min-width: 992px) and (max-width: 1155px) {
    .pd-mx #project_task_dtl > .row > .tsk_box_full:first-child {
        flex-basis: 60%;
        width: 60% !important;
    }

    .pd-mx .project_task_dtl_graph_sec {
        gap: 20px;
    }

    .pd-mx .project_task_dtl_graph_sec .graph_prj_box {
        flex-basis: 128px;
        width: 128px;
        max-width: 128px;
    }

    .pd-mx .graph_prj_box_total_round span {
        font-size: 11px;
        line-height: 14px;
    }

    .pd-mx .graph_prj_box_total_round strong {
        font-size: 15px;
        line-height: 20px;
    }
}

@media (max-width: 767px) {
    .pd-mx .project_task_dtl_graph_sec {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .pd-mx .project_task_dtl_graph_sec .graph_prj_box {
        align-self: center;
    }

    .pd-mx .prj_fr_dashbord_name {
        max-width: none;
    }
}

/* --- Skeleton (common/project_details_skeleton.blade.php) -------------------
   Same columns and row heights as the loaded card: head 29px, rows 49px over
   1450px (head 20 + 8 + 1; rows 32px avatar + 8 + 8 + 1), 27 / 45 under it;
   ring as thick as the donut's (cutout 80% = a tenth of its width). One slow
   pulse; none under reduced motion. */
.pd-mx .pd-sk {
    animation: pd-pulse 1.6s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
    .pd-mx .pd-sk { animation: none; }
}

.pd-mx .pd-sk .pd-sk-bar,
.pd-mx .pd-sk .pd-sk-key,
.pd-mx .pd-sk .pd-sk-avatar {
    flex: none;
    background: var(--pd-sk);
}

/* Full width: an older .tsk_box_full rule aligns the column's contents to the
   end, which squeezed the user rows into a strip at the right edge. */
.pd-mx .pd-sk > .tsk_box_full {
    align-items: stretch;
}

.pd-mx .pd-sk > .tsk_box_full > .pd-sk-head,
.pd-mx .pd-sk > .tsk_box_full > .pd-sk-row {
    align-self: stretch;
    width: 100%;
}

.pd-mx .pd-sk > .tsk_box_full > .pd-sk-bar--link {
    align-self: flex-start;
}

.pd-mx .pd-sk-ring {
    width: 100%;
    aspect-ratio: 1;
    border: 20px solid var(--pd-sk);
    border-radius: 50%;
}

.pd-mx .pd-sk-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 29px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--pd-line);
}

.pd-mx .pd-sk-row {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 49px;
    border-bottom: 1px solid var(--pd-line);
}

.pd-mx .pd-sk-bar { height: 10px; border-radius: 4px; }
.pd-mx .pd-sk-bar--label { width: 64px; }
.pd-mx .pd-sk-bar--name { flex: 0 1 auto; }
.pd-mx .pd-sk-bar--num { width: 72px; margin-left: auto; }
.pd-mx .pd-sk-bar--link { width: 64px; height: 12px; margin-top: 14px; }

.pd-mx .pd-sk-key { width: 9px; height: 9px; border-radius: 2px; }
.pd-mx .pd-sk-avatar { width: 32px; height: 32px; border-radius: 50%; }

@media (max-width: 1450px) {
    .pd-mx .pd-sk-ring { border-width: 18px; }
    .pd-mx .pd-sk-head { height: 27px; }
    .pd-mx .pd-sk-row { height: 45px; }
    .pd-mx .pd-sk-key { width: 8px; height: 8px; }
    .pd-mx .pd-sk-avatar { width: 30px; height: 30px; }
}

/* Page skeleton (admin/dashboard_skelton_div): the names and times above
   out-rank the skeleton's transparent text. */
.loading-skeleton .pd-mx .dashbrd_project_prgs_box_name,
.loading-skeleton .pd-mx .dashbrd_project_prgs_box_name .project_spent_hr {
    color: transparent !important;
}

/* ==========================================================================
   View All modal (:is(#TaskUserModal, #AtworkUserModal)): Projects / Users
   ========================================================================== */
/* dark_mode.css inverts every .modal (filter: invert + hue-rotate) instead of
   theming it; this one carries its own dark colours, so the filter is off. */
.dark-mode :is(#TaskUserModal, #AtworkUserModal) {
    filter: none;
}

:is(#TaskUserModal, #AtworkUserModal) .modal-dialog {
    width: 560px;
    max-width: calc(100vw - 32px);
}

:is(#TaskUserModal, #AtworkUserModal) .modal-content {
    border: 1px solid var(--pd-line);
    border-radius: 8px;
    background: var(--pd-surface);
    box-shadow: 0 16px 40px rgba(16, 24, 40, .16), 0 2px 8px rgba(16, 24, 40, .06);
    overflow: hidden;
}

.dark-mode :is(#TaskUserModal, #AtworkUserModal) .modal-content {
    background: #021520;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
}

:is(#TaskUserModal, #AtworkUserModal) .modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px 14px;
    border: 0;
    border-bottom: 1px solid var(--pd-line);
}

:is(#TaskUserModal, #AtworkUserModal) .modal-header::before,
:is(#TaskUserModal, #AtworkUserModal) .modal-header::after {
    display: none;
}

:is(#TaskUserModal, #AtworkUserModal) .pd-modal__title {
    margin: 0;
    font-family: var(--pd-font);
    font-size: 17px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    color: var(--pd-ink-strong);
}

:is(#TaskUserModal, #AtworkUserModal) .pd-modal__range {
    margin: 2px 0 0;
    font-family: var(--pd-font);
    font-size: 12px;
    line-height: 18px;
    color: var(--pd-muted);
}

:is(#TaskUserModal, #AtworkUserModal) .close {
    position: static;
    top: auto;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: -4px -8px 0 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    color: var(--pd-faint);
    text-shadow: none;
    opacity: 1;
    -webkit-text-stroke: 0;
    transition: background-color .15s ease, color .15s ease;
}

:is(#TaskUserModal, #AtworkUserModal) .close:hover {
    background: var(--pd-hover);
    color: var(--pd-ink-strong);
}

:is(#TaskUserModal, #AtworkUserModal) .close:focus {
    outline: none;
}

:is(#TaskUserModal, #AtworkUserModal) .close:focus-visible {
    border-color: var(--pd-link);
    color: var(--pd-ink-strong);
}

:is(#TaskUserModal, #AtworkUserModal) .modal-body {
    padding: 0;
}

/* new_theme.css gave the list a 300px floor, which left a blank band above
   Total on a short list. */
#TaskUserModal .modal-body #taskUserDiv,
#AtworkUserModal .modal-body #AtworkUserDiv {
    min-height: 0;
}

/* Table: head and Total stay in view while the rows scroll between them. */
:is(#TaskUserModal, #AtworkUserModal) .pd-list {
    max-height: min(420px, calc(100vh - 220px));
    overflow: auto;
}

:is(#TaskUserModal, #AtworkUserModal) .pd-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--pd-font);
}

/* Font on the cells: new_theme.css sets Source Sans on every td. */
/* Rows 14px, column labels 13px (below): the card's under-1450px step, the
   modal being a fixed 560px wide. */
:is(#TaskUserModal, #AtworkUserModal) .pd-table th,
:is(#TaskUserModal, #AtworkUserModal) .pd-table td {
    font-family: var(--pd-font);
    padding: 10px 20px;
    font-size: 14px !important;
    line-height: 20px;
    text-align: left;
    vertical-align: middle;
}

/* A global rule made tbody a block, which stretched a short list's rows and
   left a blank band above Total. */
:is(#TaskUserModal, #AtworkUserModal) .pd-table tbody {
    display: table-row-group;
    height: auto;
}

:is(#TaskUserModal, #AtworkUserModal) .pd-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding-top: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--pd-line);
    background: var(--pd-surface);
    font-size: 13px !important;
    font-weight: 500;
    color: var(--pd-muted);
}

.dark-mode :is(#TaskUserModal, #AtworkUserModal) .pd-table thead th,
.dark-mode :is(#TaskUserModal, #AtworkUserModal) .pd-total th,
.dark-mode :is(#TaskUserModal, #AtworkUserModal) .pd-total td {
    background: #021520;
}

:is(#TaskUserModal, #AtworkUserModal) .pd-table tbody td {
    border-bottom: 1px solid var(--pd-line);
    color: var(--pd-ink);
}

:is(#TaskUserModal, #AtworkUserModal) .pd-table tbody tr:last-child td {
    border-bottom: 0;
}

:is(#TaskUserModal, #AtworkUserModal) .pd-table tbody tr:hover td {
    background: var(--pd-hover);
}

:is(#TaskUserModal, #AtworkUserModal) .pd-table .is-num {
    width: 120px;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

:is(#TaskUserModal, #AtworkUserModal) .pd-table tbody .is-num {
    font-weight: 400;
    color: var(--pd-ink-strong);
}

/* Total: its own row under the scrolling list (dashboard.blade.php pdTable). */
:is(#TaskUserModal, #AtworkUserModal) .pd-total {
    border-top: 1px solid var(--pd-line);
}

/* .pd-total .is-num too: the browser wraps this row in a tbody, so the row
   rule's 500 would otherwise win over Total's 600. */
:is(#TaskUserModal, #AtworkUserModal) .pd-total th,
:is(#TaskUserModal, #AtworkUserModal) .pd-total td,
:is(#TaskUserModal, #AtworkUserModal) .pd-total tbody .is-num {
    padding-top: 12px;
    padding-bottom: 14px;
    background: var(--pd-surface);
    font-weight: 600;
    color: var(--pd-ink-strong);
}

:is(#TaskUserModal, #AtworkUserModal) .pd-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

:is(#TaskUserModal, #AtworkUserModal) .pd-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#TaskUserModal, #AtworkUserModal) .pd-name--user {
    font-family: var(--pd-font-name);
}

:is(#TaskUserModal, #AtworkUserModal) .pd-key {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

:is(#TaskUserModal, #AtworkUserModal) .pd-avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--secondary-color, #045ba0);
    font-family: var(--pd-font);
    font-size: 11px;
    font-weight: 500;
    color: #fff;
    overflow: hidden;
}

:is(#TaskUserModal, #AtworkUserModal) .pd-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

:is(#TaskUserModal, #AtworkUserModal) .pd-empty {
    margin: 0;
    padding: 40px 20px;
    font-family: var(--pd-font);
    font-size: 13px;
    text-align: center;
    color: var(--pd-muted);
}

/* Loading: placeholder rows in the table's own rhythm. */
:is(#TaskUserModal, #AtworkUserModal) .pd-loading {
    padding: 12px 20px 16px;
    animation: pd-pulse 1.6s ease-in-out infinite alternate;
}

:is(#TaskUserModal, #AtworkUserModal) .pd-loading__row {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 41px;
}

:is(#TaskUserModal, #AtworkUserModal) .pd-loading__row + .pd-loading__row {
    border-top: 1px solid var(--pd-line);
}

:is(#TaskUserModal, #AtworkUserModal) .pd-loading__dot,
:is(#TaskUserModal, #AtworkUserModal) .pd-loading__bar {
    background: var(--pd-sk);
    border-radius: 4px;
}

:is(#TaskUserModal, #AtworkUserModal) .pd-loading__dot { width: 12px; height: 12px; border-radius: 3px; }
:is(#TaskUserModal, #AtworkUserModal) .pd-loading__bar { height: 10px; width: 38%; }
:is(#TaskUserModal, #AtworkUserModal) .pd-loading__bar--num { width: 64px; margin-left: auto; }
:is(#TaskUserModal, #AtworkUserModal) .pd-loading__row:nth-child(2n) .pd-loading__bar:not(.pd-loading__bar--num) { width: 52%; }
:is(#TaskUserModal, #AtworkUserModal) .pd-loading__row:nth-child(3n) .pd-loading__bar:not(.pd-loading__bar--num) { width: 30%; }

@keyframes pd-pulse {
    from { opacity: 1; }
    to   { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
    :is(#TaskUserModal, #AtworkUserModal) .pd-loading { animation: none; }
}

/* ==========================================================================
   At Work modal (#AtworkUserModal): User | At Work | progress against the
   user's minimum hours - the At Work card's two bars (green at work, blue
   task) with the share before and the minimum after.
   ========================================================================== */
#AtworkUserModal .modal-dialog {
    width: 640px;
}

/* dark_mode.css inverts this loader on its own as well. */
.dark-mode #AtworkUserModal #atworkLoader {
    filter: none;
}

#AtworkUserModal .aw-table td:first-child {
    max-width: 0;
    width: 50%;
}

#AtworkUserModal .aw-progress {
    width: 50%;
}

#AtworkUserModal .pd-name a {
    color: inherit;
    text-decoration: none;
}

#AtworkUserModal .pd-name a:hover,
#AtworkUserModal .pd-name a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The At Work card's bar (admin/partial, .task_bar_sec_progress), same
   measurements: a 6px #edf1f2 track with 4px radius; the green at-work bar
   6px on it; the blue task bar 5px, 5px down, so it shows as a strip along the
   track's lower edge; the two labels 10px below its top, 11px Source Sans Pro. */
#AtworkUserModal .aw-meter {
    display: block;
    padding-top: 2px;
}

#AtworkUserModal .aw-meter__track {
    position: relative;
    height: 6px;
    border-radius: 4px;
    background: #edf1f2;
}

#AtworkUserModal .aw-meter__work,
#AtworkUserModal .aw-meter__task {
    position: absolute;
    left: 0;
    display: block;
    max-width: 100%;
    border-radius: 4px;
}

#AtworkUserModal .aw-meter__work {
    top: 0;
    height: 6px;
    background: #81B504;
}

#AtworkUserModal .aw-meter__task {
    top: 5px;
    height: 5px;
    background: #045ba0;
}

#AtworkUserModal .aw-meter__labels {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11px;
    line-height: 14px;
    color: #4a4a4a;
}

.dark-mode #AtworkUserModal .aw-meter__track {
    background: #112736;
}

.dark-mode #AtworkUserModal .aw-meter__work {
    background: #236a23;
}

.dark-mode #AtworkUserModal .aw-meter__labels {
    color: #ccc;
}

/* Key for the two bars, in the column's heading: starts where the bars do
   (after the 36px share and its 10px gap). */
#AtworkUserModal thead .aw-progress {
    padding-left: 20px;
}

@media (max-width: 600px) {
    #AtworkUserModal thead .aw-progress { padding-left: 0; }
}

/* Key for the two bars, in the column's heading. */
#AtworkUserModal .aw-key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
}

#AtworkUserModal .aw-key + .aw-key {
    margin-left: 14px;
}

#AtworkUserModal .aw-key__dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

#AtworkUserModal .aw-key__dot--work { background: var(--pd-work); }
#AtworkUserModal .aw-key__dot--task { background: var(--pd-task); }

/* Loading rows: avatar, name, time, bar. */
#AtworkUserModal .pd-loading__dot--round {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

#AtworkUserModal .pd-loading__bar--num {
    width: 56px;
    margin-left: auto;
}

/* !important over the shared every-2nd / 3rd-row name widths, which also
   matched this bar. */
#AtworkUserModal .pd-loading__bar--track {
    flex: none;
    width: 36% !important;
    height: 6px;
    margin-left: 24px;
}

#AtworkUserModal .pd-loading__row {
    height: 51px;
}

@media (max-width: 600px) {
    #AtworkUserModal .aw-key {
        display: none;
    }

    #AtworkUserModal .aw-table td:first-child {
        width: 55%;
    }

    #AtworkUserModal .aw-progress {
        width: 45%;
    }
}

/* --- View All modals: type scale ---------------------------------------------
   The modals were one fixed size (rows 14px, headings 13px, range 12px), so
   over 1450px the list a View All opens read smaller than the card it came from
   (15px rows, 14px headings there). Same two steps as the cards: over 1450px
   rows 15px, headings 14px, range 13px, avatars 32px; under, as before.
   The 17px title stays: a dialog heading at any width. */
@media (min-width: 1451px) {
    :is(#TaskUserModal, #AtworkUserModal) .pd-table th,
    :is(#TaskUserModal, #AtworkUserModal) .pd-table td {
        font-size: 15px !important;
        line-height: 22px;
    }

    :is(#TaskUserModal, #AtworkUserModal) .pd-table thead th {
        font-size: 14px !important;
        line-height: 20px;
    }

    :is(#TaskUserModal, #AtworkUserModal) .pd-modal__range {
        font-size: 13px;
    }

    :is(#TaskUserModal, #AtworkUserModal) .pd-avatar {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }


    :is(#TaskUserModal, #AtworkUserModal) .pd-loading__row {
        height: 43px;
    }

    #AtworkUserModal .pd-loading__row {
        height: 53px;
    }
}