/* =====================================================================
   08-php-integrasi.css — penyesuaian kecil untuk versi PHP + MySQL.
   Tidak mengubah warna/layout asli; hanya melengkapi kelas yang dipakai
   halaman PHP baru (login/register, cover gambar, label QR, dsb).
   ===================================================================== */

/* ---------- Halaman auth (login & register) ---------- */
body.pc-auth-body{background:linear-gradient(160deg,#0A2018 0%,#0E2A20 55%,#12564B 100%);min-height:100vh;}
.pc-auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px 16px;}
.pc-auth-card{background:var(--white,#fff);border-radius:22px;box-shadow:0 24px 60px rgba(6,24,17,.32);padding:32px 30px;width:100%;max-width:430px;}
.pc-auth-card-lg{max-width:540px;}
.pc-auth-card h1{font-size:26px;margin:0 0 6px;color:#0E2A20;}
.pc-auth-sub{color:#5C6B63;font-size:13.5px;margin:0 0 18px;line-height:1.6;}
.pc-auth-card .field{margin-bottom:14px;}
.pc-auth-card label{display:block;font-size:12.5px;font-weight:600;color:#3C4A43;margin-bottom:6px;}
.pc-auth-card input[type=text],.pc-auth-card input[type=password],.pc-auth-card select{width:100%;padding:11px 13px;border:1px solid #DCE6DF;border-radius:12px;font:inherit;font-size:14px;background:#fff;color:#17231D;}
.pc-auth-card input:focus,.pc-auth-card select:focus{outline:none;border-color:#4C9C7A;box-shadow:0 0 0 3px rgba(76,156,122,.16);}
.pc-field-help{display:block;margin-top:5px;font-size:11.5px;color:#7A8A81;}
.pc-auth-submit{width:100%;margin-top:8px;padding:12px 16px;font-size:14.5px;}
.pc-switcher{margin-top:18px;text-align:center;font-size:13px;color:#5C6B63;}
.pc-switcher a{color:#12564B;font-weight:600;text-decoration:none;}
.pc-switcher a:hover{text-decoration:underline;}
.pc-auth-hint{margin-top:12px;font-size:11.5px;color:#8A9A91;text-align:center;line-height:1.55;}
.pc-auth-hint a{color:#12564B;}
.pc-alert{padding:10px 13px;border-radius:10px;font-size:13px;margin:0 0 14px;line-height:1.5;}
.pc-alert.ok{background:#EAF7EF;color:#1E6B41;border:1px solid #CBE7D6;}
.pc-alert.error{background:#FDECEC;color:#9C2B2B;border:1px solid #F3CFCF;}
.pwd-wrap{position:relative;}
.pwd-wrap input{padding-right:44px;}
.pwd-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;padding:6px;cursor:pointer;color:#7A8A81;line-height:0;border-radius:8px;}
.pwd-toggle:hover{background:#F1F6F3;color:#12564B;}
.pwd-toggle svg{width:18px;height:18px;}
.pwd-toggle .eye-off{display:none;}
.pwd-toggle.is-on .eye-on{display:none;}
.pwd-toggle.is-on .eye-off{display:block;}
.pc-auth-card .field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:520px){.pc-auth-card .field-row{grid-template-columns:1fr;}}

/* ---------- Cover buku berupa gambar (dari kolom `cover`) ---------- */
.book-cover.pc-has-img{background:#0E2A20;}
.pc-cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.pc-cover-fallback{position:relative;z-index:1;font-family:var(--font-serif,'Fraunces',serif);font-size:34px;color:rgba(14,42,32,.35);}

/* ---------- Meta kecil pada kartu buku ---------- */
.pc-card-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px;margin:6px 0 4px;flex-wrap:wrap;}
.pc-card-meta .cell-muted{color:#7A8A81;letter-spacing:.02em;}
.pc-stok-pill{background:#EAF7EF;color:#1E6B41;border-radius:999px;padding:2px 9px;font-weight:600;white-space:nowrap;}
.pc-stok-pill.habis{background:#FDECEC;color:#9C2B2B;}
.rec-actions{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;}
.rec-actions .icon-btn-text{padding:6px 10px;font-size:11.5px;border:1px solid var(--line,#E4EFE5);border-radius:9px;background:#fff;cursor:pointer;color:#12564B;}
.rec-actions .icon-btn-text:hover{background:#F1F6F3;}

/* ---------- Label QR eksemplar ---------- */
.pc-label-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-top:8px;}
.pc-label-card{background:#fff;border:1px solid var(--line,#E4EFE5);border-radius:14px;padding:12px;display:flex;gap:10px;align-items:center;box-shadow:0 4px 14px rgba(14,42,32,.05);}
.pc-label-card.is-dipinjam{opacity:.66;}
.pc-label-qr{width:74px;height:74px;flex:0 0 74px;}
.pc-label-qr svg,.pc-label-qr img{width:74px;height:74px;display:block;}
.pc-label-info{font-size:11.5px;line-height:1.45;color:#3C4A43;min-width:0;}
.pc-label-info b{display:block;font-size:12px;color:#0E2A20;margin-bottom:3px;}
.pc-label-info span{display:block;word-break:break-word;color:#7A8A81;}
.pc-label-notice{margin:0 0 12px;padding:10px 13px;border-radius:10px;font-size:12.5px;}
.pc-label-notice.ok{background:#EAF7EF;color:#1E6B41;border:1px solid #CBE7D6;}

/* ---------- Tabel di HP ---------- */
.panel{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.panel table{min-width:640px;}
.pc-row-actions{display:flex;gap:6px;flex-wrap:nowrap;}
.pc-row-actions .icon-btn-text{padding:4px 8px;font-size:11px;border:1px solid var(--line,#E4EFE5);border-radius:8px;background:#fff;cursor:pointer;color:#12564B;white-space:nowrap;}
.pc-row-actions .icon-btn-text:hover{background:#F1F6F3;}
.pc-badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600;background:#EAF7EF;color:#1E6B41;}
.pc-badge.warn{background:#FEF4E2;color:#8A5A12;}
.pc-badge.bad{background:#FDECEC;color:#9C2B2B;}
.pc-badge.muted{background:#F1F4F2;color:#5C6B63;}

/* =====================================================================
   KELOLA BUKU — admin/buku.php
   Merapikan baris tabel: lebar kolom tetap, border konsisten, cover
   seragam, tombol aksi sama lebar. Tidak mengubah markup PHP.
   ===================================================================== */
#page-kelola-buku .panel table{
  table-layout:fixed;
  min-width:980px;
  border-collapse:separate;
  border-spacing:0;
  background:var(--white);
}
#page-kelola-buku .panel table thead th{
  position:sticky;top:0;z-index:2;
  background:var(--cream-100);
  border-bottom:1px solid var(--line);
  padding:14px 16px;
  font-size:11.5px;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--slate-500);
  font-weight:600;
  white-space:nowrap;
}
#page-kelola-buku .panel table thead th,
#page-kelola-buku .panel table tbody td{
  border-right:1px solid var(--line);
  vertical-align:top;
}
#page-kelola-buku .panel table thead th:last-child,
#page-kelola-buku .panel table tbody td:last-child{border-right:none;}
#page-kelola-buku .panel table tbody td{
  padding:16px;
  font-size:13.5px;
  color:var(--ink-700);
  border-top:1px solid var(--line);
}
#page-kelola-buku .panel table tbody tr:hover{background:#F5FAF5;}
#page-kelola-buku .panel table tbody tr:last-child td{border-bottom:none;}

/* Lebar kolom konsisten (Buku | ISBN | Kategori | Stok | Eksemplar | Aksi) */
#page-kelola-buku .panel table col:nth-child(1){width:260px;}
#page-kelola-buku .panel table col:nth-child(2){width:120px;}
#page-kelola-buku .panel table col:nth-child(3){width:120px;}
#page-kelola-buku .panel table col:nth-child(4){width:90px;}
#page-kelola-buku .panel table col:nth-child(5){width:300px;}
#page-kelola-buku .panel table col:nth-child(6){width:130px;}
#page-kelola-buku .panel table tbody td:nth-child(1){background:#FBFDFC;}
#page-kelola-buku .panel table thead th:nth-child(1){background:#FBFDFC;color:var(--navy-700);}
#page-kelola-buku .panel table tbody td:nth-child(4),
#page-kelola-buku .panel table tbody td:nth-child(5){text-align:center;vertical-align:middle;}
#page-kelola-buku .panel table thead th:nth-child(4),
#page-kelola-buku .panel table thead th:nth-child(5){text-align:center;}

/* Baris buku: cover + judul */
#page-kelola-buku .pc-row-book{display:flex;align-items:center;gap:12px;min-width:0;}
#page-kelola-buku .pc-row-book__cover{
  width:56px;height:80px;min-width:56px;max-width:56px;
  border-radius:8px;overflow:hidden;
  background:linear-gradient(150deg,var(--c-novel),var(--c-sains));
  display:flex;align-items:center;justify-content:center;
  position:relative;border:1px solid var(--line);
  box-shadow:0 2px 6px rgba(14,42,32,.08);
}
#page-kelola-buku .pc-row-book__cover img{
  width:100%;height:100%;object-fit:cover;display:block;
}
#page-kelola-buku .pc-row-book__cover.is-empty{background:var(--cream-100);}
#page-kelola-buku .pc-row-book__fallback{
  font-family:'Fraunces',serif;font-size:24px;
  color:rgba(14,42,32,.35);font-weight:600;
}
#page-kelola-buku .pc-row-book__meta{min-width:0;flex:1;line-height:1.3;}
#page-kelola-buku .pc-row-book__meta b{
  display:block;font-size:13.5px;color:var(--ink-900);
  font-weight:600;line-height:1.3;
  overflow-wrap:break-word;word-break:break-word;
}
#page-kelola-buku .pc-row-book__meta .cell-muted{
  display:block;margin-top:2px;font-size:12px;color:var(--slate-500);
}

/* ISBN: monospace, bisa di-truncate */
#page-kelola-buku td > code,
#page-kelola-buku .panel table tbody td:nth-child(2){
  font-family:'JetBrains Mono','SFMono-Regular',Menlo,monospace;
  font-size:12px;color:var(--ink-700);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  display:inline-block;max-width:100%;
}

/* Daftar eksemplar: baris konsisten, tidak menumpuk liar */
#page-kelola-buku td > ul{
  list-style:none;padding:0;margin:0;
  font-size:11.5px;line-height:1.7;
  display:flex;flex-direction:column;gap:6px;
}
#page-kelola-buku td > ul li{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:5px 8px;border:1px solid var(--line);
  border-radius:8px;background:#fff;
}
#page-kelola-buku td > ul li code{
  font-family:'JetBrains Mono','SFMono-Regular',Menlo,monospace;
  font-size:11px;color:var(--ink-700);
}
#page-kelola-buku td > form{
  display:flex;gap:6px;flex-wrap:wrap;align-items:center;
  margin-top:8px;
}
#page-kelola-buku td > form input[type=text]{
  flex:1;min-width:130px;
  padding:7px 10px;border:1px solid #DCE6DF;border-radius:8px;
  font-size:12px;background:#fff;color:var(--ink-700);
}
#page-kelola-buku td > form input[type=text]:focus{
  outline:none;border-color:#4C9C7A;
  box-shadow:0 0 0 3px rgba(76,156,122,.16);
}
#page-kelola-buku td > form button{padding:6px 10px;}

/* Tombol aksi (Edit / Hapus dan per-eksemplar) rata lebarnya */
#page-kelola-buku .pc-row-actions{
  display:flex;gap:6px;flex-direction:column;align-items:stretch;
}
#page-kelola-buku .pc-row-actions .icon-btn-text,
#page-kelola-buku .pc-row-actions .icon-btn-text--danger{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-width:84px;
  padding:7px 10px;font-size:12px;font-weight:600;
  border-radius:8px;cursor:pointer;
  border:1px solid var(--line);background:#fff;color:var(--navy-700);
  text-align:center;
}
#page-kelola-buku .pc-row-actions .icon-btn-text:hover{background:#F1F6F3;}
#page-kelola-buku .pc-row-actions .icon-btn-text--danger{
  color:#9C2B2B;border-color:#F3CFCF;
}
#page-kelola-buku .pc-row-actions .icon-btn-text--danger:hover{background:#FDECEC;}
#page-kelola-buku td > ul li form{display:inline;margin:0;}
#page-kelola-buku td > ul li button.icon-btn-text{
  font-size:10.5px;padding:3px 8px;border-radius:7px;
}

/* Badge konsistensi (kategori + stok + status) */
#page-kelola-buku .pc-badge,
#page-kelola-buku .pc-stok-pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;padding:4px 10px;border-radius:999px;
  font-size:11px;font-weight:600;
}
#page-kelola-buku .pc-stok-pill{background:#EAF7EF;color:#1E6B41;}
#page-kelola-buku .pc-stok-pill.habis{background:#FDECEC;color:#9C2B2B;}
#page-kelola-buku .pc-badge{background:#EAF7EF;color:#1E6B41;}
#page-kelola-buku .pc-badge.warn{background:#FEF4E2;color:#8A5A12;}
#page-kelola-buku .pc-badge.bad{background:#FDECEC;color:#9C2B2B;}

/* Bungkus tabel dengan scroll horizontal di layar kecil */
#page-kelola-buku .panel{border:1px solid var(--line);box-shadow:var(--shadow-soft);}
#page-kelola-buku .panel > table{
  border-radius:inherit;
  display:table;width:100%;
}

@media (max-width:1100px){
  #page-kelola-buku .panel table col:nth-child(1){width:230px;}
  #page-kelola-buku .panel table col:nth-child(5){width:260px;}
}
@media (max-width:880px){
  #page-kelola-buku .panel table{min-width:880px;}
  #page-kelola-buku .panel table col:nth-child(1){width:220px;}
  #page-kelola-buku .panel table col:nth-child(2){width:110px;}
  #page-kelola-buku .panel table col:nth-child(3){width:110px;}
  #page-kelola-buku .panel table col:nth-child(5){width:240px;}
  #page-kelola-buku .panel table col:nth-child(6){width:110px;}
}

/* Menghormati mode gelap */
html[data-theme="dark"] #page-kelola-buku .panel table{
  background:#16211D;
}
html[data-theme="dark"] #page-kelola-buku .panel table thead th,
html[data-theme="dark"] #page-kelola-buku .panel table tbody td{
  border-color:#26332C;color:#CDE8DB;
}
html[data-theme="dark"] #page-kelola-buku .panel table tbody td:nth-child(1),
html[data-theme="dark"] #page-kelola-buku .panel table thead th:nth-child(1){
  background:#1B2A24;
}
html[data-theme="dark"] #page-kelola-buku .pc-row-book__cover{background:#1B2A24;}
html[data-theme="dark"] #page-kelola-buku .pc-row-book__cover.is-empty{background:#243129;color:#7A8A81;}
html[data-theme="dark"] #page-kelola-buku td > ul li{background:#16211D;border-color:#26332C;}
html[data-theme="dark"] #page-kelola-buku td > form input[type=text]{
  background:#16211D;border-color:#26332C;color:#CDE8DB;
}

/* =====================================================================
   KATALOG BUKU — admin/katalog.php
   Menambahkan border/bingkai konsisten untuk kartu katalog, area wrapper,
   pills, toolbar, dan panel kosong. Selaras dengan perbaikan Kelola Buku.
   Selektor di-scope ke #page-katalog-buku supaya tidak menyentuh halaman lain.
   ===================================================================== */
#page-katalog-buku{padding:0;}

/* Wrapper kartu: tiap kartu berada di dalam bingkai wrapper */
#page-katalog-buku .pc-kat-grid{
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  background:#FBFDFC;
  padding:18px;
  box-shadow:var(--shadow-soft);
  gap:18px;
}

/* Border tegas di tiap kartu (override inline .pc-kat-card) */
#page-katalog-buku .pc-kat-card{
  border:1.5px solid var(--line);
  border-radius:var(--radius-card);
  background:#fff;
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
#page-katalog-buku .pc-kat-card:hover{
  border-color:var(--navy-600);
  transform:translateY(-2px);
  box-shadow:0 10px 24px -10px rgba(14,42,32,.22);
}

/* Garis pemisah sampul ↔ body */
#page-katalog-buku .pc-kat-card__body{
  border-top:1px solid var(--line);
  padding:14px 14px 16px;
  background:#fff;
  display:flex;flex-direction:column;gap:4px;
}

/* Border untuk chip rasio & kategori */
#page-katalog-buku .pc-kat-card__chip{
  border:1px solid rgba(14,42,32,.18);
}
#page-katalog-buku .pc-kat-card__ratio{
  border:1px solid rgba(255,255,255,.35);
}

/* Status: ring (outline) supaya feel-nya tegas */
#page-katalog-buku .pc-kat-card__status{
  align-self:flex-start;
  border:1px solid transparent;
}
#page-katalog-buku .pc-kat-card__status.tersedia{
  background:#EAF1EA;color:#1E6B41;
  border-color:#9FCFB4;
}
#page-katalog-buku .pc-kat-card__status.dipinjam{
  background:#DBEAF1;color:#1B4D71;
  border-color:#9FB9CE;
}
#page-katalog-buku .pc-kat-card__status.habis{
  background:#FDECEC;color:#8A1C1C;
  border-color:#E6B5B5;
}

/* Filter pills: border tegas, konsisten, dan hover lembut */
#page-katalog-buku .pc-kat-pills{margin-bottom:14px;}
#page-katalog-buku .pc-kat-pills a{
  border:1.5px solid var(--line);
  border-radius:999px;
  padding:8px 14px;
  background:#fff;
  color:var(--ink-700);
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  transition:all .16s ease;
}
#page-katalog-buku .pc-kat-pills a:hover{
  border-color:var(--navy-600);
  color:var(--navy-700);
  background:var(--cream-50);
}
#page-katalog-buku .pc-kat-pills a.active{
  background:var(--navy-900);
  color:#fff;
  border-color:var(--navy-900);
}

/* Toolbar: dibungkus container dengan bingkai agar form-control-nya sejajar */
#page-katalog-buku .pc-kat-toolbar{
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  background:#fff;
  padding:10px 12px;
  box-shadow:0 1px 2px rgba(14,42,32,.04);
  margin-bottom:18px;
  gap:10px;
}
#page-katalog-buku .pc-kat-toolbar .search-bar{
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  flex:0 1 320px;
}
#page-katalog-buku .pc-kat-toolbar .select-mini{
  border:1.5px solid var(--line);
  border-radius:8px;
  background:#fff;
  min-width:140px;
}
#page-katalog-buku .pc-kat-toolbar .pc-rekom-btn{
  border:1.5px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:var(--ink-700);
}
#page-katalog-buku .pc-kat-toolbar .pc-rekom-btn:hover{
  background:var(--cream-50);
  color:var(--navy-900);
  border-color:var(--navy-600);
}

/* Panel empty-state: border dashed supaya tidak terasa kosong */
#page-katalog-buku .panel{
  border:1.5px solid var(--line);
  border-radius:var(--radius-card);
  background:#fff;
}

/* Tombol tambah buku di toolbar: tetap konsisten */
#page-katalog-buku .icon-btn{
  border:1.5px solid var(--navy-900);
}

/* Dark mode */
html[data-theme="dark"] #page-katalog-buku .pc-kat-grid{
  background:#16211D;border-color:#26332C;
}
html[data-theme="dark"] #page-katalog-buku .pc-kat-card{
  border-color:#26332C;background:#182420;
}
html[data-theme="dark"] #page-katalog-buku .pc-kat-card__body{
  border-color:#26332C;background:#182420;color:#CDE8DB;
}
html[data-theme="dark"] #page-katalog-buku .pc-kat-toolbar{
  background:#16211D;border-color:#26332C;
}
html[data-theme="dark"] #page-katalog-buku .pc-kat-toolbar .select-mini,
html[data-theme="dark"] #page-katalog-buku .pc-kat-toolbar .pc-rekom-btn{
  background:#16211D;border-color:#26332C;color:#CDE8DB;
}

/* ---------- Empty state dalam kartu akun ---------- */
.pc-account-empty{grid-column:1/-1;padding:22px;text-align:center;color:#7A8A81;font-size:13px;background:#F7FAF8;border:1px dashed #DCE6DF;border-radius:14px;}

/* ---------- Form admin ---------- */
.pc-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.pc-form-grid .full{grid-column:1/-1;}
@media (max-width:680px){.pc-form-grid{grid-template-columns:1fr;}}
.pc-form-grid label{display:block;font-size:12.5px;font-weight:600;color:#3C4A43;margin-bottom:8px;}
.pc-form-grid input,.pc-form-grid select,.pc-form-grid textarea{width:100%;padding:11px 14px;border:1px solid #DCE6DF;border-radius:11px;font:inherit;font-size:13.5px;background:#fff;color:#17231D;}
.pc-form-grid textarea{min-height:96px;resize:vertical;}
.pc-form-grid input:focus,.pc-form-grid select:focus,.pc-form-grid textarea:focus{outline:none;border-color:#4C9C7A;box-shadow:0 0 0 3px rgba(76,156,122,.16);}
.pc-form-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;}

/* ---------- Cover pada modal detail ---------- */
.detail-cover{background-size:cover;background-position:center;}

/* ---------- Pelengkap kelas hasil render PHP baru ---------- */
.scan-cover{width:64px;height:88px;flex:0 0 64px;border-radius:9px;background:linear-gradient(150deg,#CBE79F,#8FD6A6);display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center;font-family:var(--font-serif,'Fraunces',serif);font-size:26px;color:rgba(14,42,32,.4);}
.scan-result{display:flex;flex-direction:column;gap:10px;}
.scan-result-head{display:flex;gap:14px;align-items:flex-start;}
.scan-result-head h3{margin:0 0 4px;font-size:18px;color:#0E2A20;}
.rec-profile-chip{display:inline-block;padding:6px 12px;border-radius:999px;background:#F1F6F3;border:1px solid #DCE6DF;font-size:12px;color:#12564B;margin-bottom:12px;}
.rec-term{display:inline-block;padding:4px 10px;border-radius:999px;background:#EAF7EF;color:#1E6B41;font-size:11.5px;margin:0 6px 6px 0;}
.bar-row{display:grid;grid-template-columns:110px 1fr 42px;align-items:center;gap:9px;margin-bottom:9px;font-size:12px;color:#3C4A43;}
.bar-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bar-track{background:#EAF1EC;border-radius:999px;height:9px;overflow:hidden;display:block;}
.bar-fill{display:block;height:100%;background:linear-gradient(90deg,#4C9C7A,#8FD6A6);border-radius:999px;}
.bar-val{text-align:right;font-weight:600;color:#12564B;}
.legend-item{display:flex;align-items:center;gap:7px;font-size:12px;color:#3C4A43;margin-bottom:6px;}
.legend-dot{width:10px;height:10px;border-radius:3px;flex:0 0 10px;}

/* =====================================================================
   UPLOAD COVER BUKU — admin/buku-tambah.php & admin/buku-edit.php
   Drop-zone + preview + clear-cover checkbox.
   Input file sengaja tetap di-render (visibility:hidden) supaya:
     - tab order & aksesibilitas tetap jalan
     - label for=id 最强 click trigger (label nge-forward klik ke input)
     - fallback JS .click() handler kalau browser nge-blok native click
   ===================================================================== */
.pc-cover-drop{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  gap:6px;
  min-height:140px;
  padding:18px;
  border:1.5px dashed #C7D7CE;
  border-radius:14px;
  background:#F6FAF7;
  color:#3C4A43;
  text-align:center;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.pc-cover-drop:hover,
.pc-cover-drop.is-drag{
  background:#EAF7EF;
  border-color:#4C9C7A;
}
.pc-cover-drop input[type="file"]{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
  z-index:3;
  margin:0;
}
/* Label yang jadi konten visual oleh karena input nge-overlay */
.pc-cover-drop > .pc-cover-drop__hint{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  pointer-events:none; /* klik nge-fallthrough ke input via DOM order */
  color:#3C4A43;
  font-size:13px;
  font-weight:500;
  z-index:1;
}
.pc-cover-drop > .pc-cover-drop__hint small{
  color:#7A8A81;
  font-weight:400;
  font-size:11.5px;
}
.pc-cover-drop > .pc-cover-drop__hint svg{
  color:#4C9C7A;
  margin-bottom:2px;
}
/* Preview image: tampil setelah user pilih gambar */
.pc-cover-drop .pc-cover-preview{
  position:absolute;
  inset:8px;
  width:calc(100% - 16px);
  height:calc(100% - 16px);
  object-fit:contain;
  background:#0E2A20;
  border-radius:10px;
  z-index:2;
  display:block;
}
.pc-cover-drop .pc-cover-preview[hidden]{
  display:none !important;
}
/* Cover yang lagi tersimpan di DB (halaman edit) */
.pc-cover-current{
  display:block;
  padding:10px;
  border:1px solid #DCE6DF;
  border-radius:12px;
  background:#FBFDFC;
}
.pc-cover-current img.pc-cover-preview{
  position:relative;
  inset:auto;
  width:auto;
  height:auto;
  max-width:180px;
  max-height:230px;
  display:block;
  margin:0 auto;
  object-fit:contain;
  background:transparent;
  border-radius:8px;
}
.pc-cover-placeholder{
  min-height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px dashed #DCE6DF;
  border-radius:12px;
  background:#F4F7F5;
  color:#7A8A81;
  font-size:13px;
}
.pc-cover-clear{
  color:var(--ink-700,#3C4A43);
  user-select:none;
  cursor:pointer;
}
.pc-cover-clear input[type="checkbox"]{
  width:auto;
  height:auto;
  position:static;
  opacity:1;
  margin:0;
  cursor:pointer;
}

/* =====================================================================
   FORM TAMBAH/EDIT BUKU — tidy grouped sections, buttons, spinner.
   ===================================================================== */
.pc-form-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin:22px 0 10px;
  padding-bottom:8px;
  border-bottom:1px dashed #DCE6DF;
}
.pc-form-head:first-child{ margin-top:0; }
.pc-form-eyebrow{
  display:inline-block;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#4C9C7A;
  background:#EAF7EF;
  padding:2px 9px;
  border-radius:999px;
  margin-bottom:4px;
}
.pc-form-h2{
  font-family:var(--font-serif,'Fraunces',serif);
  font-size:19px;
  font-weight:600;
  color:#0E2A20;
  margin:0 0 2px;
  line-height:1.25;
}
.pc-form-sub{
  font-size:12.5px;
  color:#7A8A81;
  margin:0;
  max-width:62ch;
}
.pc-form-grid label .req{
  color:#B3402C;
  font-weight:700;
  margin-left:2px;
}
.pc-help{
  display:block;
  font-size:11.5px;
  color:#7A8A81;
  margin-top:4px;
  line-height:1.4;
}
.pc-form-foot{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid #DCE6DF;
}
.pc-form-foot .icon-btn{
  min-width:160px;
  justify-content:center;
}
.pc-form-foot .icon-btn-ghost{
  min-width:auto;
  background:transparent;
  border:1px solid #DCE6DF;
  color:#3C4A43;
}
.pc-form-foot .icon-btn-ghost:hover{ background:#F4F7F5; border-color:#4C9C7A; }
.pc-form-note{
  margin-left:auto;
  font-size:11.5px;
  color:#7A8A81;
}
.pc-spin{
  display:inline-block;
  width:13px;height:13px;
  border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  border-radius:50%;
  animation: pcspin .7s linear infinite;
  margin-right:6px;
  vertical-align:-2px;
}
@keyframes pcspin{ to{ transform:rotate(360deg); } }

@media (max-width:760px){
  .pc-form-grid{
    grid-template-columns:1fr !important;
  }
  .pc-form-grid .full{ grid-column:auto; }
  .pc-form-foot{ flex-direction:column; align-items:stretch; }
  .pc-form-foot .icon-btn{ width:100%; }
  .pc-form-note{ margin-left:0; text-align:center; }
}

.pc-cover-drop__line{
  font-weight:600;
  color:#17231D;
  font-size:13.5px;
}
.pc-cover-drop small{ font-weight:400; font-size:11.5px; color:#7A8A81; }

/* Banner error form complex — muncul saat preflight JS nolak submit */
.pc-form-error[hidden]{display:none!important} /* <div id="form-error" hidden> tidak boleh tampil sebagai kotak merah kosong */
.pc-form-error{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  margin-bottom:14px;
  border:1px solid #F4B5AF;
  border-left:4px solid #B3402C;
  border-radius:10px;
  background:#FCEEEC;
  color:#7A1F18;
  font-size:13px;
  line-height:1.5;
}
.pc-form-error:before{
  content:"";
  flex:0 0 18px;width:18px;height:18px;
  border-radius:50%;
  background:#B3402C;
  color:#fff;
  text-align:center;font-weight:700;
  display:inline-block;
  margin-top:1px;
  background-image:radial-gradient(circle, transparent 0 4px, #fff 4px 5px);
  background-color:#B3402C;
}
.is-invalid{
  border-color:#B3402C !important;
  box-shadow:0 0 0 3px rgba(179,64,44,.18) !important;
  background:#FFF7F6;
}


/* =====================================================================
   PERBAIKAN TATA LETAK (v16)
   Keluhan: teks form "mepet" ke border panel. Penyebabnya: .panel tidak punya
   padding, dan form adalah anak langsung .panel, sehingga label baris pertama
   menempel ke border kartu. Di bawah ini jarak napas ditambahkan di dalam
   panel (bukan di .panel, supaya tabel & empty-state tetap full-bleed).
   ===================================================================== */
.panel > form{padding:20px 22px;}
.panel > .pc-alert{margin:16px 22px 0;}
.panel > .pc-alert + form{padding-top:16px;}

/* Ruang dalam tabel kelola buku (sebelumnya 13px 18px) */
.panel table thead th{padding:14px 20px;}
.panel table tbody td{padding:14px 20px;}

/* ---------- Tombol & zona hapus buku ---------- */
.icon-btn-danger{border-color:#B3402C;background:#B3402C;color:#fff;}
.icon-btn-danger:hover{background:#9C2B2B;border-color:#9C2B2B;}
.icon-btn-text--danger{color:#9C2B2B;border-color:#F3CFCF;}
.icon-btn-text--danger:hover{background:#FDECEC;}
.pc-danger-zone{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:22px;padding:14px 16px;
  border:1px solid #F3CFCF;background:#FDF6F5;border-radius:12px;
}
.pc-danger-zone__text{flex:1 1 320px;}
.pc-danger-zone b{display:block;font-size:13.5px;color:#7A1F18;margin-bottom:3px;}
.pc-danger-zone span{font-size:12.5px;color:#8A5A52;line-height:1.5;}