/* Scoped to the plugin. No Redmine or theme selectors are overridden. */
#dpo-overview { margin: 20px 0; color: #253449; }
#dpo-overview[hidden], #dpo-overview [hidden] { display: none !important; }
#dpo-overview .dpo-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
#dpo-overview label { font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
#dpo-overview .dpo-search { flex: 1; min-width: 190px; }
#dpo-overview input, #dpo-overview select, #dpo-overview button { box-sizing: border-box; font: inherit; min-height: 36px; padding: 7px 10px; border: 1px solid #b8c5d5; border-radius: 6px; background: #fff; color: #253449; max-width: 100%; }
#dpo-overview button { cursor: pointer; }
#dpo-overview .dpo-filters { display: flex; flex-wrap: wrap; gap: 6px; }
#dpo-overview button[aria-pressed="true"] { background: #e5efff; border-color: #3169aa; color: #194e8a; }
#dpo-overview :focus-visible { outline: 3px solid #2867b3; outline-offset: 3px; }
#dpo-overview .dpo-caption, #dpo-result { color: #58677b; font-size: 12px; margin: 12px 0; }
#dpo-overview .dpo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#dpo-overview .dpo-card { min-width: 0; padding: 20px; background: #fff; border: 1px solid #d7e0eb; border-radius: 10px; box-shadow: 0 2px 5px #20324906; display: flex; flex-direction: column; }
#dpo-overview h3 { margin: 0; padding: 0; border: 0; font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; background: none; }
#dpo-overview a { color: #19588d; }
#dpo-overview a:hover { text-decoration: underline; }
#dpo-overview .dpo-parent { font-size: 11px; color: #58677b; margin: 0 0 6px; }
#dpo-overview .dpo-markers { font-size: 11px; color: #58677b; display: flex; gap: 8px; }
#dpo-overview .dpo-description { font-size: 12px; line-height: 1.6; color: #58677b; margin: 6px 0 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dpo-overview .dpo-metrics { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
#dpo-overview .dpo-open { font-size: 13px; color: #253449; white-space: nowrap; }
#dpo-overview .dpo-open strong { font-size: 32px; font-weight: 650; padding: 0 4px; }
#dpo-overview .dpo-overdue { color: #a22c26; background: #fff0ed; border-radius: 5px; padding: 5px 9px; font-size: 12px; white-space: nowrap; }
#dpo-overview .dpo-no-overdue { font-size: 12px; color: #58677b; }
#dpo-overview .dpo-bar { display: flex; height: 8px; border-radius: 6px; overflow: hidden; background: #edf0f5; margin: 16px 0 12px; }
#dpo-overview .dpo-bar span { flex-basis: 0; background: var(--dpo-color); }
#dpo-overview .dpo-todo { --dpo-color: #8293aa; }
#dpo-overview .dpo-active { --dpo-color: #3573cb; }
#dpo-overview .dpo-internal { --dpo-color: #8b61bf; }
#dpo-overview .dpo-external { --dpo-color: #218279; }
#dpo-overview .dpo-hold { --dpo-color: #ae7d24; }
#dpo-overview .dpo-legacy { --dpo-color: #b46e57; }
#dpo-overview .dpo-other { --dpo-color: #66717f; }
#dpo-overview .dpo-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; min-height: 20px; }
#dpo-overview .dpo-stage { font-size: 12px; white-space: nowrap; color: #33475d; }
#dpo-overview .dpo-stage:before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; background: var(--dpo-color); }
#dpo-overview .dpo-zero, #dpo-overview .dpo-unavailable { font-size: 12px; color: #58677b; }
#dpo-overview .dpo-footer { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid #e8edf3; margin-top: 16px; padding-top: 10px; font-size: 11px; color: #58677b; }
#dpo-empty { padding: 24px; background: #fff; border: 1px solid #d7e0eb; border-radius: 8px; }
@media (max-width: 900px) { #dpo-overview .dpo-grid { grid-template-columns: 1fr; } }
@media print { #dpo-overview .dpo-toolbar { display: none; } #dpo-overview .dpo-card { break-inside: avoid; } }