/* ==========================================================================
   Request Game — antrean permintaan game.
   Memakai token dari admin.css; tidak ada warna baru kecuali nada status yang sudah ada.
   Satu hal yang ditonjolkan: gambar header Steam sebagai jangkar tiap baris, dengan rel warna status di kiri.
   ========================================================================== */

/* ---------- toolbar: chip status di kiri, pencarian & urutan di kanan ---------- */
.rq-toolbar { justify-content: space-between; gap: 12px 20px; }
.rq-toolbar .gm-fgroup { flex: 0 1 auto; }
.rq-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; min-width: 0; }
.rq-tools .search { flex: 1 1 240px; width: 280px; max-width: 100%; }
.rq-tools select { width: auto; min-width: 140px; }
.rq-tools .spacer { margin-left: 0; white-space: nowrap; }
.rq[data-state="loading"] .rq-list { opacity: 0.6; transition: opacity 0.15s; }
.rq > .gm-alert { margin: 14px 16px 0; }

/* ---------- baris antrean ---------- */
.rq-list { display: grid; }
.rq-row {
  --rail: var(--line-strong);
  position: relative; display: grid; align-items: center; gap: 14px 18px;
  grid-template-columns: 148px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  padding: 14px 18px 14px 21px; border-bottom: 1px solid var(--line-soft);
  cursor: pointer; transition: background 0.15s;
}
.rq-row:last-child { border-bottom: 0; }
.rq-row::before { content: ""; position: absolute; inset: 10px auto 10px 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--rail); }
.rq-row:hover { background: var(--wash); }
.rq-row:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-line); }
.rq-row.is-pending { --rail: var(--warn); }
.rq-row.is-approved { --rail: var(--accent); }
.rq-row.is-added { --rail: var(--ok); }
.rq-row.is-rejected { --rail: var(--err); }
.rq-row.is-rejected .rq-art, .rq-row.is-added .rq-art { opacity: 0.72; }
.rq-art .cover { width: 100%; }

.rq-main { display: grid; gap: 6px; min-width: 0; }
.rq-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 15px/1.3 var(--f-display); letter-spacing: -0.01em; }
.rq-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.rq-flags { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.rq-flags .pill { padding: 2px 8px; font-size: 12px; }

.rq-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rq-user__t { display: grid; min-width: 0; }
.rq-user__t b, .rq-user__t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rq-user__t b { font-weight: 600; }

.rq-when { display: grid; justify-items: start; gap: 5px; min-width: 0; }
.rq-reason { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 30ch; color: var(--fg-2); }
.rq-acts { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }

/* ---------- loading ---------- */
.rq-row--skel { cursor: default; grid-template-columns: 148px minmax(0, 1fr) 110px; }
.rq-row--skel::before { background: var(--line); }
.rq-row--skel:hover { background: none; }
.rq-sk-art { aspect-ratio: 460 / 215; border-radius: 8px; }
.rq-sk-lines { display: grid; gap: 10px; }
.rq-sk-lines .skel { height: 14px; }
.rq-sk-lines .skel:last-child { width: 55%; }
.rq-sk-pill { height: 24px; border-radius: var(--r-pill); }

/* ---------- drawer detail ---------- */
dialog.drawer.rq-drawer { width: min(620px, 100vw); }
.rq-detail { display: grid; gap: 22px; }
.rq-hero { display: grid; gap: 14px; }
.rq-hero .cover { width: 100%; border-radius: 14px; }
.rq-hero__t { display: grid; gap: 8px; }
.rq-hero__st { display: flex; flex-wrap: wrap; gap: 6px; }
.rq-hero h3 { font: 700 22px/1.25 var(--f-display); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.rq-hero__id { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.rq-hero__id .link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.rq-sec h3 { margin: 0 0 10px; font: 700 14px var(--f-display); }
.rq-note { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-hi); }
.rq-note .i { flex: none; margin-top: 2px; }
.rq-note b { display: block; color: var(--fg); font-weight: 600; }
.rq-note p { margin-top: 2px; color: var(--fg-2); font-size: 13px; }
.rq-note.is-ok { background: var(--ok-bg); border-color: transparent; color: var(--ok); }
.rq-person { display: flex; align-items: center; gap: 14px; }
.rq-person > div { display: grid; gap: 3px; justify-items: start; min-width: 0; }
.rq-person b { font: 600 16px var(--f-display); overflow-wrap: anywhere; }
.rq-steam { display: grid; gap: 10px; }
.rq-genres { display: flex; flex-wrap: wrap; gap: 6px; }
.rq-desc { color: var(--fg-2); max-width: 62ch; }
.rq-foot { display: flex; gap: 8px; margin-left: auto; align-items: center; }
.rq-count { display: block; margin-top: -14px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

/* riwayat: urutan kejadian yang sebenarnya, jadi garis waktu memang bermakna di sini */
.rq-tl { position: relative; display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.rq-tl li { position: relative; display: flex; gap: 14px; }
.rq-tl li:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 16px; bottom: -14px; width: 2px; background: var(--line); }
.rq-tl__dot { position: relative; z-index: 1; flex: none; width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; background: var(--dim); box-shadow: 0 0 0 3px var(--s1); }
.rq-tl li.is-pending .rq-tl__dot { background: var(--warn); }
.rq-tl li.is-approved .rq-tl__dot { background: var(--accent); }
.rq-tl li.is-added .rq-tl__dot { background: var(--ok); }
.rq-tl li.is-rejected .rq-tl__dot { background: var(--err); }
.rq-tl b { display: block; font-weight: 600; }
.rq-tl small { display: block; }

/* catatan di form Add Game saat dibuka dari request */
.rq-ctx { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-hi); font-size: 13px; }
.rq-ctx .i { flex: none; margin-top: 2px; }
.rq-ctx p { color: var(--fg-2); }
.rq-ctx b { color: var(--fg); }

/* ---------- layar sempit: baris menjadi dua tingkat ---------- */
@media (max-width: 1180px) {
  .rq-row { grid-template-columns: 132px minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "art main when" "art user acts"; row-gap: 10px; }
  .rq-art { grid-area: art; align-self: start; }
  .rq-main { grid-area: main; }
  .rq-when { grid-area: when; }
  .rq-user { grid-area: user; }
  .rq-acts { grid-area: acts; }
}
@media (max-width: 720px) {
  .rq-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "art" "main" "when" "user" "acts"; padding-inline: 16px; }
  .rq-art .cover { max-width: 320px; }
  .rq-acts { justify-content: flex-start; flex-wrap: wrap; }
  .rq-acts .btn { min-height: 40px; }
  .rq-tools { margin-left: 0; width: 100%; }
  .rq-tools .search { width: 100%; flex-basis: 100%; }
  .rq-row--skel { grid-template-columns: 96px minmax(0, 1fr); }
  .rq-sk-pill { display: none; }
}