.job-problems { min-width: 0; }
.problem-period { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: end; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.problem-period label, .problem-period-dates { display: grid; gap: 6px; min-width: 0; }
.problem-period select, .problem-period input { width: 100%; min-width: 0; }
.problem-period-dates { align-self: center; }
.problem-period-dates span { font-size: 13px; color: var(--muted); }
.problem-period-dates strong { font-size: 14px; overflow-wrap: anywhere; }
.problem-period button { min-height: 42px; }
.problem-source { display: flex; flex-wrap: wrap; align-items: end; gap: 18px; margin-bottom: 18px; }
.problem-source label { display: grid; gap: 6px; min-width: 0; flex: 1 1 320px; }
.problem-source select { width: 100%; min-width: 0; text-overflow: ellipsis; }
.problem-source > div { display: grid; gap: 8px; padding-bottom: 8px; }
.problem-source span, .problem-source-note { color: var(--muted); font-size: 13px; }
.problem-metrics { display: flex; flex-wrap: wrap; gap: 24px; padding: 16px 0; border-block: 1px solid var(--line); }
.problem-metrics > div { display: grid; gap: 6px; }
.problem-metrics strong { font-size: 24px; }
.problem-metrics span { color: var(--muted); font-size: 13px; }
.problem-source-note { overflow-wrap: anywhere; }
.problem-charts, .problem-rankings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.problem-chart, .problem-rankings > section { min-width: 0; }
.job-problems h3 { font-size: 17px; margin: 0 0 16px; letter-spacing: 0; }
.problem-chart-content { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.problem-pie { width: 180px; aspect-ratio: 1; flex: 0 0 180px; border-radius: 50%; }
.problem-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; }
.job-problems .problem-legend { min-width: 0; width: auto; flex: 1 1 220px; }
.job-problems th, .job-problems td { padding: 10px 8px; }
.job-problems .problem-legend td:first-child { overflow-wrap: anywhere; }
.job-problems td small { display: block; color: var(--muted); margin-top: 4px; }
.problem-table-scroll { max-height: 60vh; overflow: auto; min-width: 0; }
.job-problems .problem-table-scroll table { min-width: 420px; }
.problem-legend td:not(:first-child), .problem-rankings td:not(:first-child) { white-space: nowrap; text-align: right; }
.problem-addresses { margin-top: 24px; }
.problem-addresses > label { display: grid; gap: 6px; margin-bottom: 16px; max-width: 580px; }
.problem-addresses input { min-width: 0; width: 100%; }
.problem-addresses .problem-table-scroll table { min-width: 680px; }
.problem-pages { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-top: 16px; }
.problem-warning { border-left: 3px solid #b77a14; padding: 10px 14px; background: #fff7e5; color: #774b0a; }
#kpi, #kpiPanel { min-width: 0; }
@media (max-width: 1100px) { .problem-charts, .problem-rankings { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 500px) { .problem-chart-content { justify-content: center; } .problem-metrics { gap: 18px; } }
@media (max-width: 700px) { .problem-period { grid-template-columns: minmax(0, 1fr); } }