.quality-manager { min-width:0; color:#20282d; }
.quality-manager * { box-sizing:border-box; letter-spacing:0; }
.kpi-period-bar { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; padding:15px 0; border-bottom:1px solid #dce4e9; margin-bottom:16px; }
.kpi-period-bar input,.kpi-period-bar select { height:38px; padding:7px 10px; font-weight:400; background:#fbfcfd; }
.kpi-indicators { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.kpi-indicator { border:1px solid #dce4e9; border-radius:6px; background:#fff; padding:17px; min-width:0; }
.quality-manager .kpi-indicator h3,.quality-manager .kpi-chart-panel h3,.quality-manager .kpi-distribution h3,.quality-manager .kpi-history h3 { font-size:16px; line-height:1.35; margin:0 0 16px; color:#192f43; }
.kpi-indicator>div { display:flex; gap:16px; align-items:center; min-height:126px; flex-wrap:wrap; }
.kpi-indicator aside { flex:1; min-width:90px; display:grid; gap:10px; font-size:12px; color:#445969; line-height:1.5; }
.kpi-ring { --ring-color:#c49632; --ring-angle:0deg; position:relative; width:122px; height:122px; flex:0 0 122px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--ring-color) var(--ring-angle),#e0e6e8 0); }
.kpi-ring:before { content:''; position:absolute; inset:13px; border-radius:50%; background:white; }
.kpi-ring strong { position:relative; z-index:1; font-size:20px; color:#132c3f; white-space:nowrap; max-width:98px; }
.kpi-ring-small { width:55px; height:55px; flex-basis:55px; }.kpi-ring-small:before { inset:6px; }.kpi-ring-small strong { font-size:10px; }
.kpi-good { color:#18864e!important; }.kpi-bad { color:#c43848!important; }.kpi-muted { color:#6b7c87; font-size:12px; }
.kpi-change { padding:5px 8px; background:#edf8f1; border-radius:5px; font-size:17px; }.kpi-change.kpi-bad { background:#fff0f1; }
.kpi-data-warning { border-left:3px solid #d5a646; padding:10px 13px; background:#fffbef; font-size:13px; line-height:1.5; }
.kpi-chart-grid { display:grid; grid-template-columns:minmax(0,2.25fr) minmax(240px,1fr); gap:24px; margin:22px 0; }
.kpi-chart-panel,.kpi-distribution,.kpi-history { min-width:0; padding:16px 0; border-top:1px solid #dce4e9; }
.kpi-chart-panel header { display:flex; gap:15px; justify-content:space-between; align-items:start; flex-wrap:wrap; margin-bottom:8px; }
.kpi-repeat-panel { margin:22px 0; }
.kpi-repeat-panel header > div:first-child { min-width:220px; }
.kpi-repeat-panel header p { margin:5px 0 0; }
.kpi-repeat-summary { display:grid; justify-items:end; gap:3px; text-align:right; color:#445969; font-size:12px; }
.kpi-repeat-summary strong { font-size:24px; line-height:1; }
.kpi-watch { color:#a56a00!important; }
.kpi-repeat-legend { display:flex; justify-content:center; gap:22px; flex-wrap:wrap; color:#445969; font-size:12px; }
.kpi-repeat-legend span { display:flex; align-items:center; gap:7px; }
.kpi-repeat-legend i { width:22px; height:3px; border-radius:2px; background:#278457; }
.kpi-repeat-legend i.gross { background:#c43848; }
.kpi-chart-modes { display:flex; flex:0 0 auto; border:1px solid #d2dce2; border-radius:5px; overflow:hidden; }
.kpi-chart-modes button { font:inherit; font-size:12px; padding:7px 14px; border:0; border-radius:0; background:#f5f8fa; color:#314c61; cursor:pointer; min-width:66px; }
.kpi-chart-modes button[aria-pressed=true] { background:#16384e; color:white; }
.kpi-history-chart { width:100%; display:block; height:auto; min-height:240px; }.kpi-history-chart text { font-family:inherit; font-size:12px; fill:#354f61; }
.kpi-person-share { display:flex; align-items:center; gap:15px; border-bottom:1px solid #e6ecef; padding:8px 0; font-size:13px; }.kpi-person-share>div:last-child { min-width:0; overflow-wrap:anywhere; display:grid; gap:5px; }.kpi-others { font-size:12px; }
.quality-manager .kpi-history .quality-table th:nth-child(4) { width:14%; }.quality-manager .kpi-history .quality-table th:last-child { width:28%; }.quality-manager .kpi-history .quality-table th:first-child { width:28%; }
.kpi-history-trend { display:flex; gap:12px; align-items:center; justify-content:space-between; }.kpi-history-trend>span { white-space:nowrap; min-width:64px; text-align:right; }.kpi-spark { width:132px; max-width:60%; height:34px; flex-shrink:1; }
.kpi-import-details { border-top:1px solid #dce4e9; margin-top:20px; padding:14px 0; }.kpi-import-details>summary { cursor:pointer; font-size:14px; font-weight:600; }.kpi-import-details .quality-import { margin-top:20px; }.kpi-source-note { margin:12px 0; }
@media(max-width:1150px) { .kpi-indicators { grid-template-columns:repeat(2,minmax(0,1fr)); }.kpi-indicator>div { flex-wrap:nowrap; }.kpi-chart-grid { grid-template-columns:minmax(0,1.7fr) minmax(220px,1fr); } }
@media(max-width:950px) { .kpi-period-bar { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.kpi-chart-grid { grid-template-columns:1fr; }.kpi-indicator { padding:14px; }.kpi-ring { width:112px; height:112px; flex-basis:112px; }.kpi-ring-small { width:55px; height:55px; flex-basis:55px; } }
@media(max-width:600px) { .kpi-indicators { grid-template-columns:1fr; }.kpi-indicator>div { min-height:112px; }.kpi-history-chart { min-height:210px; }.kpi-history-trend { justify-content:start; }.kpi-period-bar label { font-size:12px; }.kpi-chart-panel header { gap:6px; }.kpi-repeat-summary { width:100%; justify-items:start; text-align:left; margin:8px 0; }.kpi-history .quality-table td { grid-template-columns:108px minmax(0,1fr); } }
.quality-heading,.quality-pages,.quality-filters,.quality-import { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:0 0 18px; }
.quality-heading h3 { font-size:22px; margin:0; }
.quality-heading form { display:flex; gap:12px; align-items:end; flex-wrap:wrap; }
.quality-manager label,.quality-dialog label { display:grid; gap:6px; font-size:13px; font-weight:600; }
.quality-manager input,.quality-manager select,.quality-dialog select,.quality-dialog textarea { width:100%; min-width:0; padding:10px; border:1px solid #cbd3d8; border-radius:5px; background:white; color:#20282d; font:inherit; }
.quality-metrics { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px; margin:16px 0 24px; }
.quality-metrics>div { border:1px solid #dce2e5; border-radius:6px; padding:12px; background:#fff; }
.quality-metrics span { display:block; font-size:12px; color:#58656c; }
.quality-metrics strong { display:block; font-size:23px; margin-top:6px; }
.quality-rankings { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:24px 0; }
.quality-ranking { min-width:0; border-top:2px solid #c7d7da; padding-top:14px; }
.quality-ranking h4 { font-size:15px; min-height:36px; margin:0 0 12px; }
.quality-manager table { width:100%; min-width:0!important; table-layout:fixed; font-size:13px; }
.quality-manager th,.quality-manager td { white-space:normal; overflow-wrap:anywhere; padding:10px 8px; vertical-align:top; }
.quality-ranking th:first-child { width:64%; }
.quality-manager small { display:block; margin-top:4px; font-size:12px; color:#65717b; }
.quality-manager .quality-table th:nth-child(4) { width:24%; }
.quality-manager .quality-table th:last-child { width:90px; }
.quality-manager .quality-table:has(td[data-label="Forsinkelse"]) th:nth-child(1) { width:12%; }
.quality-manager .quality-table:has(td[data-label="Forsinkelse"]) th:nth-child(2) { width:10%; }
.quality-manager .quality-table:has(td[data-label="Forsinkelse"]) th:nth-child(3) { width:25%; }
.quality-manager .quality-table:has(td[data-label="Forsinkelse"]) th:nth-child(4) { width:12%; }
.quality-manager .quality-table:has(td[data-label="Forsinkelse"]) th:nth-child(5) { width:27%; }
.quality-manager .quality-table:has(td[data-label="Forsinkelse"]) th:last-child { width:14%; }
.quality-status,.quality-type { display:inline-block; font-size:12px; border-radius:4px; padding:4px 7px; background:#edf0f2; color:#33424a; }
.quality-awaiting_response,.quality-obs { background:#fff1c9; color:#745306; }
.quality-answered,.quality-closed { background:#ddf2e8; color:#0d6045; }
.quality-rejected,.quality-grov { background:#ffe2e3; color:#a3232f; }
.quality-unmatched,.quality-error,[data-quality-error] { color:#a3232f; }
.quality-filters { justify-content:start; }.quality-filters label:first-child { flex:1; max-width:500px; }
.quality-pages { justify-content:end; margin-top:16px; }.quality-pages button { width:42px; height:40px; padding:0; }
.quality-charges { border-top:1px solid #ccd5da; padding-top:24px; margin-top:26px; }.quality-note { font-size:13px; color:#596771; }
.quality-charges details { margin:12px 0; }.quality-charges summary,.quality-employee summary { padding:12px 0; font-weight:700; cursor:pointer; }
.quality-dialog { width:min(760px,calc(100vw - 28px)); max-height:calc(100dvh - 32px); padding:0; border:1px solid #ccd4da; border-radius:8px; color:#20282d; overflow:auto; }
.quality-dialog::backdrop { background:rgba(20,28,35,.55); }
.quality-dialog header { display:flex; justify-content:space-between; align-items:start; gap:20px; padding:20px 24px; border-bottom:1px solid #dde2e6; background:#f8fafb; }
.quality-dialog h3 { margin:0; font-size:20px; }.quality-dialog header p { margin:8px 0 0; }.quality-dialog header button { width:38px; height:38px; padding:0; font-size:24px; }
.quality-dialog-body { padding:24px; }.quality-dialog-body form { display:grid; gap:16px; margin-top:24px; }.quality-dialog textarea { resize:vertical; min-height:130px; }.quality-dialog form button { justify-self:end; }
.quality-dialog small { display:block; margin-top:6px; color:#65717b; }
.quality-text { white-space:pre-wrap; overflow-wrap:anywhere; }.quality-conversation { border-left:3px solid #6f9a8a; padding:12px 16px; margin:18px 0; background:#f6f9f8; }
.quality-employee { width:100%; border-top:1px solid #d8e0e3; border-bottom:1px solid #d8e0e3; padding:6px 0; }.quality-employee-item { display:flex; justify-content:space-between; align-items:center; gap:20px; border-top:1px solid #e4e8ea; padding:14px 0; }.quality-employee-item>div { min-width:0; overflow-wrap:anywhere; }.quality-employee-item p { margin:8px 0; }.quality-employee-item button { flex-shrink:0; }
@media(max-width:1150px) { .quality-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); }.quality-rankings { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) { .quality-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }.quality-rankings { grid-template-columns:1fr; }.quality-heading form,.quality-filters { width:100%; }.quality-heading form label { flex:1; }.quality-table thead { display:none; }.quality-table tbody,.quality-table tr,.quality-table td { display:block; width:100%!important; box-sizing:border-box; }.quality-table tr { border-bottom:2px solid #ccd4da; padding:10px 0; }.quality-table td { display:grid; grid-template-columns:110px minmax(0,1fr); gap:8px; border:0; }.quality-table td:before { content:attr(data-label); font-weight:600; color:#5e6c73; }.quality-table td small { grid-column:2; }.quality-dialog header,.quality-dialog-body { padding:16px; }.quality-employee-item { align-items:start; flex-direction:column; } }
@media(max-width:700px) { .quality-heading form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }.quality-heading form button { grid-column:1/-1; } }