/* feedback (views/feedback.js): Geri bildirimler. Small additions to panel.css; colours only via the theme variables,
   so dark and light both work. Prefix fb-. The Gelen list is P.rows (panel.css .p-row); the rules under "list" only
   bend them for a feed: the quote leads, semibold while unread, the amber left border on "İşe yaramadı". */

/* ---------- toolbar ---------- */
.fb-filters{margin-bottom:0}
.fb-seg{max-width:100%;overflow-x:auto;scrollbar-width:none;flex:none}
.fb-seg::-webkit-scrollbar{display:none}
.fb-seg .seg button{white-space:nowrap}
/* the search takes what is left up to 300 px, so seg · rating · search · bulk stay on one row down to ~1180 px */
.fb-q{position:relative;display:flex;flex:1 1 200px;max-width:300px;min-width:180px}
.fb-q span:where(.ic){position:absolute;left:10px;top:50%;width:15px;height:15px;margin-top:-7.5px;color:var(--faint);pointer-events:none}
.filters .fb-q .input{width:100%;padding-left:32px}
.fb-bulk{margin-left:auto}
.fb-chips{margin-top:-4px}
.fb-priv{font-size:12.5px}
.fb-priv span:where(.ic){color:var(--warn)}

/* ---------- list: one P.row per feedback ---------- */
.fb-list{transition:opacity .15s}
.fb-busy{opacity:.55;pointer-events:none;transition:opacity .15s}
.fb-list .p-row{padding-top:8px;padding-bottom:8px}
.fb-list .p-row-h{max-width:58%}
/* the quote: plain weight, semibold only while unread; the rating (dot + text) before it */
.fb-list .p-row-t{font-weight:400}
.fb-li.unread .p-row-t{font-weight:600}
.fb-list .p-row-t.none{color:var(--faint)}
.fb-list .fb-r{flex:none;font-size:13px}
.fb-list .fb-r.fb-r-none{font-size:12.5px}
/* "İşe yaramadı": the amber left border (a warning notice, --warn); drawn inside the row so the list's radius stays */
.fb-li.fb-neg{box-shadow:inset 3px 0 0 var(--warn)}
/* the facts read as one grey line: the company a little firmer (who), the #id plain */
.fb-list .p-meta a,.fb-list .p-meta .fb-co{color:inherit;text-decoration:none;font-weight:500}
@media (hover:hover){.fb-list .p-meta a:hover{text-decoration:underline;text-underline-offset:2px}}
.fb-list .fb-noent{color:var(--faint)}
.fb-list .fb-id{font-size:12px;font-weight:400}
.fb-list .p-warn [title]{cursor:help}
.fb-id{color:var(--muted);font-weight:600;font-size:12px}
.fb-when{color:var(--muted);font-size:12.5px;white-space:nowrap}
.fb-dot{width:8px;height:8px;border-radius:50%;background:var(--info);box-shadow:0 0 0 3px var(--info-bg);flex:none}
.fb-r-ok{background:var(--ok-bg);color:var(--ok)}
.fb-r-partial{background:var(--warn-bg);color:var(--warn)}
.fb-r-fail{background:var(--bad-bg);color:var(--bad)}
.fb-r-none{background:var(--panel3);color:var(--muted)}
.fb-st{background:transparent}
.fb-st.open{border-color:color-mix(in srgb,var(--info) 45%,transparent);color:var(--info)}
.fb-st.done{border-color:var(--line2);color:var(--muted)}
.fb-list .fb-st{border:0;color:inherit}
a.fb-co,a.fb-key{text-decoration:none}
a.fb-key{color:var(--text)}
@media (hover:hover){a.fb-co:hover,a.fb-key:hover{text-decoration:underline}}
.fb-sep{color:var(--faint)}
.fb-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.fb-pager{margin-left:auto;display:flex;gap:8px;align-items:center}
.fb-pager .mono{font-size:12px}
.fb-hint{display:flex;gap:7px;align-items:center;margin:0;font-size:12px}
.fb-hint span:where(.ic){width:13px;height:13px;flex:none}
.fb-center{display:flex;justify-content:center;padding:0 16px 22px}
.fb-small{font-size:12.5px;margin:0}
.fb-tag-new{background:var(--info-bg);color:var(--info)}

/* ---------- detail drawer (the whole values: message, done line, entry, files) ---------- */
.fb-ih{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.fb-co{color:var(--text);font-weight:600}
.fb-msg{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-size:13.5px;line-height:1.5}
.fb-msg.none{color:var(--faint);font-size:12.5px}
.fb-ent{display:flex;flex-direction:column;gap:7px;font-size:12.5px;min-width:0}
.fb-ent-top{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
.fb-fn{overflow-wrap:anywhere;word-break:break-all}
.fb-ekv{display:flex;flex-wrap:wrap;gap:3px 18px;min-width:0}
.fb-kvi{min-width:0;overflow-wrap:anywhere}
.fb-k{color:var(--faint);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-right:6px}
.fb-ops{display:flex;flex-wrap:wrap;gap:5px}
.fb-op{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;border:1px solid var(--line2);background:var(--panel2);font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap}
.fb-op.dtc{color:var(--accent-text);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.fb-pill{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--bad) 45%,transparent);color:var(--bad);font-size:11px;font-weight:600;white-space:nowrap}
.fb-done{display:flex;gap:7px;align-items:flex-start;font-size:12.5px;color:var(--muted);padding:7px 10px;border-radius:8px;background:var(--ok-bg)}
.fb-done span:where(.ic){width:15px;height:15px;flex:none;color:var(--ok);margin-top:2px}
.fb-done b{color:var(--text);font-weight:600}
.fb-note{color:var(--text)}
.fb-gone{display:flex;gap:8px;align-items:center;color:var(--faint);font-size:12.5px}
.fb-gone span:where(.ic){width:15px;height:15px;flex:none}
.fb-d{display:flex;flex-direction:column;gap:16px}
.fb-d h4{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:600;margin:0 0 9px}
.fb-d section{border-top:1px solid var(--line);padding-top:14px}
.fb-lic{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px}
.fb-eid{font-size:11.5px}
.fb-d .fb-ent + .fb-small{margin-top:10px}
.fb-dfiles{margin-top:10px;gap:10px}
.fb-flist{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.fb-f{display:grid;grid-template-columns:118px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:7px 10px;border-bottom:1px solid var(--line);font-size:12.5px}
.fb-f:last-child{border-bottom:0}
.fb-f-r{font-weight:600}
.fb-f-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.fb-f-s{font-size:11.5px;white-space:nowrap}
.fb-rel{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.fb-rel-i{display:flex;flex-direction:column;gap:4px;width:100%;text-align:left;padding:9px 12px;border:0;border-bottom:1px solid var(--line);background:none;cursor:pointer;font:inherit;color:inherit}
.fb-rel-i:last-child{border-bottom:0}
@media (hover:hover){.fb-rel-i:hover{background:var(--panel2)}}
.fb-rel-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fb-rel-m{font-size:13px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fb-rel-s{font-size:11.5px}
.fb-dfoot{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;width:100%}

/* ---------- Kalite ---------- */
.fb-qbar{margin-bottom:0}
.fb-kpis .kpi .v{font-size:24px}
.fb-stack{display:flex;height:8px;border-radius:99px;overflow:hidden;background:var(--panel3);min-width:48px}
.fb-stack i{display:block;height:100%}
.fb-stack i + i{box-shadow:-1px 0 0 var(--panel)}
.fb-stack i.ok{background:var(--ok)} .fb-stack i.partial{background:var(--warn)} .fb-stack i.fail{background:var(--bad)}
.fb-stack.lg{height:14px;border-radius:7px}
.fb-dist{display:flex;flex-direction:column;gap:2px}
.fb-dist-i{display:grid;grid-template-columns:10px minmax(0,1fr) auto 48px;gap:10px;align-items:center;font-size:13px;padding:7px 0;border-bottom:1px solid var(--line)}
.fb-dist-i:last-child{border-bottom:0}
.fb-dist-i i{width:10px;height:10px;border-radius:3px;background:var(--faint)}
.fb-dist-i i.ok{background:var(--ok)} .fb-dist-i i.partial{background:var(--warn)} .fb-dist-i i.fail{background:var(--bad)} .fb-dist-i i.none{background:var(--line2)}
.fb-dist-i .mono{text-align:right;font-size:12px}
.fb-trend{display:flex;flex-direction:column;gap:8px}
.fb-trend .chart .bar-r{fill:var(--faint);opacity:.45}
.fb-trend .chart .bar-r.alt{fill:var(--bad);opacity:.9}
.fb-legend i.tot{background:var(--faint);opacity:.6}
.fb-legend i.fail{background:var(--bad)}
.fb-rate{display:grid;grid-template-columns:minmax(48px,1fr) 40px;gap:8px;align-items:center;min-width:110px}
.fb-rate span{text-align:right;font-family:var(--mono);font-size:12px}
.tbl th.fb-ratecol{width:34%}
.fb-num{font-weight:600}
.tbl td .sub.fb-monly{display:none}
.tbl td .sub.fb-monly.bad{color:var(--bad)}
.fb-ecu-n b{font-weight:600}
.fb-tn{font-weight:600;white-space:nowrap}
.fb-tip{display:flex;gap:8px;align-items:flex-start;padding:10px 16px;border-top:1px solid var(--line);font-size:12px}
.fb-tip span:where(.ic){width:14px;height:14px;flex:none;margin-top:2px}
.fb-fails{display:flex;flex-direction:column}
.fb-fail{display:flex;flex-direction:column;gap:4px;width:100%;text-align:left;padding:10px 16px;border:0;border-bottom:1px solid var(--line);background:none;cursor:pointer;font:inherit;color:inherit}
.fb-fail:last-child{border-bottom:0}
@media (hover:hover){.fb-fail:hover{background:var(--panel2)}}
.fb-fail-m{font-size:13.5px;overflow-wrap:anywhere}
.fb-fail-s{display:flex;flex-wrap:wrap;align-items:center;gap:3px 7px;font-size:12px;color:var(--muted)}
.fb-fail-s b{color:var(--text);font-weight:600}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .fb-list .p-row-h{max-width:50%}
}
@media (max-width:900px){
  .tbl td .sub.fb-monly{display:block}
  .fb-rate{min-width:92px;grid-template-columns:minmax(40px,1fr) 36px}
  .fb-quality .tbl th,.fb-quality .tbl td{padding-left:10px;padding-right:10px}
  .fb-bulk{margin-left:0}
}
@media (max-width:560px){
  .fb-filters > .select{flex:1 1 auto;width:auto}
  .fb-q{flex:1 1 100%;min-width:0;max-width:none}
  .fb-bulk{flex:1 1 100%}
  /* a phone: the P.row grid puts the facts under the first line; the quote wraps instead of being cut to a few words */
  .fb-list .p-row-h{max-width:none;flex-wrap:wrap}
  .fb-list .p-row-t{white-space:normal}
  .fb-f{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}
  .fb-f-n{grid-column:1 / -1;grid-row:2}
  .fb-f-s{display:none}
  .fb-pager{margin-left:0;width:100%;justify-content:space-between}
  .fb-kpis .kpi .v{font-size:21px}
}