.fpm-wrap { max-width: 820px; margin: 18px auto; padding: 16px; background: #fff; border: 1px solid #eee; border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.02); }
.fpm-wrap label { display:block; margin-top:10px; font-weight:600; }
.fpm-wrap input[type='text'], .fpm-wrap .fpm-select { width:100%; padding:8px; border:1px solid #ddd; border-radius:4px; box-sizing:border-box; }
.fpm-btn { display:inline-block; margin-top:12px; padding:8px 12px; border:0; border-radius:6px; background:#111; color:#fff; cursor:pointer; }
.fpm-message { margin-top:10px; font-size:14px; color:#333; }

.fpm-featured-wrap { margin-top:14px; }
.fpm-upload-box { border:2px dashed #e0e0e0; padding:12px; border-radius:8px; text-align:center; background:#fafafa; transition: border-color .18s ease; position:relative; }
.fpm-upload-box:hover { border-color:#0073aa; }
.fpm-upload-info { color:#666; font-size:13px; margin-top:8px; }

.fpm-featured-preview { margin-top:12px; }
.fpm-card { display:flex; gap:12px; align-items:center; justify-content:flex-start; padding:8px; border:1px solid #eee; background:#fff; border-radius:6px; }
.fpm-card img { width:88px; height:88px; object-fit:cover; border-radius:6px; }
.fpm-card-info { flex:1; text-align:left; font-size:13px; }
.fpm-btn-small { padding:6px 8px; background:#d33; border-radius:4px; color:#fff; border:0; cursor:pointer; }

/* === Frontend Post Manager (Fancy Modern Table) === */
.fpm-manager-wrap {
  margin-top: 40px;
  font-family: "Inter", Arial, sans-serif;
  color: #333;
}

.fpm-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
  table-layout: fixed;
}

.fpm-table thead th {
  background: #111;
  color: #fff;
  text-align: left;
  font-weight: 600;
  padding: 14px 18px;
  border-radius: 8px 8px 0 0;
  letter-spacing: 0.3px;
}

.fpm-table tbody tr {
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fpm-table tbody tr:hover {
  transform: scale(1.01);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.fpm-table td {
  padding: 16px 18px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
  word-wrap: break-word;
}

.fpm-table td:first-child {
  font-weight: 600;
  color: #111;
}

/* === Lebar kolom === */
.fpm-table th:nth-child(1),
.fpm-table td:nth-child(1) {
  width: 45%;
}

.fpm-table th:nth-child(2),
.fpm-table td:nth-child(2) {
  width: 20%;
}

.fpm-table th:nth-child(3),
.fpm-table td:nth-child(3) {
  width: 15%;
  white-space: nowrap;
}

.fpm-table th:nth-child(4),
.fpm-table td:nth-child(4) {
  width: 20%;
}

.fpm-table a {
  color: #0073aa;
  text-decoration: none;
}

.fpm-table a:hover {
  color: #111;
}

/* === Status tag === */
.fpm-status {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 25px;
  font-size: 13px;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0.3px;
}

.fpm-status.publish {
  background: #e5f8e8;
  color: #1a7f37;
}

.fpm-status.pending {
  background: #fff4e5;
  color: #a66b00;
}

.fpm-pagination {
  margin-top: 25px;
  text-align: center;
}

.fpm-pagination a,
.fpm-pagination span {
  display: inline-block;
  padding: 8px 14px;
  margin: 0 5px;
  background: #f1f1f1;
  color: #333;
  border-radius: 6px;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.2s;
}

.fpm-pagination a:hover {
  background: #000;
  color: #fff;
}

.fpm-pagination .current {
  background: #000;
  color: #fff;
}

/* Penyesuaian lebar kolom khusus */
.fpm-table th:nth-child(3),
.fpm-table td:nth-child(3) {
  width: 120px; /* kolom Dibuat lebih kecil */
  white-space: nowrap;
  text-align: center;
}

.fpm-table th:nth-child(4),
.fpm-table td:nth-child(4) {
  width: 180px; /* kolom Status lebih besar */
  text-align: center;
}

/* ===== Responsiveness ===== */
@media (max-width: 768px) {
  .fpm-table,
  .fpm-table thead,
  .fpm-table tbody,
  .fpm-table th,
  .fpm-table td,
  .fpm-table tr {
    display: block;
    width: 100%;
  }

  .fpm-table thead {
    display: none; /* sembunyikan header tabel di mobile */
  }

  .fpm-table tr {
    background: #fff;
    margin-bottom: 12px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    overflow: hidden;
  }

  .fpm-table td {
    padding: 12px 16px;
    text-align: left;
    border: none;
    border-bottom: 1px solid #f1f1f1;
    position: relative;
  }

  .fpm-table td:last-child {
    border-bottom: none;
  }

  /* Label kolom muncul otomatis di depan tiap data */
  .fpm-table td::before {
    content: attr(data-label);
    display: block;
    font-weight: 600;
    color: #555;
    margin-bottom: 5px;
    text-transform: capitalize;
    font-size: 13px;
  }

  /* Penyesuaian status tag di mobile */
  .fpm-status {
    display: inline-block;
    margin-top: 6px;
    padding: 6px 12px;
    font-size: 12px;
  }

  /* Pagination mobile */
  .fpm-pagination a,
  .fpm-pagination span {
    padding: 6px 10px;
    font-size: 12px;
  }
}