/* =====================================================================
   Tema PP MUS Sarang: penyesuaian layar kecil (HP) dan daftar berkas.
   Dimuat SETELAH ppmus.css, jadi aturan di sini yang berlaku bila bentrok.
   ===================================================================== */

/* ---------- Daftar berkas (semua ukuran layar) ---------- */
.pp-files .pp-file {
  display: grid !important;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  column-gap: .9rem;
  row-gap: .7rem;
  align-items: center;
  box-sizing: border-box;
  max-width: 100%;
  padding: .8rem 1rem !important;
}
.pp-files .pp-file .pp-file-ico    { grid-column: 1; grid-row: 1; }
.pp-files .pp-file .pp-file-name   { grid-column: 2; grid-row: 1; min-width: 0; line-height: 1.5; word-break: break-word; }
.pp-files .pp-file .pp-file-action { grid-column: 3; grid-row: 1; width: auto !important; margin: 0 !important; }
.pp-files .pp-file .pp-file-action form { margin: 0; }

/* ---------- Layar menengah ke bawah: menu terlipat ---------- */
@media (max-width: 991.98px) {
  .c-header .navbar {
    flex-wrap: wrap !important;
    align-items: center;
    padding: .5rem .85rem !important;
  }
  /* nama perpustakaan mengisi baris, tombol menu di kanan (tidak turun ke baris baru) */
  .c-header .navbar-brand {
    display: flex !important;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    margin: 0 .5rem 0 0;
  }
  .c-header .navbar-brand h1 {
    font-size: 1rem !important;
    line-height: 1.25 !important;
    white-space: normal;
  }
  .c-header .navbar-brand h2 { display: none; }
  .c-header .navbar-toggler {
    flex: 0 0 auto;
    margin-left: auto;
    padding: .4rem .65rem;
    border-radius: 10px;
  }
  .c-header .navbar-collapse {
    flex-basis: 100%;
    padding: .35rem 0 .6rem;
    border-top: 1px solid var(--pp-line);
    margin-top: .5rem;
  }
  .c-header .navbar-nav .nav-link {
    padding: .7rem .5rem;
    min-height: 44px;
  }
}

/* logo bawaan SLiMS berwarna putih dan tidak terlihat di menu putih: sembunyikan sampai logo sendiri dipasang */
.navbar-brand img[src*="static.slims.web.id"] { display: none; }

/* ---------- HP ---------- */
@media (max-width: 575.98px) {
  /* kotak pencarian */
  .search .card { min-height: 0; }
  .search .input-transparent { font-size: 1rem !important; }

  /* beranda: kartu dua kolom */
  .pp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
  .pp-card { padding: .6rem; }
  .pp-card-cover img { height: 140px; }

  /* baris berkas: tombol penuh di baris sendiri, mudah disentuh */
  .pp-files .pp-file { grid-template-columns: 2rem minmax(0, 1fr); }
  .pp-files .pp-file .pp-file-action {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100% !important;
  }
  .pp-files .pp-file .pp-file-action form,
  .pp-files .pp-file .pp-file-action .btn {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }
  .pp-files .pp-file .pp-file-action .btn {
    min-height: 44px;
    padding: .6rem 1rem;
    font-size: 1rem;
    line-height: 1.4;
  }
}

/* ---------- Hasil pencarian: filter ---------- */
.pp-filter-toggle {
  min-height: 46px;
  border-radius: 12px;
  font-weight: 700;
  margin-bottom: .5rem;
}
.pp-filter-count {
  margin-left: .35rem;
  background: var(--pp-green);
  color: #fff;
  font-size: .75rem;
}
/* baris tahun: jangan melewati tepi layar */
#pp-filter .row { margin-left: 0 !important; margin-right: 0 !important; column-gap: .6rem; }
#pp-filter .row > [class*="col"] { padding-left: 0 !important; padding-right: 0 !important; }
#pp-filter .form-control, #pp-filter input[type=text] { max-width: 100%; box-sizing: border-box; }

@media (max-width: 767.98px) {
  .pp-filter-panel {
    margin: .25rem 0 1.25rem;
    padding: 1rem 1.1rem;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 20px rgba(15,107,63,.08);
  }
  .pp-filter-panel input[type=checkbox] { width: 1.15rem; height: 1.15rem; margin-right: .5rem; }
  .pp-filter-panel label { padding: .2rem 0; }
}

/* ---------- Hasil pencarian: bilah info dan kartu hasil ---------- */
.pp-item .pp-badge { display: inline-block !important; }

@media (max-width: 767.98px) {
  /* bilah: info di atas, lalu urutan dan tombol tampilan sejajar selebar layar */
  .pp-result-bar { flex-direction: column; align-items: stretch !important; gap: .6rem; }
  .pp-result-tools { display: flex !important; align-items: center; width: 100%; padding-left: 0 !important; gap: .5rem; }
  .pp-result-tools label { margin: 0 !important; white-space: nowrap; }
  .pp-result-tools select { flex: 1 1 auto; min-width: 0; }
  .pp-result-tools form { margin: 0 !important; }
  .pp-result-tools .btn { min-height: 38px; min-width: 42px; }

  /* kartu: sampul kecil di kiri, teks di kanan */
  .pp-item .card-body { padding: .9rem; }
  .pp-item .row > .col-4 { flex: 0 0 28%; max-width: 28%; }
  .pp-item .row > .col-8 { flex: 0 0 72%; max-width: 72%; padding-left: .4rem; }
  .pp-item .row > .col-4 img { width: 100%; height: auto; }
  .pp-item h5 { font-size: 1.05rem; line-height: 1.45; margin: .35rem 0 .1rem; }
  .pp-item .authors { padding-top: .25rem !important; padding-bottom: .25rem !important; }
  .pp-item .authors .btn { font-size: .75rem; padding: .15rem .6rem; }

  /* Komentar / Penanda / Bagikan: hanya ikon, satu baris */
  .pp-item .col-8 > div.d-flex.flex-row { font-size: 0; margin: .15rem 0 !important; }
  .pp-item .col-8 > div.d-flex.flex-row a { font-size: 0; padding: .45rem .6rem !important; }
  .pp-item .col-8 > div.d-flex.flex-row a svg { width: 20px; height: 20px; }

  /* tombol utama dan Sitasi sebaris, keterangan di bawahnya */
  .pp-item-side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .85rem;
  }
  .pp-item-side .btn { width: auto !important; margin: 0 !important; }
  .pp-item-side .btn-primary { flex: 1 1 0; min-height: 46px; font-size: 1rem; }
  .pp-item-side .btn-outline-secondary { flex: 0 0 auto; min-height: 46px; display: inline-flex; align-items: center; }
  .pp-item-meta { order: 3; flex: 1 0 100%; margin: 0; text-align: left; }
}

/* ---------- Profil Pustakawan ----------
   Markup dari inti SLiMS (librarian.inc.php):
   .row-fluid.librarian > .span2 (foto) + .span8 (baris .row-fluid: .key + isi) */

/* semua ukuran layar: isi boleh menyusut dan teks panjang turun baris */
.librarian > .span8 { min-width: 0; }
.librarian > .span8 > .row-fluid > div:not(.key) {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* baris tanpa isi (Surel / Media Sosial yang belum diisi) disembunyikan */
.librarian > .span8 > .row-fluid:has(> .span7:empty),
.librarian > .span8 > .row-fluid:has(> .span9:empty),
.librarian > .span8 > .row-fluid:has(> .span9 > ul:empty) {
  display: none;
}

@media (max-width: 767.98px) {
  /* kartu: foto di atas, biodata di bawah */
  .librarian {
    flex: 0 0 100%;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    margin-bottom: 1.75rem;
    padding: 1rem;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 20px rgba(15,107,63,.08);
    box-sizing: border-box;
  }
  .librarian > .span2 { width: 100%; }
  .librarian > .span2 > div:first-child {
    padding: 1.25rem;
    text-align: center;
  }
  .librarian > .span2 img {
    display: block;
    width: 100%;
    max-width: 160px;
    height: auto;
    margin: 0 auto;
  }

  /* biodata: label di atas, isi di bawahnya */
  .librarian > .span8 { padding: .9rem 0 0; width: 100%; }
  .librarian > .span8 > .row-fluid {
    flex-direction: column;
    padding: .6rem 0;
    border-bottom: 1px solid var(--pp-line);
  }
  .librarian > .span8 > .row-fluid:last-child { border-bottom: 0; }
  .librarian > .span8 > .row-fluid > .key {
    flex: 0 0 auto;            /* timpa flex: 0 0 100px dari style.css */
    margin-bottom: .15rem;
    font-size: .85rem;
    color: var(--pp-muted);
  }
  .librarian > .span8 > .row-fluid > div:not(.key) {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* ---------- Area Anggota (sudah login) ----------
   Markup dari inti SLiMS (member.inc.php):
   .member-area > div > .d-flex
     #member_sidebar  (foto + tombol, lebar 16rem lewat style inline)
     #member_content  (Hi, nama; ul.nav-tabs; kotak putih berisi tabel) */

/* semua ukuran layar */
#member_content { min-width: 0; }                       /* biarkan kolom isi menyusut, bukan melebarkan halaman */
#member_content > .row:empty { display: none; }         /* .row kosong bermargin negatif ikut menggeser halaman */
#member_content .bg-white { overflow-x: auto; }         /* tabel lebar bergeser di dalam kotak, bukan di halaman */
#member_content .table { margin-bottom: 0; }
.member-area { overflow-x: clip; }
.memberInfoHead { border-left-color: var(--pp-green); }

@media (max-width: 767.98px) {
  /* kolom kiri jadi baris atas: foto kecil di kiri, dua tombol bertumpuk di kanan */
  .member-area > div > .d-flex { flex-direction: column; }
  #member_sidebar {
    width: 100% !important;                              /* timpa style="width:16rem" */
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: .55rem .9rem;
    align-items: center;
    padding: 1rem !important;
  }
  #member_sidebar > .p-4 {
    grid-row: 1 / span 2;
    padding: 0 !important;
  }
  #member_sidebar img { display: block; width: 100%; max-width: 76px; height: auto; }
  #member_sidebar .btn-block {
    margin: 0 !important;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* isi */
  #member_content { padding: 1.1rem 1rem !important; width: 100%; box-sizing: border-box; }
  #member_content h1 { font-size: 1.5rem; line-height: 1.3; overflow-wrap: anywhere; }
  #member_content h1 .btn { vertical-align: middle; margin-left: .25rem; }
  #member_content #info { width: 100% !important; }

  /* tab: satu baris, digeser ke samping */
  #member_content .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #member_content .nav-tabs::-webkit-scrollbar { display: none; }
  #member_content .nav-tabs .nav-item { flex: 0 0 auto; }
  #member_content .nav-tabs .nav-link {
    white-space: nowrap;
    padding: .75rem 1rem;
    min-height: 44px;
    border-radius: 10px 10px 0 0;
  }
  #member_content .nav-tabs .nav-link.active {
    color: var(--pp-green);
    font-weight: 700;
    border-bottom: 3px solid var(--pp-green);
  }

  /* kotak isi */
  #member_content .bg-white { padding: 1rem !important; }
  #member_content .memberInfoHead { font-size: 1.2rem; padding-left: .8rem; }

  /* Detail Anggota dan Ubah Kata Sandi: label di atas, isi di bawahnya */
  .memberDetail, .memberDetail tbody, .memberDetail tr,
  .memberDetail td, .memberDetail th {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }
  .memberDetail tr { padding: .55rem 0; border-bottom: 1px solid var(--pp-line); }
  .memberDetail td { padding: 0 !important; border: 0 !important; background: transparent !important; overflow-wrap: anywhere; }
  .memberDetail td.key { font-size: .85rem; color: var(--pp-muted); margin-bottom: .1rem; }
  .memberDetail .form-control { width: 100%; max-width: 100%; }

  /* Keranjang: tombol aksi penuh, mudah disentuh */
  .memberBasketAction .btn {
    display: block;
    width: 100%;
    margin: 0 0 .5rem;
    min-height: 44px;
    padding: .6rem 1rem;
    font-size: .95rem;
    white-space: normal;
  }
  .memberLoanListInfo .btn, .memberLoanHistInfo .btn { margin-top: .4rem; min-height: 40px; }
}

/* ---------- Format koleksi: Digital dan Fisik (HP) ---------- */
@media (max-width: 575.98px) {
  /* eksemplar: status turun ke baris sendiri di bawah nama */
  .pp-copy { grid-template-columns: 1.8rem minmax(0, 1fr); row-gap: .5rem; padding: .75rem .85rem; }
  .pp-copy > .pp-tag { grid-column: 2; justify-self: start; }
}
@media (max-width: 767.98px) {
  .pp-item .pp-tags { margin-bottom: .1rem; }
}

/* ---------- Statistik koleksi (HP) ---------- */
@media (max-width: 767.98px) {
  .pp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
  .pp-stat-all { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
  .pp-stat { padding: .9rem .9rem .9rem 3.6rem; }
  .pp-stat-ico { left: .8rem; top: .95rem; width: 2.1rem; height: 2.1rem; line-height: 2.1rem; font-size: 1rem; }
  .pp-stat-num { font-size: 1.5rem; }
}