/*
 * Work (project management). Colors come only from the --im-* tokens, so light and dark themes follow tokens.css.
 * Status colors are tints mixed from tokens, never hardcoded.
 */

.work-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; margin-bottom: 16px; background: var(--im-surface); border: 1px solid var(--im-card-border, var(--im-border)); border-radius: var(--im-radius-card); box-shadow: var(--im-card-shadow); }
.work-hero__title { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 1.35rem; font-weight: 600; color: var(--im-ink); }
.work-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; color: var(--im-muted); font-size: .875rem; }
.work-hero__meta i { margin-right: 4px; }
.work-hero__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.work-avatar-stack { display: inline-flex; align-items: center; }
.work-avatar-stack .work-avatar + .work-avatar { margin-left: -6px; }
.work-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--im-primary); color: var(--im-on-primary); font-size: .75rem; font-weight: 600; border: 2px solid var(--im-surface); flex-shrink: 0; }
.work-avatar--sm { width: 24px; height: 24px; font-size: .625rem; }
.work-avatar--empty, .work-avatar--more { background: var(--im-secondary); color: var(--im-muted); }

.work-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--im-primary-tint); color: var(--im-accent-text); font-size: .75rem; font-weight: 500; white-space: nowrap; }
.work-muted { color: var(--im-muted); font-size: .8125rem; }
.work-strong { font-weight: 600; }
.work-grow { flex: 1 1 auto; min-width: 0; }
.work-pre { white-space: pre-wrap; margin: 0; }
.work-hint { color: var(--im-muted); font-size: .8125rem; margin: 8px 0 0; }
.work-actions-end { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.work-done-text { text-decoration: line-through; color: var(--im-muted); }

.work-status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.work-status--todo { background: var(--im-secondary); color: var(--im-muted); }
.work-status--progress { background: var(--im-primary-tint); color: var(--im-accent-text); }
.work-status--review { background: color-mix(in srgb, var(--im-scale-3) 22%, var(--im-surface)); color: var(--im-accent-text); }
.work-status--changes { background: color-mix(in srgb, var(--im-danger) 14%, var(--im-surface)); color: var(--im-danger); }
.work-status--approved, .work-status--done { background: color-mix(in srgb, var(--im-success) 18%, var(--im-surface)); color: var(--im-success-text); }

.work-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--im-border); }
.work-tab { padding: 10px 16px; color: var(--im-muted); font-weight: 500; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.work-tab:hover { color: var(--im-ink); }
.work-tab.active { color: var(--im-accent-text); border-bottom-color: var(--im-primary); }
.work-tab:focus-visible { outline: none; box-shadow: var(--im-focus-ring); border-radius: 4px; }

.work-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.work-overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }

.work-list { list-style: none; margin: 0; padding: 0; }
.work-list__item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 4px; background: none; border: 0; border-bottom: 1px solid var(--im-divider, var(--im-border)); text-align: left; color: var(--im-ink); }
.work-list__item:hover { background: var(--im-primary-tint); }
.work-list__item:focus-visible { outline: none; box-shadow: var(--im-focus-ring); }
.work-list__title { flex: 1 1 auto; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-list__meta { color: var(--im-muted); font-size: .8125rem; }
.work-due { color: var(--im-muted); font-size: .8125rem; white-space: nowrap; }
.work-due--late { color: var(--im-danger); font-weight: 600; }
.work-phase-row { padding: 8px 0; }
.work-phase-row__head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.work-bar { height: 6px; border-radius: 3px; background: var(--im-secondary); overflow: hidden; }
.work-bar > span { display: block; height: 100%; background: var(--im-primary); }

.work-code-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.work-code-edit__input { width: 180px; }

/* Board */
.work-board-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.work-board-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.work-filter { min-width: 180px; }
.work-view-toggle { display: flex; gap: 6px; }
.work-board-wide { display: none; }
.work-board-narrow { display: block; }
@media (min-width: 992px) {
    .work-board-wide { display: block; }
    .work-board-narrow { display: none; }
}
.work-board { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.work-board__column { display: flex; flex-direction: column; min-height: 320px; background: var(--im-secondary); border: 1px solid var(--im-border); border-radius: var(--im-radius-card); }
.work-board__column.is-drop-target { outline: 2px dashed var(--im-primary); outline-offset: -2px; }
.work-board__column-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; }
.work-board__column-title { margin: 0; font-size: .875rem; font-weight: 600; color: var(--im-ink); }
.work-board__count { margin-left: 4px; color: var(--im-muted); font-weight: 500; }
.work-board__cards { display: flex; flex-direction: column; gap: 8px; padding: 0 8px 8px; flex: 1; }
.work-board__empty { color: var(--im-muted); font-size: .8125rem; text-align: center; margin: 16px 0; }
.work-card-item { padding: 10px 12px; background: var(--im-surface); border: 1px solid var(--im-border); border-radius: var(--im-radius-control); cursor: grab; }
.work-card-item.is-dragging { opacity: .5; }
.work-card-item__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.work-card-item__title { flex: 1; padding: 0; background: none; border: 0; text-align: left; font-weight: 600; color: var(--im-ink); }
.work-card-item__title:hover { color: var(--im-accent-text); }
.work-card-item__title:focus-visible { outline: none; box-shadow: var(--im-focus-ring); border-radius: 4px; }
.work-card-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.work-card-item__footer { display: flex; align-items: center; gap: 10px; font-size: .75rem; }
.work-card-item__avatar { margin-left: auto; }
.work-milestone { color: var(--im-primary); margin-right: 4px; }

/* Task panel */
.work-drawer {
    --bs-offcanvas-width: 560px;
}

/* In Project Hub, make the drawer overlap properly over the page viewport,
   positioning its panel from below the topbar down to the bottom of the viewport. */
.work-drawer.dxbl-drawer {
    position: static;
    overflow: visible;
}

.work-drawer.dxbl-drawer > .dxbl-drawer-panel {
    position: fixed !important;
    top: 70px !important; /* Below topbar navbar (height: 70px) */
    bottom: 0 !important; /* Full height down to bottom of viewport */
    right: 0 !important;
    left: auto !important;
    width: 560px !important;
    height: auto !important;
    max-height: calc(100vh - 70px) !important;
    z-index: 1050 !important; /* Ensure it is strictly ABOVE the shading (z-index 1040) */
    border-left: 1px solid var(--im-border);
    border-bottom: none;
    border-bottom-left-radius: 0;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    pointer-events: auto !important;
}

.work-drawer.dxbl-drawer > .dxbl-drawer-shading {
    position: fixed !important;
    top: 70px !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 560px !important; /* Leave the drawer panel uncovered by the backdrop */
    width: auto !important;
    height: calc(100vh - 70px) !important;
    z-index: 1040 !important;
}

.work-drawer.dxbl-drawer > .dxbl-drawer-content {
    overflow: visible;
}

.work-panel { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--im-surface); color: var(--im-ink); }
.work-panel__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 20px; border-bottom: 1px solid var(--im-border); flex-shrink: 0; }
.work-panel__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.work-panel__tools { display: flex; align-items: center; gap: 4px; }
.work-panel__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 20px; }
.work-panel__footer { padding: 12px 20px; margin-bottom: 2rem; border-top: 1px solid var(--im-border); flex-shrink: 0; }
.work-panel__title { font-size: 1.25rem; font-weight: 600; margin: 0 0 12px; }
.work-panel__title-input { margin-bottom: 12px; font-weight: 600; }
.work-fields { display: grid; grid-template-columns: 110px 1fr; gap: 10px 12px; align-items: center; margin-bottom: 16px; }
.work-fields dt { color: var(--im-muted); font-size: .8125rem; font-weight: 500; margin: 0; }
.work-fields dd { margin: 0; min-width: 0; }
.work-person { display: inline-flex; align-items: center; gap: 8px; }
.work-section { margin-bottom: 20px; }
.work-section-title { margin: 0 0 8px; font-size: .875rem; font-weight: 600; color: var(--im-ink); }
.work-checklist { list-style: none; margin: 0 0 8px; padding: 0; }
.work-checklist__item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 0; }
.work-inline-add { display: flex; gap: 8px; }
.work-comments { list-style: none; margin: 0 0 12px; padding: 0; }
.work-comment { display: flex; gap: 10px; margin-bottom: 12px; }
.work-comment__head { font-size: .8125rem; }

/* Forms */
.work-form { display: flex; flex-direction: column; gap: 8px; }
.work-form label { font-size: .8125rem; color: var(--im-muted); font-weight: 500; }
.work-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.work-form__error { color: var(--im-danger); margin: 0; font-size: .875rem; }
.work-phase-admin { margin-bottom: 16px; }
.work-phase-admin__row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--im-divider, var(--im-border)); }

/* Timeline (Syncfusion SfGantt) */
.work-timeline-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
.work-toolbar-end { margin-left: auto; }
.work-gantt-legend { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; font-size: .8125rem; color: var(--im-muted); }
.work-gantt-legend li { display: inline-flex; align-items: center; gap: 6px; }
.work-gantt-legend__phase { width: 22px; height: 10px; border-radius: 3px; background: linear-gradient(90deg, var(--im-scale-3) 55%, var(--im-scale-5) 55%); }
.work-gantt-legend__task { width: 22px; height: 10px; border-radius: 3px; background: linear-gradient(90deg, var(--im-primary) 55%, var(--im-scale-1) 55%); }
.work-gantt-legend__milestone { width: 10px; height: 10px; background: var(--im-primary); transform: rotate(45deg); margin: 0 4px; }

.work-gantt { border: 1px solid var(--im-border); border-radius: var(--im-radius-card); overflow: hidden; background: var(--im-surface); }
.work-gantt.is-saving { opacity: .7; pointer-events: none; }
.work-gantt .work-gantt-phase .e-gantt-parent-taskbar-inner-div,
.work-gantt .work-gantt-phase .e-gantt-child-taskbar-inner-div { background-color: var(--im-scale-5) !important; border-color: var(--im-scale-5) !important; }
.work-gantt .work-gantt-phase .e-gantt-parent-progressbar-inner-div,
.work-gantt .work-gantt-phase .e-gantt-child-progressbar-inner-div { background-color: var(--im-scale-3) !important; border-color: var(--im-scale-3) !important; }
.work-gantt .work-gantt-task .e-gantt-child-taskbar-inner-div { background-color: var(--im-scale-1) !important; border-color: var(--im-scale-2) !important; }
.work-gantt .work-gantt-task .e-gantt-child-progressbar-inner-div { background-color: var(--im-primary) !important; border-color: var(--im-primary) !important; }
.work-gantt .work-gantt-milestone .e-gantt-milestone { background-color: var(--im-primary) !important; border-color: var(--im-primary) !important; }
.work-gantt .work-gantt-today .e-span-label { background-color: var(--im-primary); color: var(--im-on-primary); }
.work-gantt .e-event-markers { border-left-color: var(--im-primary) !important; }

/* Approvals */
.work-tab__count { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 5px; border-radius: 9px; background: var(--im-primary); color: var(--im-on-primary); font-size: .6875rem; font-weight: 700; line-height: 18px; text-align: center; }
.work-page-head { margin-bottom: 16px; }
.work-page-title { margin: 0 0 4px; font-size: 1.35rem; font-weight: 600; color: var(--im-ink); }
.work-gap-top { margin-top: 24px; }
.work-versions { list-style: none; margin: 0 0 8px; padding: 0; }
.work-versions li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 0; }
.work-approvals { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 16px; align-items: start; }
@media (max-width: 991px) { .work-approvals { grid-template-columns: 1fr; } }
.work-approvals__list, .work-approvals__detail { padding: 16px; background: var(--im-surface); border: 1px solid var(--im-border); border-radius: var(--im-radius-card); }
.work-approval-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.work-approval-item { display: flex; gap: 10px; width: 100%; padding: 10px; background: var(--im-surface); border: 1px solid var(--im-border); border-radius: var(--im-radius-control); text-align: left; color: var(--im-ink); }
.work-approval-item:hover { background: var(--im-primary-tint); }
.work-approval-item.is-selected { border-color: var(--im-primary); box-shadow: inset 0 0 0 1px var(--im-primary); }
.work-approval-item:focus-visible { outline: none; box-shadow: var(--im-focus-ring); }
.work-approval-item__thumb { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--im-radius-control); background: var(--im-icon-bg, var(--im-primary-tint)); color: var(--im-accent-text); font-size: 20px; }
.work-approval-item__text { display: flex; flex-direction: column; min-width: 0; }
.work-approval-item__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-approvals__head { margin-bottom: 12px; }
.work-approvals__title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.work-approvals__title { margin: 0; font-size: 1.15rem; font-weight: 600; }
.work-approvals__version { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.work-approvals__version label { font-size: .8125rem; font-weight: 600; }
.work-version-picker { width: 140px; }
.work-preview { margin-bottom: 16px; padding: 12px; background: var(--im-secondary); border-radius: var(--im-radius-control); }
.work-preview__image { max-width: 100%; max-height: 360px; border-radius: var(--im-radius-control); }
.work-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 8px 0 0; font-size: .875rem; }
.work-facts dt { color: var(--im-muted); font-weight: 500; }
.work-facts dd { margin: 0; word-break: break-word; }
.work-alternatives-list { padding-left: 20px; }
.work-alternatives-list li.is-approved { font-weight: 600; }
.work-approval-actions { padding-top: 12px; border-top: 1px solid var(--im-border); }
.work-approval-actions label { display: block; margin-bottom: 4px; font-size: .8125rem; font-weight: 600; }
.work-link { color: var(--im-accent-text); text-decoration: none; }
.work-link:hover { text-decoration: underline; }

/* Time and finance */
.work-gap-bottom { margin-bottom: 16px; }
.work-alert { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; padding: 10px 14px; border-radius: var(--im-radius-control); background: color-mix(in srgb, var(--im-danger) 12%, var(--im-surface)); color: var(--im-danger); border: 1px solid color-mix(in srgb, var(--im-danger) 35%, var(--im-surface)); }
.work-bar--over > span { background: var(--im-danger); }
.work-week-label { display: inline-block; min-width: 170px; text-align: center; font-weight: 500; color: var(--im-ink); }
.work-table-scroll { overflow-x: auto; }
.work-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.work-table th, .work-table td { padding: 6px 8px; border-bottom: 1px solid var(--im-divider, var(--im-border)); text-align: left; color: var(--im-ink); }
.work-table thead th { color: var(--im-muted); font-weight: 600; background: var(--im-secondary); }
.work-table tfoot th, .work-table tfoot td { border-top: 2px solid var(--im-border); font-weight: 600; }
.work-num { text-align: right !important; white-space: nowrap; }
.work-today { color: var(--im-accent-text) !important; }
.work-table--sheet th[scope="row"] { min-width: 220px; font-weight: 500; }
.work-cell { width: 76px; margin-left: auto; }

/* Banner and chips shown inside the other Services */
.work-task-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; padding: 10px 16px; background: var(--im-primary-tint); border: 1px solid var(--im-primary); border-radius: var(--im-radius-control); color: var(--im-ink); }
.work-task-banner > i { font-size: 22px; color: var(--im-accent-text); }
.work-task-banner__text { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.work-banner-error { color: var(--im-danger); font-size: .8125rem; }
.work-chip--link { text-decoration: none; }
.work-chip--link:hover { text-decoration: underline; }

/* Task page */
.work-task-page__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.work-start { display: flex; flex-wrap: wrap; gap: 8px; }
.work-actions-start { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.work-task-page__grid { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 16px; align-items: start; }
@media (max-width: 991px) { .work-task-page__grid { grid-template-columns: 1fr; } }
.work-task-page__panel { background: var(--im-surface); border: 1px solid var(--im-border); border-radius: var(--im-radius-card); min-height: 400px; }
.work-result-icon { font-size: 20px; color: var(--im-accent-text); }

.work-group { margin-bottom: 20px; }