/* tables.css — panel admin, kontrol form dasar, dan tabel data. */

/* ---------- Panel admin ---------- */
.panel h3 {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.form-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.form-row input,
.form-row select,
.form-row textarea {
  background: var(--surface2);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
/* Kontrol tanggal: tinggi seragam + ikon kalender ikut tema. */
.form-row input[type="date"] { min-height: 37px; color-scheme: dark; }
html[data-theme="light"] .form-row input[type="date"] { color-scheme: light; }
.form-row input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.65; cursor: pointer; }
.form-row input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* Label inline untuk kontrol tanggal: teks placeholder native "mm/dd/yyyy"
   mengikuti locale browser, jadi konteksnya diberi label eksplisit. */
.field-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--faint);
  white-space: nowrap;
}
.field-inline input { flex: 0 0 auto; }
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: rgba(37, 137, 232, 0.55);
}
.form-row textarea { width: 100%; min-width: 260px; resize: vertical; }
.form-row input[type="file"] {
  padding: 6px 8px;
  color: var(--muted);
  font-size: 12.5px;
  max-width: 100%;
}
.form-row input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface3);
  color: var(--ink);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.form-row input[type="file"]::file-selector-button:hover {
  background: var(--bg-hover);
  border-color: var(--faint);
}
.form-row button {
  background: var(--accent-fill);
  color: var(--accent-ink);
  border: none;
  border-radius: 10px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.form-row button:hover { background: var(--accent-hi); }
.form-row button.secondary {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
}
.form-row button.secondary:hover { color: var(--ink); border-color: var(--line-strong); }

/* ---------- Tabel ---------- */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
th {
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--faint);
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: rgba(255, 255, 255, 0.03); }
td select {
  background: var(--surface2);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 12.5px;
  outline: none;
}
td label { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; color: var(--muted); font-size: 12px; }
td input[type="checkbox"] { accent-color: var(--accent); }
td button {
  background: var(--surface3);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12.5px;
  cursor: pointer;
}
td button:hover { border-color: rgba(37, 137, 232, 0.5); color: var(--accent-text); }
.flag-yes { color: var(--danger); font-weight: 600; }
.flag-no { color: var(--faint); }