.project-insights-page { min-width: 0; color: #26384c; }
.project-insights-page .collection-toolbar { margin-bottom: 14px; }
.project-management-overview { margin-bottom: 18px; }
.project-management-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.project-management-metrics > div { display: flex; align-items: center; justify-content: space-between; min-width: 0; min-height: 62px; padding: 12px 17px; border: 1px solid #e3dfd9; border-radius: 7px; background: #fff; }
.project-management-metrics > div > span { color: #76859a; font-size: 12px; }
.project-management-metrics strong { color: #243e5c; font-size: 23px; line-height: 30px; }
.project-management-metrics small, .project-chart-heading > strong small { margin-left: 4px; color: #8a96a4; font-size: 11px; font-weight: 500; }
.project-management-metrics .has-attention strong { color: #cc6257; }
.project-overview-charts, .project-detail-overview { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; }
.project-detail-overview { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1.1fr); }
.project-insight-chart { min-width: 0; padding: 17px 18px 12px; border: 1px solid #e4dfd9; border-radius: 8px; background: #fff; }
.project-chart-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; margin-bottom: 20px; }
.project-chart-heading h2 { color: #263d56; font-size: 15px; line-height: 23px; }
.project-chart-heading p { margin-top: 3px; color: #8b96a3; font-size: 11px; line-height: 18px; }
.project-chart-heading > strong { flex: 0 0 auto; color: #805c3e; font-size: 23px; line-height: 30px; }
.project-workflow { min-width: 0; }
.project-workflow-track { display: flex; width: 100%; height: 18px; overflow: hidden; border-radius: 5px; background: #f1eeea; }
.project-workflow-track > span { display: block; height: 100%; min-width: 0; }
.project-workflow .phase-waiting { background: #c3b4a6; }
.project-workflow .phase-active { background: #64a081; }
.project-workflow .phase-review { background: #edbd60; }
.project-workflow .phase-completed { background: #7299cc; }
.project-workflow-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 9px 20px; margin-top: 13px; color: #7d8a9a; font-size: 11px; line-height: 19px; }
.project-workflow-legend > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.project-workflow-legend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.project-workflow-legend strong { margin-left: 3px; color: #425872; font-size: 12px; }
.project-chart-note { margin-top: 16px; color: #8b96a3; font-size: 11px; line-height: 18px; }
.project-trend-chart { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; min-height: 90px; }
.project-trend-day { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.project-trend-number { color: #6c7e93; font-size: 11px; line-height: 17px; font-variant-numeric: tabular-nums; }
.project-trend-rail { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 55px; border-bottom: 1px solid #e9e3db; }
.project-trend-rail > span { width: 30px; max-width: 100%; border-radius: 4px 4px 0 0; background: #ac8465; }
.project-trend-day time { color: #94a0ae; font-size: 10px; line-height: 17px; font-variant-numeric: tabular-nums; }
.project-insights-page .project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; }
.workspace .project-insights-card { min-width: 0; overflow: hidden; padding: 17px 18px 14px; }
.project-insights-card.is-selected-project { border-color: #b99a7e; }
.workspace .project-insights-card > h2 { margin-top: 8px; font-size: 16px; line-height: 24px; }
.workspace .project-insights-card > p { min-height: 20px; margin: 5px 0 13px; color: #8a939e; font-size: 12px; line-height: 20px; overflow-wrap: anywhere; }
.project-insights-card .project-card-heading { gap: 8px; }
.project-card-attention { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-left: auto; }
.project-card-attention .pill { font-size: 10px; }
.project-card-attention .pill.danger { color: #cb5e58; background: #fff0ed; }
.project-workflow.is-compact .project-workflow-track { height: 7px; border-radius: 4px; }
.project-workflow.is-compact .project-workflow-legend { justify-content: space-between; gap: 4px 8px; margin-top: 7px; font-size: 10px; }
.project-workflow.is-compact .project-workflow-legend strong { font-size: 11px; }
.project-insights-card .project-progress { margin-top: 10px; padding-bottom: 11px; border-bottom: 1px solid #f0ece7; font-size: 11px; }
.project-card-participants { display: flex; align-items: center; gap: 9px; min-height: 33px; margin: 5px 0 8px; }
.project-avatar-stack { display: flex; align-items: center; padding-left: 4px; flex: 0 0 auto; }
.project-avatar-stack .avatar { width: 25px; height: 25px; margin-left: -4px; border: 2px solid #fff; font-size: 10px; }
.project-card-participants > span { min-width: 0; color: #7b8a9d; font-size: 11px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-no-participant { color: #a39b92; font-size: 10px; }
.project-card-work-preview { padding: 8px 0; border-top: 1px solid #f0ece7; border-bottom: 1px solid #f0ece7; }
.project-card-work-preview > div { display: flex; align-items: center; gap: 8px; }
.project-card-work-preview > div + div { margin-top: 5px; }
.project-preview-label { flex: 0 0 auto; align-self: flex-start; min-width: 24px; padding-top: 5px; color: #8995a3; font-size: 10px; line-height: 17px; }
.project-insight-task { appearance: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-width: 0; min-height: 55px; padding: 8px 5px; border: 0; border-radius: 5px; background: transparent; color: #31445a; text-align: left; }
.project-insight-task:hover { background: #f8f5f0; }
.project-insight-task-main { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.project-insight-task-main > strong { display: block; overflow: hidden; color: #3a4c61; font-size: 12px; font-weight: 600; line-height: 19px; text-overflow: ellipsis; white-space: nowrap; }
.project-insight-task-main > span { display: flex; align-items: center; gap: 5px; color: #8a96a4; font-size: 10px; line-height: 17px; }
.project-insight-task-main .avatar { width: 18px; height: 18px; font-size: 8px; }
.project-task-stage { margin-left: 3px; color: #939d9c; font-size: 10px; }
.project-insight-task-meta { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; width: 155px; color: #8b98a8; font-size: 10px; }
.project-insight-task-meta > strong { min-width: 26px; color: #75869a; font-size: 11px; font-weight: 500; text-align: right; }
.project-insight-task-meta time { color: #8795a7; font-variant-numeric: tabular-nums; white-space: nowrap; }
.project-insight-task-meta time.is-overdue { color: #ce6d62; }
.project-insight-task-meta > .icon { width: 13px; height: 13px; }
.project-inline-progress { display: block; width: 57px; height: 4px; overflow: hidden; border-radius: 3px; background: #e9e5df; }
.project-inline-progress > span { display: block; height: 100%; border-radius: inherit; background: #a58367; }
.project-insights-card .project-dates { margin: 11px 0; min-height: 18px; color: #8a96a3; font-size: 10px; }
.project-insights-card .project-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding-top: 2px; }
.project-insights-card .project-actions .button { min-height: 28px; padding: 5px 8px; font-size: 11px; }
.project-inline-empty { padding: 10px 0; color: #9a9fa5; font-size: 11px; line-height: 19px; }
.project-card-work-preview .project-inline-empty { padding: 6px 2px; font-size: 10px; }
.project-insights-detail { min-width: 0; margin: 0 0 18px; padding: 18px; border: 1px solid #d7c8b8; border-radius: 9px; background: #fcfaf7; }
.project-insights-detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; min-width: 0; margin-bottom: 16px; }
.project-insights-detail-heading > div:first-child { min-width: 0; }
.project-section-kicker { color: #aa8c71; font-size: 10px; line-height: 17px; }
.project-insights-detail-heading h2 { margin-top: 2px; color: #38506a; font-size: 20px; line-height: 28px; overflow-wrap: anywhere; }
.project-insights-detail-heading p { margin-top: 4px; color: #8c97a3; font-size: 12px; line-height: 20px; overflow-wrap: anywhere; }
.project-insights-detail-heading .project-detail-schedule { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 9px; margin-top: 5px; font-size: 10px; line-height: 18px; }
.project-detail-schedule .icon { width: 12px; height: 12px; }
.project-detail-schedule > span { padding-left: 9px; border-left: 1px solid #ddd4cb; color: #9a8b7e; }
.project-insights-detail-heading .actions { flex: 0 0 auto; gap: 6px; }
.project-insights-detail-heading .actions .button { font-size: 11px; }
.project-detail-overview .project-insight-chart { padding: 15px; }
.project-detail-overview .project-chart-heading { margin-bottom: 16px; }
.project-participant-list { display: flex; flex-direction: column; gap: 9px; max-height: 184px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d2c0ae transparent; }
.project-participant-row { display: flex; align-items: center; gap: 9px; min-width: 0; color: #8a97a6; font-size: 10px; }
.project-participant-row > div { flex: 1; min-width: 60px; }
.project-participant-row > div > strong { display: block; color: #485d73; font-size: 12px; font-weight: 600; line-height: 18px; }
.project-participant-row small { color: #99a2ae; font-size: 10px; }
.project-participant-row > span:not(.avatar) { min-width: 37px; white-space: nowrap; }
.project-participant-row > span > strong { color: #6b7d91; font-weight: 500; }
.project-detail-task-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.project-detail-task-columns > section { min-width: 0; padding: 13px 14px 8px; border: 1px solid #e6dfd6; border-radius: 7px; background: #fff; }
.project-detail-task-columns > section > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 7px; border-bottom: 1px solid #eee8e0; }
.project-detail-task-columns h3 { color: #4b5e73; font-size: 13px; line-height: 21px; }
.project-detail-task-columns h3 span { margin-left: 5px; color: #9b8d80; font-size: 12px; }
.project-detail-task-columns header .button { min-height: 20px; padding: 0; font-size: 10px; }
@media(min-width: 1800px) { .project-insights-page .project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media(max-width: 1100px) {
  .project-detail-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-detail-overview > section:last-child { grid-column: 1 / -1; }
  .project-insight-task-meta { width: 120px; gap: 4px; }
  .project-inline-progress { width: 40px; }
  .project-participant-row { gap: 6px; }
}
@media(max-width: 850px) {
  .project-management-metrics > div { min-height: 54px; padding: 10px 12px; }
  .project-management-metrics strong { font-size: 20px; }
  .project-overview-charts, .project-detail-overview { grid-template-columns: 1fr; }
  .project-detail-overview > section:last-child { grid-column: auto; }
  .project-overview-charts .project-insight-chart { padding: 14px 15px 11px; }
  .project-insights-page .project-grid, .project-detail-task-columns { grid-template-columns: 1fr; }
  .project-trend-rail { height: 44px; }
  .project-insights-detail { padding: 14px; }
}
@media(max-width: 550px) {
  .project-management-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .project-management-metrics > div { min-height: 50px; padding: 8px 11px; }
  .project-management-metrics > div > span { font-size: 11px; }
  .project-management-metrics strong { font-size: 19px; }
  .project-workflow-legend { gap: 7px 12px; }
  .project-chart-heading { margin-bottom: 14px; }
  .project-chart-heading h2 { font-size: 14px; }
  .workspace .project-insights-card { padding: 14px; }
  .project-insight-task { gap: 8px; }
  .project-insight-task-meta { width: 106px; }
  .project-inline-progress { width: 33px; }
  .project-insight-task-main > strong { font-size: 11px; }
  .project-insights-detail-heading { flex-wrap: wrap; }
  .project-insights-detail-heading .actions { margin-left: auto; }
  .project-participant-row { gap: 7px; }
  .project-participant-row > span:not(.avatar) { min-width: 31px; font-size: 9px; }
}

/* Permanent deletion has its own confirmation surface. Existing project
   archive actions and the rest of the shared modal styles remain unchanged. */
.project-insights-page .button.project-delete-button { color: #ae665d; }
.project-insights-page .button.project-delete-button:hover:not(:disabled) { border-color: #ead4ce; background: #fff7f4; color: #98564d; }
.project-insights-card .project-actions { flex-wrap: wrap; row-gap: 7px; }
.project-insights-detail-heading .actions { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; min-width: 0; max-width: 100%; row-gap: 7px; }

.modal.project-delete-dialog { width: min(520px, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: min(90dvh, calc(100dvh - 32px)); padding: 0; overflow: hidden; border-color: #e0d5cb; border-radius: 11px; }
.modal.project-delete-dialog[open] { display: flex; flex-direction: column; }
.project-delete-dialog .modal-head { flex: 0 0 auto; min-width: 0; gap: 12px; padding: 18px 22px 15px; }
.project-delete-dialog .modal-head h2 { min-width: 0; color: #35414d; font-size: 18px; line-height: 25px; overflow-wrap: anywhere; }
.project-delete-dialog .modal-head .icon-button { flex: 0 0 28px; width: 28px; min-height: 28px; padding: 4px; }
.project-delete-dialog .modal-content { flex: 1 1 auto; min-height: 0; padding: 18px 22px 20px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c7b8aa transparent; }
.project-delete-dialog .project-delete-intro { margin: 0; color: #64707d; font-size: 13px; line-height: 21px; overflow-wrap: anywhere; }
.project-delete-dialog .project-delete-intro strong { color: #3d4855; font-weight: 700; }
.project-delete-dialog .project-delete-warning { margin: 11px 0 13px; padding: 10px 12px; border: 1px solid #f0d9d2; border-radius: 6px; background: #fff8f5; color: #a26559; font-size: 12px; line-height: 20px; overflow-wrap: anywhere; }
.project-delete-dialog .project-delete-warning p + p { margin-top: 3px; }
.project-delete-dialog .project-delete-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 13px 0 7px; padding: 0; }
.project-delete-dialog .project-delete-summary > div { min-width: 0; padding: 8px 4px; border: 1px solid #e9e3dc; border-radius: 5px; background: #faf8f5; text-align: center; }
.project-delete-dialog .project-delete-summary dt { margin: 0; color: #87909a; font-size: 11px; line-height: 18px; overflow-wrap: anywhere; }
.project-delete-dialog .project-delete-summary dd { margin: 3px 0 0; color: #575f68; font-size: 16px; font-weight: 650; line-height: 23px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.project-delete-dialog .project-delete-status { margin: 6px 0 0; color: #8b929a; font-size: 11px; line-height: 19px; overflow-wrap: anywhere; }
.project-delete-dialog .project-delete-retained { margin: 10px 0 15px; padding: 9px 11px; border-radius: 5px; background: #f5f4f1; color: #7e8589; font-size: 11px; line-height: 19px; overflow-wrap: anywhere; }
.project-delete-dialog :is(#project-delete-form, #task-delete-form) { min-width: 0; }
.project-delete-dialog :is(#project-delete-form, #task-delete-form) > label { display: block; margin-top: 13px; color: #616c78; font-size: 12px; line-height: 20px; }
.project-delete-dialog :is(#project-delete-target, #task-delete-target) { display: block; max-width: 100%; margin: 6px 0 9px; padding: 8px 10px; border: 1px solid #e5ded5; border-radius: 5px; background: #faf8f5; color: #5f5348; font-size: 13px; font-weight: 650; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; }
.project-delete-dialog :is(#project-delete-name, #task-delete-name) { width: 100%; min-width: 0; min-height: 40px; padding: 9px 10px; border-color: #d9d4ce; color: #424e5b; font-size: 13px; line-height: 20px; }
.project-delete-dialog :is(#project-delete-name, #task-delete-name):focus { border-color: #b19076; box-shadow: 0 0 0 3px #b1907612; }
.project-delete-dialog :is(#project-delete-match, #task-delete-match) { min-height: 18px; margin: 6px 0 0; color: #969ba1; font-size: 11px; line-height: 18px; overflow-wrap: anywhere; }
.project-delete-dialog :is(#project-delete-match, #task-delete-match).is-matched { color: #63836a; }
.project-delete-dialog :is(#project-delete-error, #task-delete-error) { margin-top: 10px; padding: 8px 10px; font-size: 12px; line-height: 19px; overflow-wrap: anywhere; }
.project-delete-dialog .project-delete-refresh { min-height: 29px; margin-top: 9px; padding: 4px 8px; font-size: 11px; line-height: 19px; }
.project-delete-dialog .modal-actions { position: sticky; bottom: 0; z-index: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 17px -22px -20px; padding: 13px 22px 15px; border-top: 1px solid #e9e2da; background: #fff; }
.project-delete-dialog .modal-actions > .button { min-width: 84px; min-height: 36px; padding: 7px 12px; font-size: 12px; line-height: 20px; }
.project-delete-dialog .modal-actions > .button:not(.project-delete-confirm) { border-color: #dcd7d1; background: #fff; color: #616970; }
.project-delete-dialog .button.project-delete-confirm { border-color: #ac6056; background: #ac6056; color: #fff; }
.project-delete-dialog .button.project-delete-confirm:hover:not(:disabled) { border-color: #98544b; background: #98544b; }
.project-delete-dialog .button.project-delete-confirm:disabled { border-color: #ead9d4; background: #f1e5e1; color: #b4958d; opacity: 1; cursor: not-allowed; }
.project-delete-dialog .button.project-delete-confirm:focus-visible { outline: 2px solid #b9796c; outline-offset: 3px; }
@media (max-width: 550px) {
  .modal.project-delete-dialog { max-height: calc(100dvh - 24px); }
  .project-delete-dialog .modal-head { padding: 16px 16px 13px; }
  .project-delete-dialog .modal-content { padding: 16px 16px 18px; }
  .project-delete-dialog .project-delete-summary { gap: 4px; }
  .project-delete-dialog .project-delete-summary > div { padding: 7px 3px; }
  .project-delete-dialog .project-delete-summary dd { font-size: 15px; }
  .project-delete-dialog .modal-actions { margin-left: -16px; margin-right: -16px; margin-bottom: -18px; padding: 12px 16px 14px; }
  .project-delete-dialog .modal-actions > .button { flex: 1 1 auto; min-width: 0; }
}