/*
  metadata-pdf/metadata-pdf.css
  ==================================
  Self-contained styles untuk tool Edit Metadata PDF. Basis (drop zone,
  field, tombol, status, FAQ) mengikuti pola duplikasi yang sama seperti
  tool lain (lihat header upscaler.css). Bagian khusus tool ini ada di
  paling bawah: grid field, baris tanggal, daftar kolom tambahan.
*/

.mea-tool-page {
  max-width: 720px;
  padding-top: 40px;
  padding-bottom: 64px;
}

[hidden] { display: none !important; }

/* ---------- Drop zone ---------- */

.mea-drop-zone-small { padding: 24px 16px; }

/* ---------- Selected file bar ---------- */

.mea-selected-file {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 10px 12px;
  border: 1px solid var(--mea-border);
  border-radius: var(--mea-radius-md);
  background: var(--mea-surface);
}

.mea-selected-remove {
  background: transparent;
  border: none;
  color: var(--mea-text-muted);
  font-size: 20px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: var(--mea-radius-sm);
  cursor: pointer;
  flex-shrink: 0;
}

/* ---------- Editor section / fields ---------- */

.mea-editor-section {
  margin-top: 32px;
  border-top: 1px solid var(--mea-border);
  padding-top: 24px;
}

.mea-field { margin-bottom: 24px; }

.mea-text-input,
.mea-select {
  width: 100%;
  padding: 10px 12px;
  background: var(--mea-surface);
  border: 1px solid var(--mea-border);
  border-radius: var(--mea-radius-sm);
  color: var(--mea-text-primary);
  font-size: 13.5px;
  box-sizing: border-box;
}
.mea-text-input:focus, .mea-select:focus { outline: none; border-color: var(--mea-accent); }

/* ---------- Preset groups (reused mea-quality-* classes) ---------- */

/* ---------- Buttons / status / progress ---------- */

.mea-status { margin-top: 12px; font-size: 13px; min-height: 18px; }

.mea-download-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 13px;
  background: var(--mea-success);
  color: #061121;
  border-radius: var(--mea-radius-md);
  font-size: 14.5px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
  margin-top: 12px;
  transition: transform 0.15s ease;
}
.mea-download-btn:hover { transform: translateY(-1px); }

/* ---------- FAQ (SEO) ---------- */

/* =====================================================================
   Khusus Edit Metadata PDF
   ===================================================================== */

.mea-meta-summary {
  margin: 0 0 24px;
  padding: 12px 14px;
  border: 1px solid var(--mea-border);
  border-radius: var(--mea-radius-md);
  background: var(--mea-surface);
  font-size: 13px;
  color: var(--mea-text-secondary);
  line-height: 1.55;
}
.mea-meta-summary strong { color: var(--mea-text-primary); font-weight: 600; }

.mea-meta-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 640px) {
  .mea-meta-grid { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .mea-meta-grid .mea-field-wide { grid-column: 1 / -1; }
}

/* Baris tanggal: input + tombol kecil di sampingnya */
.mea-date-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.mea-date-row .mea-text-input { flex: 1 1 200px; min-width: 0; }
.mea-date-row .mea-btn-secondary { width: auto; padding: 8px 12px; font-size: 12.5px; white-space: nowrap; }

.mea-check-label {
  display: flex !important;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--mea-text-primary);
  font-size: 13.5px;
}
.mea-check-label input { width: 18px; height: 18px; accent-color: var(--mea-accent); }

.mea-custom-list {
  margin: 10px 0 0;
  padding: 10px 12px;
  list-style: none;
  border: 1px dashed var(--mea-border-strong);
  border-radius: var(--mea-radius-sm);
  font-size: 12.5px;
  color: var(--mea-text-secondary);
  word-break: break-word;
}
.mea-custom-list li + li { margin-top: 4px; }
.mea-custom-list b { color: var(--mea-text-primary); font-weight: 600; }

.mea-action-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.mea-action-row .mea-btn-primary { flex: 1 1 220px; }
.mea-action-row .mea-btn-secondary { width: auto; flex: 0 1 auto; }
.mea-btn-danger { color: var(--mea-danger-text); }
.mea-btn-danger:hover { background: var(--mea-danger-bg); border-color: var(--mea-danger-text); }
.mea-field-note { margin: 16px 0 0; font-size: 12px; color: var(--mea-text-muted); line-height: 1.55; }