/* ==========================================================================
   TraderPemula — partner.css
   Tambahan untuk dasbor partner. Rangka, sidebar, kartu, dan tombolnya datang
   dari /app/assets/css/app.css yang dimuat lebih dulu; berkas ini hanya
   menambahkan yang belum ada di sana — petak saldo, lencana status, dan tabel
   ledger.

   Warnanya diambil dari lapisan semantik di style.css (--surface-*, --border-*,
   --accent-*, --success, --danger, --warn, --info, --text-mute), bukan dari
   nama palet. Aturan yang sama berlaku di app.css dan dijaga oleh
   css-tokens.test.js di sana.
   ========================================================================== */

/* --- kepala halaman: tautan afiliasi ------------------------------------ */

.p-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.p-head h1 {
  margin: 0 0 0.25rem;
  font-size: 1.5rem;
}

.p-head p {
  margin: 0;
  color: var(--text-mute);
}

.p-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  color: var(--text-mute);
  font-size: 0.9rem;
}

.p-meta strong { color: var(--text); }

.p-linkbar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Kolom ini readonly dan tidak duduk di dalam .field, jadi ia tidak kebagian
   satu pun aturan bentuk dari style.css — yang tersisa kotak putih bawaan
   peramban, dan di tema gelap itu terbaca sebagai halaman yang rusak.

   Permukaannya --surface-sunken, bukan --surface-field: isinya dibaca dan
   disalin, tidak diketik. Bidang cekung menyampaikan itu tanpa perlu menonaktif-
   kannya, dan input yang disabled tidak bisa disorot untuk disalin manual —
   justru satu-satunya jalan yang tersisa kalau tombol salin gagal. */
.p-linkbar input {
  flex: 1 1 18rem;
  min-width: 0;
  padding: 0.8rem 1rem;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--text);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.9rem;
  text-overflow: ellipsis;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

/* Fokus tetap ditandai meski isinya tidak bisa diubah: kolom readonly masih bisa
   dicapai papan tombol dan masih bisa disalin dengan Ctrl+A, jadi pembaca yang
   ke sana lewat Tab harus tahu ia sedang di mana. */
.p-linkbar input:focus {
  outline: none;
  border-color: var(--accent-brand);
  box-shadow: 0 0 0 4px var(--surface-brand);
}

/* Kode referral itu yang paling sering dibacakan lewat telepon atau diketik
   ulang, jadi ia dibesarkan dan diberi jarak antar huruf. */
.p-code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent-brand);
}

/* --- petak saldo -------------------------------------------------------- */

.p-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.p-tile {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 14px);
  padding: 1rem 1.1rem;
}

.p-tile-label {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute);
}

.p-tile-value {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
}

.p-tile-note {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--text-mute);
}

.p-tile-ok .p-tile-value { color: var(--success); }
.p-tile-warn .p-tile-value { color: var(--warn); }

/* --- tabel ledger ------------------------------------------------------- */

/* Dibungkus supaya tabel enam kolom bisa digulir mendatar di layar sempit
   ketimbang memaksa seluruh halaman ikut melebar. */
.p-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.p-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.p-table th,
.p-table td {
  padding: 0.65rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.p-table th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-mute);
  font-weight: 600;
}

.p-table tbody tr:last-child td { border-bottom: 0; }

.p-num { text-align: right; font-variant-numeric: tabular-nums; }

.p-mono {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.85rem;
}

.p-empty {
  padding: 2rem 0.75rem;
  text-align: center;
  color: var(--text-mute);
  white-space: normal;
}

/* --- lencana status ----------------------------------------------------- */

.p-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid currentColor;
}

.p-badge-ok { color: var(--success); }
.p-badge-warn { color: var(--warn); }
.p-badge-info { color: var(--info); }
.p-badge-danger { color: var(--danger); }
.p-badge-mute { color: var(--text-mute); }

/* --- pagination --------------------------------------------------------- */

.p-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1rem;
  color: var(--text-mute);
  font-size: 0.9rem;
}

/* --- penyaring status --------------------------------------------------- */

.p-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.p-filter {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-mute);
  font-size: 0.85rem;
  cursor: pointer;
}

.p-filter:hover { border-color: var(--border-emphasis); }

.p-filter.active {
  background: var(--surface-sunken);
  border-color: var(--accent-brand);
  color: var(--accent-brand);
}

/* --- form payout -------------------------------------------------------- */

.p-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

.p-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1rem;
}

/* Peringatan jaringan pada form wallet: satu-satunya kesalahan di dasbor ini
   yang tidak bisa dibatalkan, jadi ia diberi ruang sendiri, bukan disamarkan
   jadi teks bantuan abu-abu di bawah kolom. */
.p-warn {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--warn);
  color: var(--warn);
  font-size: 0.9rem;
}

.p-section {
  margin-top: 2rem;
}

.p-section h2 {
  font-size: 1.1rem;
  margin: 0 0 0.75rem;
}