/* ==========================================================================
   chrome.css — chrome untuk halaman dinamis (template cfg/templates/default.xml)

   Isi file ini HANYA chrome: header, user-navbar, sidebar (drawer mobile),
   footer, dan mobile bottom-nav. Style isi halaman (page-title, content-area,
   sidebar-nav, form, tabel) tetap di united-theme.css.

   Palet disamakan dengan opx-theme.css (homepage) supaya transisi antar
   halaman tidak bikin "lompat" warna.
   ========================================================================== */

:root {
  --ch-blue: #2563eb;
  --ch-blue-dark: #1d4ed8;
  --ch-navy: #0f2350;
  --ch-ink: #0f172a;
  --ch-muted: #64748b;
  --ch-line: #e2e8f0;
  --ch-bg: #f8fafc;
  --ch-card: #ffffff;
  --ch-radius: 12px;
  --ch-shadow: 0 10px 30px -14px rgba(15, 35, 80, 0.28);
  --ch-z-header: 50;
  --ch-z-overlay: 70;
  --ch-z-sidebar: 80;
  --ch-z-mnav: 60;
  --ch-mnav-h: 60px;
}

/* ---------- Header: top strip ---------- */
.header-top {
  background: var(--ch-navy);
  color: #dbe4f5;
  font-size: 0.8rem;
}
.header-top-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.top-contact,
.top-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.contact-link {
  color: #dbe4f5;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.contact-link:hover { color: #ffffff; }
.top-btn {
  color: #e8eefc;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 5px 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.top-btn:hover { background: rgba(255, 255, 255, 0.12); color: #ffffff; }

/* ---------- Header: brand + nav ---------- */
.modern-header {
  background: var(--ch-blue);
  color: #ffffff;
  box-shadow: var(--ch-shadow);
  position: relative;
  z-index: var(--ch-z-header);
}
.header-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.brand-section {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}
.brand-logo {
  height: 48px;
  width: auto;
  background: #ffffff;
  border-radius: 10px;
  padding: 3px 6px;
}
.brand-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
}
.brand-subtitle {
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: #dbeafe;
}
.desktop-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.nav-item {
  color: #eaf1ff;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav-item:hover { background: rgba(255, 255, 255, 0.16); color: #ffffff; }

/* Dropdown browse */
.nav-item-dropdown { position: relative; }
.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 230px;
  background: var(--ch-card);
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius);
  box-shadow: var(--ch-shadow);
  padding: 8px;
  display: none;
  z-index: var(--ch-z-header);
}
.nav-item-dropdown:hover .dropdown-menu,
.nav-item-dropdown:focus-within .dropdown-menu { display: block; }
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--ch-ink);
  text-decoration: none;
  font-size: 0.9rem;
}
.dropdown-item:hover { background: var(--ch-bg); color: var(--ch-blue-dark); }
.dropdown-item .fa-external-link-alt { margin-left: auto; font-size: 0.75em; }
.nav-external { font-size: 0.72em; opacity: 0.6; }

.btn-login {
  background: #f59e0b;
  color: #3b2600;
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
}
.btn-login:hover { background: #fbbf24; color: #3b2600; }

/* ---------- User navbar (toolbar login) ---------- */
/* Baris "Menu Pengguna" sudah dihapus dari default.xml (login ada di header,
   Register di sidebar). Rule di bawah dipakai hanya kalau ada halaman lama
   yang masih merender baris tersebut. */
.user-navbar {
  background: var(--ch-bg);
  border-bottom: 1px solid var(--ch-line);
  font-size: 0.85rem;
}
.user-navbar-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.user-navbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  color: var(--ch-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.user-navbar-menu {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* Semua link di baris ini satu ukuran & satu baseline */
.user-navbar .user-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 12px;
  border-radius: 9px;
  color: var(--ch-blue-dark);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
}
.user-navbar .user-nav-link:hover { background: #dbe8ff; color: var(--ch-blue-dark); }
/* Login = pill biru solid. Amber hanya dipakai di atas header biru (konteks gelap),
   di baris terang amber terlihat kotor. */
.user-navbar .btn-login {
  background: var(--ch-blue);
  color: #ffffff;
  height: 36px;
  padding: 0 16px;
  font-size: 0.86rem;
}
.user-navbar .btn-login:hover { background: var(--ch-blue-dark); color: #ffffff; }
.user-navbar.has-menu .user-navbar-content { background: #eef4ff; }

/* ---------- Sidebar (drawer, mobile) ---------- */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  z-index: var(--ch-z-overlay);
}
body.sidebar-open .sidebar-overlay { opacity: 1; visibility: visible; }

.main-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 290px;
  max-width: 86vw;
  background: var(--ch-card);
  box-shadow: 12px 0 30px -18px rgba(15, 23, 42, 0.5);
  transform: translateX(-102%);
  transition: transform 0.25s ease;
  z-index: var(--ch-z-sidebar);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
body.sidebar-open .main-sidebar { transform: translateX(0); }

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--ch-blue);
  color: #ffffff;
}
.sidebar-brand { display: flex; align-items: center; gap: 10px; }
.sidebar-logo {
  height: 34px;
  width: auto;
  background: #ffffff;
  border-radius: 8px;
  padding: 2px 5px;
}
.sidebar-brand-text { font-weight: 700; }
.sidebar-close {
  background: transparent;
  border: 0;
  color: #ffffff;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
}
.sidebar-close:hover { background: rgba(255, 255, 255, 0.15); }

.sidebar-search { padding: 14px 16px; border-bottom: 1px solid var(--ch-line); }
.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--ch-line);
  border-radius: 999px;
  padding: 4px 6px 4px 14px;
  background: var(--ch-bg);
  color: var(--ch-muted);
}
.search-box input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: 0;
  padding: 8px 0;
  font-size: 0.9rem;
}
.search-box button {
  border: 0;
  background: var(--ch-blue);
  color: #ffffff;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  cursor: pointer;
}
.search-box button:hover { background: var(--ch-blue-dark); }

.sidebar-nav { padding: 6px 10px 14px; }
.nav-section { padding: 10px 0; border-bottom: 1px solid var(--ch-line); }
.nav-section:last-child { border-bottom: 0; }
.nav-section-title {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ch-muted);
  padding: 4px 8px 8px;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 10px;
  border-radius: 9px;
  color: var(--ch-ink);
  text-decoration: none;
  font-size: 0.9rem;
}
.nav-link i:first-child { width: 18px; color: var(--ch-blue); text-align: center; }
.nav-link:hover { background: var(--ch-bg); color: var(--ch-blue-dark); }
.nav-link .nav-external { margin-left: auto; }
.sidebar-footer {
  margin-top: auto;
  padding: 14px 16px;
  border-top: 1px solid var(--ch-line);
  color: var(--ch-muted);
  font-size: 0.8rem;
}
.sidebar-footer p { margin: 0; }

/* ---------- Layout: footer nempel bawah ---------- */
/* Dulu footer "melayang" di tengah halaman kalau kontennya pendek, karena
   .main-wrapper cuma min-height. Sekarang body jadi flex column dan wrapper
   yang tumbuh, jadi footer selalu turun ke dasar viewport. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.main-wrapper {
  flex: 1 0 auto;
}

/* ---------- Footer ---------- */
/* .main-footer / .mobile-nav / .modern-header sudah tidak dipakai: footer dan
   mobile-nav sekarang memakai .opx-footer / .opx-mnav dari opx-theme.css
   (sama dengan homepage). Rule di bawah dibiarkan dulu untuk halaman yang
   masih render memakai template lama. */
.main-wrapper {
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* opx-theme.css dimuat AFTER chrome.css (lihat <head> default.xml), jadi
   `.opx-footer { margin-top: 56px }` di sana menang kalau specificity sama.
   Pakai `>` supaya lebih spesifik dan auto() benar-benar berlaku. */
.main-wrapper > .opx-footer { margin-top: auto; }
.main-footer {
  background: var(--ch-navy);
  color: #c9d6f0;
  margin-top: auto;
}
.footer-content { max-width: 1280px; margin: 0 auto; padding: 34px 20px 0; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.footer-col h4 {
  color: #ffffff;
  margin: 0 0 10px;
  font-size: 1rem;
}
.footer-col p,
.footer-col a {
  color: #c9d6f0;
  text-decoration: none;
  font-size: 0.88rem;
  line-height: 1.9;
}
.footer-col a:hover { color: #ffffff; text-decoration: underline; }
.footer-bottom {
  margin-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 16px 0 22px;
  text-align: center;
  font-size: 0.8rem;
}
.footer-bottom a { color: #ffffff; }

/* ---------- Mobile bottom nav ---------- */
.mobile-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--ch-card);
  border-top: 1px solid var(--ch-line);
  box-shadow: 0 -6px 18px -12px rgba(15, 23, 42, 0.4);
  z-index: var(--ch-z-mnav);
}
.mobile-nav-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: var(--ch-mnav-h);
  font-size: 0.68rem;
  color: var(--ch-muted);
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.mobile-nav-item i { font-size: 1.05rem; }
.mobile-nav-item:hover,
.mobile-nav-item.active { color: var(--ch-blue); }

/* ---------- Halaman statistik (cgi/stats/report) ---------- */
.stat-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 200px));
  gap: 14px;
  margin-bottom: 22px;
}
.stat-kpi {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #ffffff;
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius);
  padding: 16px 18px;
  box-shadow: 0 4px 14px -6px rgba(30, 58, 138, 0.18);
}
.stat-kpi-ic {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}
.stat-kpi-ic.blue   { background: #eaf1ff; color: #2563eb; }
.stat-kpi-ic.purple { background: #f1ecff; color: #7c3aed; }
.stat-kpi-ic.green  { background: #e7f8ee; color: #16a34a; }
.stat-kpi-ic.orange { background: #fff3e0; color: #ea580c; }
.stat-kpi-num {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ch-ink);
}
.stat-kpi-label {
  margin: 2px 0 0;
  font-size: 0.78rem;
  color: var(--ch-muted);
}

.stat-block {
  background: #ffffff;
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius);
  padding: 20px 22px;
  margin-bottom: 18px;
}
.stat-block-title {
  margin: 0 0 16px;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--ch-ink);
}
.stat-bars { display: grid; gap: 9px; }
.stat-bar-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 62px;
  align-items: center;
  gap: 12px;
}
.stat-bar-year {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ch-muted);
}
.stat-bar-track {
  height: 10px;
  border-radius: 999px;
  background: var(--ch-bg);
  overflow: hidden;
}
.stat-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ch-blue), #4f46e5);
}
.stat-bar-val {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ch-ink);
  text-align: right;
}

.stat-latest { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.stat-latest li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 12px;
  border-radius: 9px;
}
.stat-latest li:nth-child(odd) { background: var(--ch-bg); }
.stat-latest a {
  color: var(--ch-ink);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
}
.stat-latest a:link, .stat-latest a:visited, .stat-latest a:active { color: var(--ch-ink); }
.stat-latest a:hover { color: var(--ch-blue-dark); }
.stat-latest-year {
  flex: 0 0 auto;
  font-size: 0.8rem;
  color: var(--ch-muted);
}

/* ---------- Empty state (halaman tanpa data) ---------- */
/* Browse view (update_view_list) tidak punya hook markup, jadi kalau daftar
   kosong kita sisipkan pesan lewat CSS.
   Dua syarat, dua-duanya wajib:
     :has(> .ep_view_menu)         -> ini browse view. Halaman lain (mis.
        /cgi/search/simple) tidak punya .ep_view_menu sama sekali, tanpa
        syarat ini pesannya muncul di halaman yang sebenarnya ada isinya.
     :not(:has(> .ep_view_menu > *)) -> .ep_view_menu-nya kosong. View seperti
        /view/creators/ teksnya ADA di dalam .ep_view_menu (EPrints sudah tulis
        "No items in this section." sendiri), jadi tanpa syarat ini pesan kita
       dobel dengan pesan bawaan EPrints.
   Whitespace aman: :has() hanya melihat elemen, bukan text node. */
.main-content:has(> .ep_view_menu):not(:has(> .ep_view_menu > *))::before {
  content: "Belum ada data di sini";
  display: block;
  margin-bottom: 8px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ch-ink);
  text-align: center;
}
.main-content:has(> .ep_view_menu):not(:has(> .ep_view_menu > *))::after {
  content: "Kategori ini belum berisi dokumen. Coba pilih tahun atau fakultas lain, atau pakai kotak pencarian di atas.";
  display: block;
  background: #ffffff;
  border: 1px dashed var(--ch-line);
  border-radius: 16px;
  padding: 36px 24px;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--ch-muted);
}
.ep-empty {
  background: #ffffff;
  border: 1px solid var(--ch-line);
  border-radius: 16px;
  padding: 44px 28px;
  text-align: center;
}
.ep-empty-icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 16px;
  border-radius: 999px;
  background: #eaf1ff;
  color: var(--ch-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}
.ep-empty h2 {
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ch-ink);
}
.ep-empty p {
  margin: 0 auto 20px;
  max-width: 46ch;
  font-size: 0.9rem;
  color: var(--ch-muted);
}
.ep-empty-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.ep-empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--ch-blue);
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
}
.ep-empty-btn:link, .ep-empty-btn:visited, .ep-empty-btn:active { color: #ffffff; }
.ep-empty-btn:hover { background: var(--ch-blue-dark); }
.ep-empty-btn.is-ghost {
  background: transparent;
  border: 1px solid var(--ch-line);
  color: var(--ch-ink);
}
.ep-empty-btn.is-ghost:link, .ep-empty-btn.is-ghost:visited { color: var(--ch-ink); }
.ep-empty-btn.is-ghost:hover { background: var(--ch-bg); }

/* ---------- State link eksplisit ----------
   Sama seperti di opx-theme.css: tanpa :link/:visited/:active, browser bisa
   paint pakai warna link bawaan (biru/merah) walau computed style benar. */
.nav-item:link,
.nav-item:visited,
.nav-item:active { color: #eaf1ff; }
.top-btn:link,
.top-btn:visited,
.top-btn:active { color: #e8eefc; }
.contact-link:link,
.contact-link:visited,
.contact-link:active { color: #dbe4f5; }
.brand-section:link,
.brand-section:visited,
.brand-section:active { color: #ffffff; }
.user-navbar .user-nav-link:link,
.user-navbar .user-nav-link:visited,
.user-navbar .user-nav-link:active { color: var(--ch-blue-dark); }
.user-navbar .btn-login:link,
.user-navbar .btn-login:visited,
.user-navbar .btn-login:active { color: #ffffff; }
.nav-link:link,
.nav-link:visited,
.nav-link:active { color: var(--ch-ink); }
.mobile-nav-item:link,
.mobile-nav-item:visited,
.mobile-nav-item:active { color: var(--ch-muted); }
.footer-col a:link,
.footer-col a:visited,
.footer-col a:active { color: #c9d6f0; }
.help-btn:link,
.help-btn:visited,
.help-btn:active { color: var(--ch-ink); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .desktop-nav { width: 100%; order: 3; }
  .header-top-content { justify-content: center; }
}

@media (max-width: 768px) {
  .mobile-nav { display: block; }
  body { padding-bottom: var(--ch-mnav-h); }
  .desktop-nav,
  .top-actions { display: none; }
  .brand-title { font-size: 1.05rem; }
  .brand-logo { height: 40px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* ---------- Halaman staff: /cgi/user/view_mine ("My Document") ----------
   Halaman ini dirender EPrints core (Plugin/Screen/Items), bukan template
   kita, jadi markup-nya bawaan dan tanpa class yang bisa di-style:

     New Item : div.ep_block > ul.ep_action_list > li > form > input
     Import   : form > table > tbody > tr > td > select   (+ tombol Import)

   Sebelum ada CSS di sini: tombol New Item mengambang di tengah,
   select Import melebar full-width, dan tidak ada konteks apa pun -- staff
   baru login tidak tahu harus ngapain. Dua blok itu dijadikan card yang
   berdampingan; markup core tidak diubah, hanya diberi jarak + latar.

   Selector sengaja pakai struktur yang benar-benar ada di DOM
   (diverifikasi lewat probe DOM, bukan asumsi): .ep_block > .ep_action_list
   dan .main-content > form > table. */
.main-content > .ep_block:has(> .ep_action_list) {
  background: #ffffff;
  border: 1px solid var(--ch-line);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 12px 28px -22px rgba(15, 35, 80, 0.45);
  margin-bottom: 16px;
}
.main-content > .ep_block:has(> .ep_action_list) > .ep_action_list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.main-content > .ep_block:has(> .ep_action_list) > .ep_action_list > li {
  margin: 0;
}

/* Tombol New Item / Import: styling sudah ada di unida-theme.css:407
   (gradient biru + radius + shadow, semua !important). Jadi TIDAK di-style
   ulang di sini -- aturan lokal tanpa !important tidak akan menang dan cuma
   jadi dead CSS. Yang diperlukan cuma card wrapper + jarak (di atas). */

/* Card Import: form > table bawaan core (width=100% dengan <td align=center>).
   Ubah jadi grid-ish supaya label, select, dan tombol punya jarak jelas dan
   tidak melebar_sendiri ke seluruh lebar halaman. */
.main-content > form > table[width="100%"] {
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--ch-line);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 12px 28px -22px rgba(15, 35, 80, 0.45);
  margin-bottom: 18px;
}
.main-content > form > table[width="100%"] > tbody > tr > td {
  text-align: left !important;
  vertical-align: top;
  padding: 0 !important;
}
.main-content > form > table[width="100%"] label,
.main-content > form > table[width="100%"] td > span:first-child {
  display: block;
  margin-bottom: 8px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ch-muted);
}
.main-content > form > table[width="100%"] select {
  display: block;
  width: 100%;
  max-width: 420px;
  padding: 10px 12px;
  margin-bottom: 14px;
  border: 1px solid var(--ch-line);
  border-radius: 10px;
  background: #ffffff;
  color: var(--ch-ink);
  font-family: inherit;
  font-size: 0.88rem;
}
.main-content > form > table[width="100%"] select:focus {
  outline: 2px solid var(--ch-blue);
  outline-offset: 1px;
}
/* Tombol Import juga sudah di-style united-theme.css (memakai !important),
   jadi tidak ditulis ulang di sini. */

/* Box "Apa itu My Document?" dari phrase help_no_items. EPrints::Box::render
   membungkus dengan style inline, jadi bagian dalam yang kita rapikan saja. */
.main-content .ep_box,
.main-content .ep_toolbox {
  margin-bottom: 18px;
}
.main-content .ep_box summary,
.main-content .ep_box h2 {
  font-size: 0.92rem;
}
.main-content .ep-box-title,
.main-content .ep_box .ep_box_title {
  font-weight: 800;
}

@media (max-width: 640px) {
  .main-content > form > table[width="100%"] select { max-width: none; }
}

/* ---------- Menu user di nav header ----------
   .opx-nav-link dan .opx-user-menu TIDAK punya aturan di opx-theme.css --
   markup itu ditambahkan lewat JS di default.xml (enhanceUserMenus), dan
   stylesheet OPX hanya dirancang untuk link yang ada di markup statis.
   Akibatnya 5 menu user dirender tanpa style: menumpuk dalam pill navigasi
   sehingga nav jadi 2 baris dan tidak jelas mana navigasi vs menu user.
   Aturan .opx-nav a di opx-theme ikut mengenai link ini, jadi sekilas terlihat
   "cukup", tapi tanpa jarak atau pemisah dari navigasi utama.

   Sekarang: identitas + Logout sebagai pill, sisanya dropdown "Profile"
   (lihat JS). */
.opx-user-menu {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}
.opx-user-menu .opx-nav-link {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-size: 0.83rem;
  font-weight: 600;
  padding: 8px 13px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.15s;
}
.opx-user-menu .opx-nav-link:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}
/* Tombol Login (belum login): biru solid agar jelas aksi, bukan nav biasa. */
.opx-user-menu .opx-nav-link.opx-login {
  background: #ffffff;
  color: #1d4ed8;
}
.opx-user-menu .opx-nav-link.opx-login:hover { background: #e8effd; }

.opx-drop-account {
  position: relative;
  flex: none;
}
.opx-drop-account > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 8px 13px;
  border-radius: 999px;
}
.opx-drop-account .opx-drop-menu { min-width: 210px; }

/* Judul brand tidak boleh wrap di lebar mana pun (nowrap), tapi brand juga
   tidak boleh menyusut lebih kecil dari teksnya: begitu brand menyusut,
   teksnya meluber keluar slot dan menimpa nav pill (terverifikasi: judul
   tumpang tindih dengan "Beranda"). Jadi brand dapat lebar minimum sesuai
   isinya dan tidak bisa dipampatkan. Nav yang akan menyesuaikan diri --
   justify-content:flex-end membuatnya menjauh dari brand kalau ruang mepet. */
.opx-brand { min-width: max-content; flex: 0 0 auto; }
.opx-brand-title { white-space: nowrap; }
.opx-nav { min-width: 0; }
.opx-nav > a,
.opx-nav > .opx-drop { min-width: 0; }

/* Menu user terlalu panjang untuk 1 baris di layar sedang. .opx-nav tidak
   punya flex-wrap, jadi begitu tidak muat nav meluber jadi 2 baris dan pill
   jadi melebar. Peras padding lebih dulu; di bawah 860px nav desktop dan
   menu user disembunyikan sepenuhnya karena .opx-mnav (bottom bar) sudah
   menyediakan navigasi di titik itu. */
/* Diukur: nav desktop + brand butuh ~1000px. Di bawah itu meluber keluar
   viewport (horizontal overflow terverifikasi di 960px). */
@media (max-width: 1180px) {
  .opx-nav { gap: 2px; }
  .opx-nav a,
  .opx-user-menu .opx-nav-link,
  .opx-drop-account > a { padding: 8px 9px; font-size: 0.78rem; }
  .opx-user-menu { padding-left: 6px; }
}
/* Diukur: nav desktop + brand butuh ~1000px. Di bawah itu meluber keluar
   viewport, jadi bawah ~1000px dipakai .opx-mnav.

   TAPI .opx-mnav hanya punya 5 item dan tidak memuat menu user staff. Jadi
   di bawah 1000px kita perlukan agar menu user tetap terjangkau: .opx-mnav
   dapat satu item tambahan "Akun" yang menautkan ke /cgi/users/home, dan
   sidebar (drawer) yang dibuka lewat tombol hamburger tetap memuat menu user
   lengkap karena enhanceUserMenus tetap berjalan di semua lebar. */
@media (max-width: 1100px) {
  /* Brand boleh menyusut (flex:none justru bikin nav meluber di 1024-1080).
     Yang perlu: judul TIDAK boleh wrap. Markup pakai <br> setelah span
     judul, jadi saat brand menyusut, teks judul wrap sendiri di dalam
     span sempit dan pecah jadi beberapa baris. white-space:nowrap +
     min-width:0 mencegah itu, dan biarkan brand menyusut supaya nav
     selalu dapat ruang. Subtitle disembunyikan karena vertical space
     di header tidak cukup (informasi sama ada di footer). */
  .opx-brand { min-width: 0; flex: 0 1 auto; }
  .opx-brand-title { white-space: nowrap; font-size: 0.95rem; }
  .opx-brand-sub { display: none; }
  .opx-header-inner { gap: 10px; }
  .opx-brand-logo { height: 38px; }
  .opx-nav a { padding: 7px 6px; font-size: 0.73rem; gap: 4px; }
  .opx-nav a i { font-size: 0.76rem; }
  .opx-user-menu .opx-nav-link,
  .opx-drop-account > a { padding: 7px 6px; font-size: 0.73rem; }
  .opx-user-menu .opx-nav-link i,
  .opx-drop-account > a i { font-size: 0.76rem; }
}
/* Rentang 641-900px TIDAK punya navigasi sama sekali di opx-theme.css:
   .opx-nav disembunyikan di <=900, tapi .opx-mnav baru dimunculkan di <=640.
   Jadi tablet kehilangan nav. Perbaiki di sini: mnav muncul mulai 1000px
   (desktop nav mulai tidak muat), bukan hanya di 640.

   PENTING: aturan dasar .opx-mnav { display: none } di opx-theme.css:208
   berada DI LUAR media query, dan opx-theme dimuat setelah chrome.css --
   jadi specificity sama (0,1,0) dan opx-theme menang, apa pun isi media query
   kita. Harus naikkan specificity: .main-content tidak bisa (mnav sibling
   header), jadi pakai selector ganda yang tidak mungkin ada di opx-theme. */
@media (max-width: 1000px) {
  /* Sama seperti .opx-mnav, aturan .opx-nav{display:none} di opx-theme.css
     berada di luar media query dan specificity-nya sama, jadi load order
     menentukan. Prefix 'body' menaikkan specificity (0,1,1 vs 0,1,0). */
  body .opx-nav,
  body .opx-user-menu { display: none; }
  body .opx-mnav { display: block; }
  body .opx-mnav .opx-mnav-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  body .opx-mnav a { font-size: 0.64rem; }
  body .opx-mnav a i { font-size: 1.05rem; }
  body { padding-bottom: 64px; }
}