/* Halaman Kruma Log: tab, tabel log, dan baris filter per kolom.
   Memakai token warna dari base.css yang dimuat lebih dulu. */

.log-page { width:var(--shell); margin:0 auto; padding:56px 0 90px; }

.log-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; padding-bottom:38px; border-bottom:1px solid var(--line); }
.log-hero .eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 14px; color:var(--gold); font-size:11px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; }
.log-hero .eyebrow span { display:block; width:34px; height:1px; background:var(--gold); }
.log-hero h1 { margin:0; font:700 clamp(46px,7.5vw,80px)/.94 Georgia,"Times New Roman",serif; letter-spacing:-.055em; text-shadow:0 4px 40px #000; }
.log-hero h1 em { color:var(--gold-light); font-weight:400; }
.log-hero .hero-copy { max-width:46ch; margin:16px 0 0; color:var(--muted); font-size:14px; }

.log-card { display:flex; min-width:230px; flex-direction:column; gap:6px; padding:22px 24px; border:1px solid var(--line); background:linear-gradient(160deg,var(--surface-2),var(--surface)); box-shadow:var(--shadow); }
.log-card small { color:var(--gold); font-size:10px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
.log-card strong { font:700 34px Georgia,"Times New Roman",serif; }
.log-card span { color:var(--muted); font-size:11px; }

/* Sorotan tiga killer teratas, di atas panel log. */
.top-killers { margin-top:44px; border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow); }
.top-window { color:var(--muted); font-size:11px; letter-spacing:.06em; white-space:nowrap; }

/* auto-fit, bukan repeat(3,1fr): kalau data baru berisi satu atau dua killer,
   tiga kolom tetap menyisakan latar var(--line) yang kosong di sisa barisnya.
   Track yang tidak terpakai dilipat, lalu 1fr membagi ruangnya rata. */
.killer-podium { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px; margin:0; padding:0; list-style:none; background:var(--line); }
.podium-slot { display:flex; align-items:center; gap:14px; padding:20px 24px; background:var(--surface); }
/* Angka peringkat berupa medali: artwork PNG kalau sudah dipasang, kalau belum
   medali SVG bawaan (lihat kruma_rank_medal()). Warna logam dan angkanya ada
   di dalam medali itu sendiri, jadi di sini tinggal ukuran dan pendarnya.
   drop-shadow diwarnai per logam supaya emas tidak terlihat sama dengan
   perunggu — dan karena mengikuti bentuk alfa, nyalanya membingkai siluet
   pedang serta lidah apinya, bukan kotak persegi.

   Ukurannya 84px, bukan 46px seperti versi SVG: emblem ini jauh lebih rinci
   (perisai, dua pedang bersilang, lidah api, angka romawi) dan di bawah 80px
   angka romawinya tidak lagi terbaca. Berkasnya 176px, dua kali ukuran tampil,
   supaya tetap tajam di layar HiDPI. */
.podium-rank { flex-shrink:0; display:block; width:84px; height:84px; }
.podium-rank svg, .podium-rank img { display:block; width:100%; height:100%; object-fit:contain; }
.podium-slot.rank-1 .podium-rank { filter:drop-shadow(0 1px 8px rgba(215,164,68,.45)); }
.podium-slot.rank-2 .podium-rank { filter:drop-shadow(0 1px 7px rgba(213,217,221,.26)); }
.podium-slot.rank-3 .podium-rank { filter:drop-shadow(0 1px 7px rgba(207,138,85,.3)); }
.podium-name { overflow:hidden; flex:1; color:var(--gold-light); font-size:15px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.podium-count { display:flex; flex-direction:column; align-items:flex-end; flex-shrink:0; }
.podium-count strong { color:var(--text); font:700 22px/1 Georgia,"Times New Roman",serif; font-variant-numeric:tabular-nums; }
.podium-count small { margin-top:3px; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.top-killers .empty-row { margin:0; }

.log-panel { margin-top:24px; border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow); transition:opacity .15s ease; }
/* Panel diredupkan selagi isinya diambil, tanpa mengubah tinggi elemen supaya
   posisi scroll pengguna tidak bergeser saat hasilnya masuk. */
.log-panel.is-loading { opacity:.55; }

.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 26px; border-bottom:1px solid var(--line); }
.panel-heading > div:first-child { display:flex; align-items:center; gap:16px; }
.section-number { color:rgba(215,164,68,.62); font:400 25px Georgia,"Times New Roman",serif; }
.panel-heading small { display:block; color:var(--muted); font-size:10px; letter-spacing:.18em; text-transform:uppercase; }
.panel-heading h2 { margin:4px 0 0; font:700 clamp(23px,3vw,32px)/1.1 Georgia,"Times New Roman",serif; }
.live-indicator { display:inline-flex; align-items:center; gap:8px; color:var(--green); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
.live-indicator i { display:block; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(126,220,133,.14); }

/* Tab dirender sebagai tautan biasa: setiap tab adalah URL tersendiri, jadi
   halaman tetap bisa di-bookmark dan bekerja tanpa JavaScript. */
.log-tabs { display:flex; gap:4px; padding:14px 26px 0; border-bottom:1px solid var(--line); }
.log-tab { position:relative; padding:12px 20px; border:1px solid transparent; border-bottom:0; color:var(--muted); font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; transition:color .2s ease,background .2s ease; }
.log-tab:hover { color:var(--text); background:rgba(255,255,255,.03); }
.log-tab.active { color:var(--text); border-color:var(--line); background:var(--surface-2); }
.log-tab.active::after { position:absolute; right:-1px; bottom:-1px; left:-1px; height:1px; content:""; background:var(--surface-2); }
.log-tab.active::before { position:absolute; top:-1px; right:-1px; left:-1px; height:2px; content:""; background:var(--gold); }

.filter-bar { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 26px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.015); }
.filter-summary { color:var(--muted); font-size:12px; }
.filter-summary p { margin:0; }
.filter-summary strong { color:var(--text); font-size:14px; }
.filter-scope { display:block; margin-top:3px; color:#867f74; font-size:11px; }
.filter-actions { display:flex; align-items:center; gap:10px; }
.apply-filter { padding:10px 18px; border:1px solid var(--gold); color:#1b1308; background:var(--gold); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:background .2s ease; }
.apply-filter:hover { background:var(--gold-light); }
/* Dengan JavaScript filter terkirim otomatis, jadi tombolnya tidak perlu. */
.log-form.is-live .apply-filter { display:none; }
.reset-filter { padding:10px 16px; border:1px solid var(--line); color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; transition:color .2s ease,border-color .2s ease; }
.reset-filter:hover { color:var(--text); border-color:var(--gold); }
.reset-filter.is-idle { opacity:.45; pointer-events:none; }

.table-wrap { overflow-x:auto; }
.log-panel table { width:100%; border-collapse:collapse; font-size:13px; }
.log-panel thead th { padding:14px 18px; border-bottom:1px solid var(--line); color:var(--gold); font-size:10px; font-weight:800; letter-spacing:.16em; text-align:left; text-transform:uppercase; white-space:nowrap; }

.filter-row td { padding:10px 14px; border-bottom:1px solid var(--line); background:rgba(0,0,0,.22); vertical-align:middle; }
.filter-row input, .filter-row select { width:100%; min-width:120px; padding:8px 10px; border:1px solid var(--line); color:var(--text); background:#0d0c09; font-size:12px; transition:border-color .2s ease; }
.filter-row input:focus, .filter-row select:focus { border-color:var(--gold); outline:none; }
.filter-row input::placeholder { color:#6f6a61; }
/* Dua input tanggal dibungkus div agar <td> tetap table-cell dan kolomnya
   tidak keluar dari perataan tabel. */
.date-range { display:flex; gap:8px; }
.date-range input { min-width:0; }
/* Kolom nomor tidak punya filter; sel-nya sengaja dibiarkan kosong. */
.filter-row .col-number { width:56px; }

.log-panel tbody td, .log-panel tbody th { padding:13px 18px; border-bottom:1px solid rgba(255,255,255,.05); text-align:left; font-weight:400; vertical-align:middle; }
.log-panel tbody tr:last-child td, .log-panel tbody tr:last-child th { border-bottom:0; }
.log-panel tbody tr:hover { background:rgba(215,164,68,.05); }

.col-number { width:56px; color:#6f6a61; font-size:11px; font-variant-numeric:tabular-nums; }
.col-date { white-space:nowrap; }
.log-date { display:block; color:var(--text); font-size:12px; font-weight:600; }
.col-date small { color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }

.actor { font-size:13px; font-weight:600; }
.actor.killer { color:var(--gold-light); }
.actor.receiver { color:var(--gold-light); }
.actor.victim { color:#c9c3ba; }
/* Kolom Assist: nama pembagi berkah lewat party share, "-" untuk penerima langsung. */
.actor.assist { color:#8fd49a; }
.no-assist { color:#5d584f; }

.bless-tag { display:inline-flex; align-items:center; gap:8px; padding:3px 12px 3px 5px; border:1px solid var(--line); color:var(--text); font-size:11px; font-weight:700; letter-spacing:.06em; white-space:nowrap; }
.bless-tag .deity-icon { display:block; width:26px; height:26px; object-fit:contain; flex-shrink:0; }
.bless-tag.bless-bathara { color:#f0c47a; border-color:rgba(240,196,122,.4); background:rgba(240,196,122,.1); }
.bless-tag.bless-sethi { color:#8fc4ea; border-color:rgba(143,196,234,.42); background:rgba(143,196,234,.1); }
.bless-tag.bless-vidha { color:#e8877c; border-color:rgba(232,135,124,.42); background:rgba(232,135,124,.1); }

.empty-row { padding:46px 18px!important; color:var(--muted); font-size:13px; text-align:center!important; }

.log-pagination { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 26px; border-top:1px solid var(--line); }
.page-link { display:inline-block; padding:10px 16px; border:1px solid var(--line); color:var(--text); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; transition:border-color .2s ease,color .2s ease,background .2s ease; }
.page-link:hover { border-color:var(--gold); color:var(--gold-light); }
.page-link.is-disabled { color:#5d584f; border-color:rgba(255,255,255,.06); }

.page-numbers { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; margin:0; padding:0; list-style:none; }
.page-number { min-width:38px; padding:9px 8px; text-align:center; font-variant-numeric:tabular-nums; }
.page-number.is-current { color:#1b1308; border-color:var(--gold); background:var(--gold); cursor:default; }
.page-gap { padding:0 4px; color:#5d584f; font-size:12px; }

@media (max-width:900px) {
  .log-page { width:calc(100% - 32px); padding:40px 0 70px; }
  .log-hero { align-items:flex-start; flex-direction:column; gap:26px; }
  .log-card { width:100%; }
  .panel-heading, .filter-bar, .log-pagination { padding-right:18px; padding-left:18px; }
  .killer-podium { grid-template-columns:1fr; }
  .podium-rank { width:72px; height:72px; }
  .podium-slot { padding:16px 18px; }
  .log-tabs { padding-left:18px; padding-right:18px; }
  .filter-bar { align-items:flex-start; flex-direction:column; gap:12px; }
  .date-range { flex-direction:column; }
  .log-panel table { min-width:620px; }
  .log-pagination { flex-wrap:wrap; }
}

@media (max-width:600px) {
  /* Judul panel dua baris membuat penanda "Live data" terdorong keluar kolom,
     jadi di layar sempit ia turun ke barisnya sendiri. */
  .panel-heading { align-items:flex-start; flex-direction:column; gap:12px; }
  .log-tab { padding:11px 14px; font-size:11px; }
  /* Deretan nomor pindah ke barisnya sendiri di atas tombol maju-mundur. */
  .page-numbers { order:-1; width:100%; }
  .log-pagination { justify-content:center; }
  .page-number { min-width:34px; padding:8px 6px; }
}