/* ===== source: Task screens — Manager/ProjectTasks + Agent/AgentTasks
 *              Leave screens — Manager/Leave + Agent/Leave
 *              Team dialog   — Admin/Teams =====
 *
 * One visual language shared by every Task screen: the Manager's task list and
 * task detail, the Agent's assigned-task list and task detail, and the dialogs
 * opened from them. The Leave approval queue and the Agent's own leave list reuse
 * the same `ts-` shell (ts-page / ts-card / ts-grid-scroll / ts-pill) rather than
 * growing a second, near-identical stylesheet. The Team create/edit dialog does
 * the same with the `ts-dialog` shell, so a Team is picked and shown the way a
 * Task assignment is. Written here rather than as
 * Blazor-scoped .razor.css because the same rules must reach several pages AND
 * their dialogs, and a dialog's content is rendered by DialogService outside the
 * calling page's CSS scope.
 *
 * Every class is namespaced `ts-` so nothing here can collide with the app-wide
 * rules in app.css. Where a rule below carries !important it is because the
 * app.css rule it overrides carries one too — matching it is deliberate.
 *
 * Two app.css rules in particular shape how the markup is written:
 *   .rz-dialog-content .rz-stack { gap: 0 !important; }   -> dialogs lay out with
 *       plain divs and CSS gap, never RadzenStack Gap, which is silently dropped.
 *   .rz-dialog-content .rz-button { margin: 15px 0 0 10px !important; }
 *       -> the dialog footer resets button margins and owns its own spacing.
 */

:root {
    --ts-surface: #ffffff;
    --ts-subtle: #f7f9fc;
    --ts-border: #e6eaf2;
    --ts-border-soft: #f0f3f8;
    --ts-heading: #10233d;
    --ts-text: #33415c;
    --ts-muted: #6b7a90;
    --ts-radius: 10px;
    --ts-accent: #164ca0;
    --ts-accent-wash: rgba(22, 76, 160, 0.08);
}

/* ---------- Page shell ---------- */

.ts-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 24px 40px;
    min-width: 0;
}

.ts-page > * {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 767px) {
    .ts-page {
        padding: 16px 12px 32px;
        gap: 16px;
    }
}

/* ---------- Card ---------- */

.rz-card.ts-card,
.ts-card {
    padding: 0 !important;
    background: var(--ts-surface);
    border: 1px solid var(--ts-border);
    border-radius: var(--ts-radius) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 14px 30px -22px rgba(16, 24, 40, 0.45) !important;
    overflow: hidden;
}

.ts-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ts-border);
    background: linear-gradient(180deg, #fbfcfe 0%, #f4f7fc 100%);
}

.ts-card-head-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ts-card-head-text {
    min-width: 0;
}

.ts-card-title {
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 22px !important;
    letter-spacing: 0.01em !important;
    color: var(--ts-heading) !important;
    text-transform: none !important;
}

.ts-card-sub {
    display: block;
    margin: 2px 0 0 !important;
    font-size: 12.5px !important;
    line-height: 18px !important;
    color: var(--ts-muted) !important;
}

.ts-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Time Sheet Report download (timesheet-report-download): one button that opens a format menu. The
   button keeps the date pickers' height so the header row stays on one line. */
.timesheet-report-wrap {
    position: relative;
    display: inline-flex;
}

.timesheet-report.rz-button {
    height: 40px;
    padding: 0 14px;
    gap: 8px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.timesheet-report .rzi {
    font-size: 18px;
}

.timesheet-report-caret {
    margin-left: 2px;
    opacity: 0.85;
}

.timesheet-report-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: transparent;
}

.timesheet-report-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1000;
    min-width: 200px;
    padding: 6px;
    background: var(--ts-surface);
    border: 1px solid var(--ts-border);
    border-radius: var(--ts-radius);
    box-shadow: 0 8px 24px rgba(16, 35, 61, 0.12);
}

.timesheet-report-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ts-text);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.timesheet-report-option:hover,
.timesheet-report-option:focus-visible {
    background: var(--ts-accent-wash);
    color: var(--ts-accent);
    outline: none;
}

.timesheet-report-option .rzi {
    font-size: 18px;
    color: var(--ts-accent);
}

/* A field label sitting BESIDE its control rather than above it, for the selectors that live in a
   card header. Deliberately not .ts-field-label: that one is display:block with a bottom margin,
   which is right above a stacked field and wrong here — inside the header's flex row it lifts the
   text off the control's centre line. Same type treatment, so the two still read as one label
   style. */
.ts-inline-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ts-muted);
    white-space: nowrap;
}

.ts-card-body {
    padding: 20px;
}

.ts-card-body--flush {
    padding: 0;
}

/* A small tinted square holding the section's icon, left of its title. */
.ts-head-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ts-accent-wash);
}

.ts-head-icon .rzi,
.ts-head-icon i {
    font-size: 18px !important;
    line-height: 1 !important;
    color: var(--ts-accent) !important;
}

/* Buttons inside a task card: slightly softer corners than the app default. */
.ts-card .rz-button {
    border-radius: 6px !important;
}

/* ---------- Filter bar ---------- */

.ts-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px 18px;
    align-items: end;
}

.ts-filter {
    min-width: 0;
}

.ts-filter--wide {
    grid-column: span 2;
}

@media (max-width: 767px) {
    .ts-filter--wide {
        grid-column: span 1;
    }
}

.ts-filter-label {
    display: block;
    margin-bottom: 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ts-muted);
}

.ts-filter .rz-dropdown,
.ts-filter .rz-datepicker,
.ts-filter .rz-textbox {
    width: 100% !important;
}

.ts-daterange {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ts-daterange > .rz-datepicker {
    flex: 1 1 0;
    min-width: 0;
}

.ts-daterange-sep {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--ts-muted);
}

/* Actions sit on their own row under the inputs, so adding a filter never
   pushes Apply out of reach on a narrow screen. */
.ts-filter-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--ts-border-soft);
}

.ts-filter-summary {
    font-size: 12.5px;
    color: var(--ts-muted);
}

.ts-filter-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* ---------- Data grid ---------- */

/* Horizontal overflow is contained here and given a thin, deliberate scrollbar,
   instead of the browser default bar the grid used to grow inside its card. */
.ts-grid-scroll {
    width: 100%;
    overflow-x: auto;
}

.ts-grid-scroll::-webkit-scrollbar {
    height: 8px;
}

.ts-grid-scroll::-webkit-scrollbar-thumb {
    background: #cdd6e4;
    border-radius: 8px;
}

.ts-grid-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.ts-grid.rz-data-grid,
.ts-grid .rz-data-grid {
    background: var(--ts-surface) !important;
    border: 0 !important;
    width: 100%;
}

.ts-grid .rz-data-grid-data {
    border: 0 !important;
}

.ts-grid .rz-grid-table thead th {
    background: var(--ts-subtle) !important;
    padding: 11px 16px !important;
    border-bottom: 1px solid var(--ts-border) !important;
    vertical-align: top;
}

.ts-grid .rz-grid-table thead th .rz-column-title-content {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ts-muted) !important;
    white-space: nowrap;
}

/* The inline filter row of FilterMode.Simple. app.css gives these a 100px
   min-width, which is what made a filtered grid wider than its card. */
.ts-grid .rz-cell-filter {
    margin-top: 8px !important;
}

.ts-grid .rz-cell-filter .rz-textbox,
.ts-grid .rz-cell-filter .rz-dropdown,
.ts-grid .rz-cell-filter .rz-datepicker {
    width: 100% !important;
    min-width: 0 !important;
}

.ts-grid .rz-cell-filter .rz-textbox,
.ts-grid .rz-cell-filter .rz-dropdown {
    font-size: 13px !important;
    background: var(--ts-surface) !important;
}

.ts-grid .rz-grid-table tbody td {
    padding: 11px 16px !important;
    border-bottom: 1px solid var(--ts-border-soft) !important;
    vertical-align: middle;
}

.ts-grid .rz-grid-table tbody td .rz-cell-data {
    font-size: 13.5px !important;
    line-height: 20px !important;
    color: var(--ts-text) !important;
}

.ts-grid .rz-grid-table tbody tr:hover > td {
    background: #f7faff !important;
}

.ts-grid .rz-grid-table tbody tr:last-child > td {
    border-bottom: 0 !important;
}

.ts-grid .rz-paginator {
    border-top: 1px solid var(--ts-border) !important;
    background: var(--ts-surface) !important;
    padding: 10px 16px !important;
}

.ts-grid .rz-datatable-emptymessage,
.ts-grid .rz-grid-table tbody tr.rz-datatable-emptymessage td {
    padding: 40px 16px !important;
    color: var(--ts-muted) !important;
    font-size: 13.5px !important;
}

/* Icon-only row actions: app.css strips their background, so the hit area is
   restored here as a soft tinted square. */
.ts-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.ts-grid .rz-grid-table td .ts-row-actions .rz-button-icon-only {
    width: 28px;
    height: 28px;
    min-width: 28px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    background-color: var(--ts-accent-wash) !important;
}

.ts-grid .rz-grid-table td .ts-row-actions .rz-button-icon-only:hover {
    background-color: rgba(22, 76, 160, 0.16) !important;
}

.ts-grid .rz-grid-table td .ts-row-actions .rz-danger.rz-button-icon-only {
    background-color: rgba(192, 41, 63, 0.09) !important;
}

.ts-grid .rz-grid-table td .ts-row-actions .rz-danger.rz-button-icon-only:hover {
    background-color: rgba(192, 41, 63, 0.18) !important;
}

.ts-grid .rz-grid-table td .ts-row-actions .rz-danger .rzi {
    color: #c0293f !important;
}

/* A record identifier that opens its detail page. A plain <a> rather than
   RadzenLink: app.css sizes .rz-card .rz-link-text at 34px for dashboard tiles,
   and these grids live inside cards. */
.ts-link {
    font-size: inherit;
    font-weight: 600;
    line-height: inherit;
    color: var(--ts-accent);
    text-decoration: none;
}

.ts-link:hover,
.ts-link:focus {
    color: var(--ts-accent);
    text-decoration: underline;
}

/* A date range in one cell: the two ends stacked, so a Start and an End column
   become one column narrow enough to keep the grid inside its card. */
.ts-window {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 18px;
    white-space: nowrap;
}

.ts-window__to {
    color: var(--ts-muted);
    font-size: 12.5px;
}

.ts-muted {
    color: var(--ts-muted);
}

/* The per-agent rows in the assignment pre-flight. A list, because the entries are one
   agent each and their order carries no meaning — but without the browser's bullets and
   indent, which read as prose inside a dialog that is already a sequence of labelled
   blocks. */
.ts-plain-list {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
}

.ts-plain-list > li {
    padding: 3px 0;
    font-size: 13px;
    line-height: 19px;
}

.ts-dash {
    color: #b6c0cf;
}

/* ---------- Status / priority pills ---------- */

.ts-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 17px;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.ts-pill__dot {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.ts-pill--neutral {
    background: #f1f4f9;
    border-color: #e0e6f0;
    color: #5b6b82;
}

.ts-pill--info {
    background: #eaf2fd;
    border-color: #cfe0f8;
    color: #1a5fbf;
}

.ts-pill--progress {
    background: #eef0fe;
    border-color: #d8ddfb;
    color: #4348c9;
}

.ts-pill--success {
    background: #e9f7ef;
    border-color: #c7ead6;
    color: #157347;
}

.ts-pill--warning {
    background: #fff4e5;
    border-color: #ffe0b8;
    color: #a55a00;
}

.ts-pill--danger {
    background: #fdecef;
    border-color: #f8ccd6;
    color: #c0293f;
}

/* At Risk (tasks-emergency-requests-and-risk-list): orange-red, distinct from the warning amber. */
.ts-pill--atrisk {
    background: #fff0e8;
    border-color: #fdd0b8;
    color: #b3400a;
}

/* ---------- Detail: label / value pairs ---------- */

.ts-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px 24px;
}

.ts-field {
    min-width: 0;
}

.ts-field--full {
    grid-column: 1 / -1;
}

.ts-field-label {
    display: block;
    margin-bottom: 4px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ts-muted);
}

.ts-field-value {
    font-size: 14px;
    line-height: 21px;
    font-weight: 500;
    color: var(--ts-heading);
    overflow-wrap: anywhere;
}

.ts-field-value--muted {
    font-weight: 400;
    color: var(--ts-muted);
}

.ts-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* A read-only strip under a detail header: the project window, ownership and
   other context that is set elsewhere and cannot be edited on this screen. */
.ts-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 18px;
    padding: 10px 12px;
    border: 1px solid #e3e9f4;
    border-left: 3px solid var(--ts-accent);
    border-radius: 8px;
    background: #f7f9fd;
    font-size: 12.5px;
    line-height: 18px;
    color: #47576e;
}

.ts-note .rzi,
.ts-note i {
    font-size: 16px !important;
    color: var(--ts-accent) !important;
}

/* ---------- Empty / error states ---------- */

.ts-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 24px;
    text-align: center;
}

.ts-state-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ts-accent-wash);
}

.ts-state-icon .rzi,
.ts-state-icon i {
    font-size: 26px !important;
    color: var(--ts-accent) !important;
}

.ts-state-icon--danger {
    background: rgba(192, 41, 63, 0.09);
}

.ts-state-icon--danger .rzi,
.ts-state-icon--danger i {
    color: #c0293f !important;
}

.ts-state-title {
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--ts-heading) !important;
}

.ts-state-text {
    max-width: 520px;
    font-size: 13.5px;
    line-height: 20px;
    color: var(--ts-muted);
}

/* ---------- Dialogs ---------- */

/* Built from plain divs on purpose — see the note at the top of this section:
   app.css zeroes the gap of any RadzenStack inside a dialog. */
.ts-dialog {
    display: flex;
    flex-direction: column;
}

.ts-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 2px 2px 18px;
}

.ts-dialog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.ts-dialog-span-all {
    grid-column: 1 / -1;
}

.ts-dialog-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ts-dialog-section-title {
    margin: 0;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ts-muted);
}

/* One configured field: its control plus, when there is one, its help text. The
   wrapper is what the section's 16px gap separates, so a hint stays attached to
   the control it belongs to instead of floating a full field-gap below it. */
.ts-dialog-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ts-field-hint {
    margin-top: 5px;
    font-size: 12px;
    line-height: 17px;
    color: var(--ts-muted);
    overflow-wrap: anywhere;
}

/* A value the dialog shows but does not let anyone change. */
.ts-dialog-readonly {
    padding: 9px 12px;
    border: 1px solid var(--ts-border);
    border-radius: 6px;
    background: var(--ts-subtle);
    font-size: 13.5px;
    line-height: 20px;
    color: var(--ts-text);
    overflow-wrap: anywhere;
}

.ts-dialog-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #dde7f8;
    border-radius: 8px;
    background: #f2f6fd;
    font-size: 12.5px;
    line-height: 18px;
    color: #41536b;
}

.ts-dialog-note .rzi,
.ts-dialog-note i {
    font-size: 16px !important;
    color: var(--ts-accent) !important;
}

.ts-dialog-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--ts-border);
}

/* app.css pushes every dialog button 15px down and 10px right; the footer owns
   its own spacing, so those are reset rather than compounded. */
.ts-dialog-foot .rz-button {
    margin: 0 !important;
    min-width: 100px;
    border-radius: 6px !important;
}

.ts-dialog-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
}

/* The circular progress bar is fixed and full-viewport app-wide (app.css loader
   rules), which is right for a page load and wrong inside a dialog or a card. */
.ts-dialog-loading .rz-progressbar-circular-md,
.ts-inline-loading .rz-progressbar-circular-md {
    position: static !important;
    width: 44px !important;
    height: 44px !important;
    background: transparent !important;
}

.ts-inline-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 56px 24px;
}

/* ---------- Multi-select chips ---------- */

/* Every selected value in a Chips multi-select — the Agents picker on Assign
   Agents, the Teams picker on the task form — renders as a `.rz-chip` whose
   remove control is a RadzenButton.

   Inside a dialog app.css pushes EVERY .rz-button 15px down and 10px right, so
   that button was shoved out of its own chip: the "x" sat detached in a grey
   slab to the right of the name and stretched the whole row. Resetting that
   margin needs !important because the rule it overrides carries one. The rest
   restyles the chip as a compact pill in the task accent, so a selection reads
   as one token rather than two adjacent boxes. */

:is(.ts-dialog, .ts-page) .rz-dropdown-chips {
    padding: 6px 8px;
}

:is(.ts-dialog, .ts-page) .rz-dropdown-chips .rz-dropdown-chips-wrapper {
    gap: 6px;
    align-items: center;
    /* Many selections wrap and then scroll, so the picker cannot grow tall
       enough to push the dialog's buttons off screen. */
    max-height: 104px;
    overflow-y: auto;
}

:is(.ts-dialog, .ts-page) .rz-dropdown-chips .rz-chip {
    max-width: 100%;
    gap: 2px;
    padding: 2px 3px 2px 10px;
    border: 1px solid #cfe0f8;
    border-radius: 999px;
    background-color: var(--ts-accent-wash);
    color: var(--ts-accent);
}

:is(.ts-dialog, .ts-page) .rz-dropdown-chips .rz-chip .rz-chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 19px;
    color: var(--ts-accent);
}

:is(.ts-dialog, .ts-page) .rz-dropdown-chips .rz-chip .rz-button {
    flex: 0 0 auto;
    align-self: center;
    width: 19px;
    height: 19px;
    min-width: 19px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    border-radius: 50% !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: var(--ts-accent) !important;
}

:is(.ts-dialog, .ts-page) .rz-dropdown-chips .rz-chip .rz-button:hover {
    background-color: rgba(22, 76, 160, 0.18) !important;
}

:is(.ts-dialog, .ts-page) .rz-dropdown-chips .rz-chip .rz-button .rzi,
:is(.ts-dialog, .ts-page) .rz-dropdown-chips .rz-chip .rz-button i {
    font-size: 13px !important;
    line-height: 19px !important;
    color: inherit !important;
}

/* Deliberately nothing here for the options PANEL: DialogService renders it on
   the body, outside .ts-dialog, so any rule for it would be app-wide rather
   than scoped to the task screens. It keeps the app.css styling it shares with
   every other dropdown. */

/* ---------- Admin > Teams: people pickers and member rows ----------
 *
 * The Team create/edit dialog picks PEOPLE, not codes, and a bare list of
 * names in a plain dropdown gave no way to tell two similar names apart or to
 * see at a glance how many agents a team already has. These classes give a
 * person an initials avatar plus their resource number, and give the team's
 * stored members a proper row with its own remove control.
 *
 * Namespaced `ts-` and used only from inside the templates that render them, so
 * the option rows style correctly even though DialogService renders a dropdown's
 * options panel on the body, outside `.ts-dialog`. */

/* A required field's marker, on the label rather than inside the control. */
.ts-req {
    margin-left: 3px;
    color: #c0293f;
    font-weight: 700;
}

/* A label with something trailing it — a selection count, a state word. */
.ts-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.ts-count {
    flex: 0 0 auto;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--ts-accent-wash);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ts-accent);
    text-transform: none;
}

/* One person, as an option in a picker or as a stored member. */
.ts-person {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ts-avatar {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ts-accent-wash);
    border: 1px solid #cfe0f8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ts-accent);
    text-transform: uppercase;
}

.ts-avatar--muted {
    background: #f1f4f9;
    border-color: #e0e6f0;
    color: #5b6b82;
}

.ts-person-text {
    min-width: 0;
    line-height: 17px;
}

.ts-person-name {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ts-heading);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ts-person-meta {
    display: block;
    font-size: 11.5px;
    color: var(--ts-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Inside the closed control the same row must not grow the input's height, so
   the avatar shrinks and the secondary line is dropped. Radzen reuses the item
   template for the selected value when no ValueTemplate is given. */
.rz-dropdown-label .ts-person {
    gap: 8px;
}

.rz-dropdown-label .ts-avatar {
    width: 22px;
    height: 22px;
    font-size: 9.5px;
}

.rz-dropdown-label .ts-person-meta {
    display: none;
}

/* Radzen reuses the item template for a chip as well as for the closed control,
   so the same row must survive being squeezed into a pill: smaller avatar, no
   second line. Harmless if a build renders chips as plain text instead. */
.rz-chip .ts-person {
    gap: 6px;
    min-width: 0;
}

.rz-chip .ts-avatar {
    width: 18px;
    height: 18px;
    font-size: 8.5px;
    border-color: rgba(22, 76, 160, 0.25);
}

.rz-chip .ts-person-name {
    font-size: 12.5px;
    line-height: 19px;
    color: var(--ts-accent);
}

.rz-chip .ts-person-meta {
    display: none;
}

/* The team's stored members. Rows rather than a data list: each entry is one
   person with one action, and paging or sorting would be noise. */
.ts-member-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ts-border);
    border-radius: 8px;
    background: var(--ts-surface);
    overflow: hidden;
    /* A large team scrolls inside its own box instead of pushing the dialog's
       buttons off screen — the same reason the chips wrapper is capped. */
    max-height: 208px;
    overflow-y: auto;
}

.ts-member {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--ts-border-soft);
}

.ts-member:last-child {
    border-bottom: 0;
}

.ts-member:hover {
    background: #f7faff;
}

.ts-member-tail {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* app.css pushes every button inside a dialog 15px down and 10px right, which
   left the remove control hanging below its own row. */
.ts-member .rz-button {
    margin: 0 !important;
    width: 26px;
    height: 26px;
    min-width: 26px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    background-color: rgba(192, 41, 63, 0.09) !important;
    box-shadow: none !important;
}

.ts-member .rz-button:hover {
    background-color: rgba(192, 41, 63, 0.18) !important;
}

.ts-member .rz-button .rzi {
    font-size: 15px !important;
    color: #c0293f !important;
}

/* A note that warns rather than informs — same shape as .ts-dialog-note, amber. */
.ts-dialog-note--warn {
    border-color: #ffe0b8;
    background: #fff8ee;
    color: #7a4a08;
}

.ts-dialog-note--warn .rzi,
.ts-dialog-note--warn i {
    color: #a55a00 !important;
}

/* Nothing to list yet: said in place, inside the same box the rows would fill. */
.ts-dialog-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 12px;
    border: 1px dashed var(--ts-border);
    border-radius: 8px;
    background: var(--ts-subtle);
    font-size: 12.5px;
    color: var(--ts-muted);
}

.ts-dialog-empty .rzi,
.ts-dialog-empty i {
    font-size: 18px !important;
    color: #b6c0cf !important;
}

.ts-page-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}


/* ---------- Assignment confirmation ---------- */

/* The pre-flight dialog states what a save will DO, per agent, so it carries more
   than the note-and-list treatment the other dialogs use. Its own block because
   nothing else in the app shows an outcome table inside a dialog. */

/* The headline. Severity is carried by the left border and the icon rather than a
   full tinted panel, so three stacked sections do not turn the dialog into a
   traffic light. */
.ts-confirm-lead {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--ts-border);
    border-left-width: 4px;
    border-radius: 8px;
    background: var(--ts-subtle);
    font-size: 13.5px;
    line-height: 19px;
    color: var(--ts-text);
}

.ts-confirm-lead strong {
    font-size: 14px;
    font-weight: 700;
}

.ts-confirm-lead-detail {
    margin-top: 3px;
    font-size: 12.5px;
    line-height: 18px;
    color: var(--ts-muted);
}

.ts-confirm-lead .rzi,
.ts-confirm-lead i {
    font-size: 20px !important;
    margin-top: 1px;
}

.ts-confirm-lead--blocked {
    border-color: #f0c4c4;
    border-left-color: #c0392b;
    background: #fdf5f4;
}

.ts-confirm-lead--blocked .rzi,
.ts-confirm-lead--blocked i {
    color: #c0392b !important;
}

.ts-confirm-lead--warning {
    border-color: #f2ddb4;
    border-left-color: #b8791a;
    background: #fdf9f0;
}

.ts-confirm-lead--warning .rzi,
.ts-confirm-lead--warning i {
    color: #b8791a !important;
}

.ts-confirm-lead--clear {
    border-color: #cfe6d5;
    border-left-color: #1f7a40;
    background: #f4faf6;
}

.ts-confirm-lead--clear .rzi,
.ts-confirm-lead--clear i {
    color: #1f7a40 !important;
}

/* What the Manager typed, kept visually distinct from what the save will write. */
.ts-confirm-slot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border: 1px solid var(--ts-border);
    border-radius: 8px;
    background: #fff;
}

.ts-confirm-slot-value {
    margin-top: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ts-text);
}

.ts-confirm-slot-meta {
    font-size: 12px;
    color: var(--ts-muted);
    white-space: nowrap;
}

/* The table scrolls on its own rather than widening the dialog, so a long agent
   name or a four-day booking cannot push Confirm off the edge. */
.ts-confirm-table-wrap {
    margin-top: 8px;
    border: 1px solid var(--ts-border);
    border-radius: 8px;
    overflow-x: auto;
}

.ts-confirm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ts-confirm-table th {
    padding: 9px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ts-muted);
    background: var(--ts-subtle);
    border-bottom: 1px solid var(--ts-border);
    white-space: nowrap;
}

.ts-confirm-table td {
    padding: 10px 12px;
    vertical-align: top;
    border-bottom: 1px solid #eef1f5;
    line-height: 18px;
}

.ts-confirm-table tbody tr:last-child td {
    border-bottom: 0;
}

.ts-confirm-row--blocked td {
    background: #fdf8f7;
}

.ts-confirm-agent {
    font-weight: 600;
    color: var(--ts-text);
}

/* One line per working day the save will create. Listed rather than run together,
   because the count of lines IS the information: four lines means four units of
   work, and a Manager who typed one span needs to see that. */
.ts-confirm-windows {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ts-confirm-windows li {
    display: flex;
    gap: 8px;
    white-space: nowrap;
}

.ts-confirm-day {
    min-width: 76px;
    color: var(--ts-muted);
}

.ts-confirm-time {
    font-variant-numeric: tabular-nums;
    color: var(--ts-text);
}

.ts-confirm-nothing {
    color: #a04338;
    font-style: italic;
}

.ts-confirm-skipped {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    font-size: 12px;
    color: #8a6a1f;
}

.ts-confirm-skipped .rzi,
.ts-confirm-skipped i {
    font-size: 15px !important;
    color: #b8791a !important;
}

.ts-confirm-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.ts-confirm-badge--blocked {
    background: #fbe6e3;
    color: #a3372a;
}

.ts-confirm-badge--warning {
    background: #fbefd8;
    color: #8a6a1f;
}

.ts-confirm-badge--clear {
    background: #e6f3ea;
    color: #1f7a40;
}

.ts-confirm-reason {
    margin-top: 5px;
    font-size: 12px;
    line-height: 17px;
    color: var(--ts-muted);
    white-space: normal;
    max-width: 260px;
}

.hb-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 14px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ts-border);
}

.hb-filter {
    display: flex;
    flex-direction: column;
    min-width: 150px;
}

.hb-filter--wide {
    min-width: 220px;
    flex: 1 1 220px;
}

.hb-filter--action {
    min-width: 0;
}

.hb-filter .rz-dropdown,
.hb-filter .rz-datepicker,
.hb-filter .rz-numeric {
    width: 100%;
}

.hb-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    color: var(--ts-text);
    white-space: nowrap;
}

.hb-note {
    margin: 14px 20px 0;
}

.hb-table {
    width: 100%;
    min-width: 980px;
    margin-top: 14px;
    border-collapse: collapse;
    font-size: 13.5px;
    color: var(--ts-text);
}

.hb-table thead th {
    padding: 11px 14px;
    background: var(--ts-subtle);
    border-bottom: 1px solid var(--ts-border);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    color: var(--ts-muted);
    white-space: nowrap;
}

.hb-table .hb-subhead th {
    padding: 4px 14px 8px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.hb-table tbody td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--ts-border-soft);
    vertical-align: middle;
}

.hb-table .hb-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hb-row--project td {
    background: #fbfcfe;
    font-weight: 600;
    color: var(--ts-heading);
}

.hb-row--taskunallocated td,
.hb-row--projectunallocated td {
    font-style: italic;
}

.hb-label-inner {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 280px;
}

.hb-table tbody td.hb-l1 {
    padding-left: 34px;
}

.hb-table tbody td.hb-l2 {
    padding-left: 54px;
}

.hb-table tbody td.hb-l3 {
    padding-left: 74px;
}

.hb-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ts-muted);
    cursor: pointer;
}

.hb-toggle:hover,
.hb-toggle:focus-visible {
    background: var(--ts-accent-wash);
    color: var(--ts-accent);
    outline: none;
}

.hb-toggle--none {
    cursor: default;
}

.hb-toggle .rzi {
    font-size: 20px;
}

.hb-link {
    color: var(--ts-accent);
    text-decoration: none;
}

.hb-link:hover,
.hb-link:focus-visible {
    text-decoration: underline;
}

.hb-coverage {
    color: var(--ts-muted);
    white-space: nowrap;
}

.hb-markers {
    min-width: 200px;
}

.hb-marker {
    margin: 2px 4px 2px 0;
    white-space: normal;
}

.hb-history {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.hb-history th,
.hb-history td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--ts-border-soft);
    text-align: left;
}

.hb-history th {
    font-size: 11.5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ts-muted);
}

.hb-estimate-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}