/*
 * rewards-page.css — Ödüller & Rozetler. Liste kalıbı (.usr) + özet kutuları;
 * satırda rozet (efektsiz), kriter (kendi renginde ikon), aura, kazanan oranı,
 * durum anahtarı. Pencereler: düzenleyici (form + yapışkan canlı önizleme;
 * yalnız önizlemedeki tek rozet efektli), Discord ayarları. Döngü yok.
 * Tasarım: docs/design-system.md §7.41
 */

#view-rewards {
  font-family: var(--wf-font-text);
  color: var(--wf-text-1);
}
#view-rewards button:focus-visible,
.rwe-dlg button:focus-visible {
  outline: 2px solid rgba(244, 236, 234, 0.6);
  outline-offset: -2px;
}
.usr.rwd { --usr-cols: minmax(240px, 2fr) minmax(170px, 1.2fr) 96px 150px 100px 132px; }
.rwd-new { height: 40px; }
.rwd-new svg { width: 15px; height: 15px; }

/* Rozet: ortak reward-badge, boyutu --bs ile */
.rwd-badge { display: inline-grid; flex-shrink: 0; }
.rwd-badge > .reward-badge { --badge-size: var(--bs, 32px); }

/* ============================================================
   [SATIR]
   ============================================================ */
.rwd-who { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 0; }
.rwd .usr-mail i,
.rwd-fx i { font-style: normal; color: var(--wf-text-4); }
.rwd-crit { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rwd-crit-ico {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 9px;
  background: color-mix(in srgb, var(--c) 15%, transparent);
  color: var(--c);
}
.rwd-crit-ico svg { width: 15px; height: 15px; }
.rwd-crit-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rwd-crit-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.86rem; font-weight: 600; color: var(--wf-text-1); }
.rwd-crit-text span { font-size: 0.74rem; color: var(--wf-text-4); }
.rwd-fx { font-size: 0.84rem; font-weight: 500; color: var(--wf-text-2); }
.rwd-earned { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 5px; font-size: 0.8rem; color: var(--wf-text-3); }
.rwd-earned b { font-family: var(--wf-font-display); font-size: 0.95rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--wf-text-1); }
.rwd-bar { display: block; flex-basis: 100%; max-width: 120px; height: 4px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, 0.06); }
.rwd-bar i { display: block; height: 100%; border-radius: inherit; background: #34d399; transform-origin: left; }
.rwd-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--wf-text-3);
  cursor: pointer;
}
.rwd-toggle.is-on { color: var(--wf-text-1); }
.rwd-toggle.is-on .rl-switch { background: #34d399; }
.rwd-toggle.is-on .rl-switch::after { transform: translateX(14px); background: #ffffff; }
.rwd-row.is-off .rwd-who,
.rwd-row.is-off .rwd-crit,
.rwd-row.is-off .rwd-fx { opacity: 0.5; }

/* ============================================================
   [DISCORD AYARLARI]
   ============================================================ */
.rwd-dc {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.rwd-dc + .rwd-dc { margin-top: 10px; }
.rwd-dc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.rwd-dc-title { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 1px; }
.rwd-dc-title b { font-size: 0.92rem; font-weight: 700; color: var(--wf-text-1); }
.rwd-dc-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.76rem; color: var(--wf-text-4); }
.rwd-dc-state { flex-shrink: 0; padding: 3px 8px; border-radius: 7px; font-size: 0.72rem; font-weight: 700; }
.rwd-dc-state.is-ok { background: rgba(52, 211, 153, 0.12); color: #6ee7b7; }
.rwd-dc-state.is-off { background: rgba(240, 180, 90, 0.12); color: #f6c98a; }
.rwd-dc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rwd-dc-grid .dlg-field + .dlg-field { margin-top: 0; }
.rwd-dc .dlg .dlg-input,
.rwd-dc .dlg-input { font-variant-numeric: tabular-nums; }
.rwd-dc .dlg-field-msg { display: block; margin-top: 8px; }

/* ============================================================
   [DÜZENLEYİCİ] form + yapışkan önizleme
   ============================================================ */
.rwe { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; }
.rwe-sec + .rwe-sec { margin-top: 22px; }
.rwe-sec .dlg-sec-title em { margin-left: 2px; font-style: normal; font-weight: 500; color: var(--wf-text-4); }
.rwe-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 6px; }
.rwe-metric {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  text-align: left;
  color: var(--wf-text-2);
  cursor: pointer;
  transition: background-color var(--wf-dur-hover) ease, box-shadow var(--wf-dur-hover) ease;
}
.rwe-metric .rwd-crit-ico { --c: var(--mc); width: 26px; height: 26px; border-radius: 8px; }
.rwe-metric .rwd-crit-ico svg { width: 13px; height: 13px; }
.rwe-metric.is-sel { background: color-mix(in srgb, var(--mc) 9%, transparent); box-shadow: inset 0 0 0 1.5px var(--mc); color: var(--wf-text-1); }
.rwe-threshold:not(:empty) { margin-top: 12px; }
.rwe-num { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dlg .rwe-num .dlg-input { width: 160px; font-family: var(--wf-font-display); font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.dlg .rwe-num input[type='date'].dlg-input { width: 210px; font-family: var(--wf-font-text); font-size: 0.9rem; font-weight: 500; color-scheme: dark; }
.rwe-unit button { height: 34px; }
.rwe-unit-text { font-size: 0.84rem; color: var(--wf-text-3); }
.rwe-cfg {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 11px;
  background: rgba(240, 180, 90, 0.08);
  font-size: 0.82rem;
  line-height: 1.45;
  color: #fde68a;
}
.rwe-cfg svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }
.rwe-cfg b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--wf-text-1); }
.rwe-cfg.is-ok { background: rgba(52, 211, 153, 0.08); color: #bbf7d0; }
.rwe-rule { margin-top: 12px; }
.rwe-rule > svg { color: var(--mc); }
.rwe-fxs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.rwe-fx {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: background-color var(--wf-dur-hover) ease, box-shadow var(--wf-dur-hover) ease;
}
.rwe-fx b { font-size: 0.82rem; font-weight: 600; color: var(--wf-text-2); }
.rwe-fx span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.7rem; color: var(--wf-text-4); }
.rwe-fx.is-sel { background: color-mix(in srgb, var(--c) 9%, transparent); box-shadow: inset 0 0 0 1.5px var(--c); }
.rwe-fx.is-sel b { color: var(--wf-text-1); }
.rl-langs.is-single .rl-lang { grid-template-columns: 116px minmax(0, 1fr); }
.dlg .rl-lang .dlg-input { height: 34px; padding: 0 10px; border-radius: 8px; font-size: 0.84rem; }

.rwe-side {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.rwe-side .dlg-sec-title { margin-bottom: 0; }
.rwe-stage {
  display: grid;
  place-items: center;
  height: 168px;
  border-radius: 12px;
  background:
    radial-gradient(60% 60% at 50% 46%, color-mix(in srgb, var(--c) 16%, transparent) 0%, transparent 72%),
    #0e090b;
}
.rwe-pv-text { display: flex; flex-direction: column; gap: 3px; text-align: center; }
.rwe-pv-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--wf-font-display); font-size: 1.08rem; font-weight: 600; }
.rwe-pv-text span { font-size: 0.78rem; color: var(--wf-text-3); }
.rwe-pv-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}
.rwe-pv-chip [data-pv-chip] { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 0.82rem; }
.rwe-pv-chip [data-pv-chip] b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--wf-text-1); }
.rwe-active { min-height: 56px; }
/* Aktiflik her rozet renginde okunur: yeşil */
.rl-perm.rwe-active.is-on { background: rgba(52, 211, 153, 0.07); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.3); }
.rl-perm.rwe-active.is-on .rl-switch { background: #34d399; }

@media (hover: hover) and (pointer: fine) {
  .rwe-metric:not(.is-sel):hover,
  .rwe-fx:not(.is-sel):hover { background: rgba(255, 255, 255, 0.06); }
  .rwd-toggle:hover { color: var(--wf-text-1); }
}

/* ============================================================
   [DUYARLI]
   ============================================================ */
@media (max-width: 1360px) {
  .usr.rwd { --usr-cols: minmax(220px, 2fr) minmax(160px, 1.2fr) 130px 100px 84px; }
  .rwd .usr-head span:nth-child(3),
  .rwd .rwd-fx { display: none; }
  .rwd .usr-btn span { display: none; }
  .rwd .usr-btn { width: 32px; padding: 0; justify-content: center; }
}
@media (max-width: 900px) {
  .rwe { grid-template-columns: minmax(0, 1fr); }
  .rwe-side { position: static; order: -1; }
  .rwe-stage { height: 128px; }
}
@media (max-width: 760px) {
  .rwd .usr-tools { flex-wrap: wrap; }
  .rwd-new { flex: 1 1 100%; }
  .rwd .usr-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
    row-gap: 8px;
    padding: 12px 12px 12px 14px;
  }
  .rwd .rwd-who { flex: 1 1 calc(100% - 90px); padding: 0; }
  .rwd .usr-actions { order: 1; }
  .rwd .rwd-crit { order: 2; flex: 1 1 auto; }
  .rwd .rwd-earned { order: 3; }
  .rwd .rwd-bar { display: none; }
  .rwd .rwd-row > div:nth-child(5) { order: 4; margin-left: auto; }
  .rwd-dc-grid { grid-template-columns: minmax(0, 1fr); }
  .rl-langs.is-single .rl-lang { grid-template-columns: minmax(0, 1fr); }
}