/* volume.css — Selaras tema terang (seperti index) */

.wrap{max-width:980px;margin:40px auto;padding:0 20px}
.lead{color:var(--muted);margin:0 0 16px}

/* Grid */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media (max-width:820px){ .grid2,.grid3{grid-template-columns:1fr} }

/* Field */
.fld{display:flex;flex-direction:column;gap:6px}
.fld .row{display:flex;gap:8px}

/* Controls: terang default (ikuti index) */
input,select{
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--card);
  color:var(--fg);
  box-shadow:none;
}
input::placeholder{color:var(--muted);opacity:.95}

/* Buttons: default terang; aksen via .btn-primary */
.btn{padding:12px 16px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--fg);font-weight:700;cursor:pointer}
.btn:hover{
  background: color-mix(in oklab, var(--brand) 8%, var(--card));
  border-color: color-mix(in oklab, var(--brand) 25%, var(--line));
}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn-primary{background:var(--brand);color:#fff;border:none;box-shadow:0 6px 16px rgba(10,146,208,.18)}
.btn-primary:hover{filter:brightness(1.05)}

/* Chips pilihan preset */
.chips{margin-top:10px}
.chip{
  display:inline-flex;gap:6px;align-items:center;margin:6px 8px 0 0;
  background: color-mix(in oklab, var(--brand) 6%, var(--card));
  border:1px solid var(--line); color:var(--fg);
  border-radius:999px; padding:6px 10px; cursor:pointer; font-size:13px;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.chip:hover{
  background: color-mix(in oklab, var(--brand) 12%, var(--card));
  border-color: color-mix(in oklab, var(--brand) 25%, var(--line));
  box-shadow: 0 2px 10px rgba(10,146,208,.10);
}

/* Headline & meta pills */
.headline{font-weight:800;font-size:18px;margin-bottom:8px}
.meta-chips{display:flex;gap:8px;flex-wrap:wrap}
.meta-chips .pill{
  display:inline-block;
  background: color-mix(in oklab, var(--brand) 10%, var(--card));
  border:1px solid var(--line);
  color:var(--fg);
  padding:2px 10px; border-radius:999px; font-size:13px;
}

/* Tabel hasil */
.table-wrap{overflow:auto;margin-top:8px}
.vol-table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.vol-table th,.vol-table td{padding:10px 12px;border-bottom:1px dashed var(--line)}
.vol-table th{color:var(--muted);text-align:left;font-weight:600;background: color-mix(in oklab, var(--brand) 6%, var(--card))}
.vol-table tr:last-child td{border-bottom:none}
.vol-table tr.highlight td{background: color-mix(in oklab, var(--brand) 12%, var(--card))}

/* Badge di dalam tabel */
.badge{
  display:inline-block;
  border:1px solid var(--line);
  background: color-mix(in oklab, var(--brand) 8%, var(--card));
  color:var(--fg);
  border-radius:999px;
  padding:2px 8px; font-size:12px;
}

.mini{font-size:12px}
.muted{color:var(--muted)}