/* ============================================================
   Tema tambahan JMG (GLOBAL)
   ============================================================ */

.subtle-link a {
  text-decoration: none;
}

.subtle-link a:hover {
  text-decoration: underline;
}

.card-title {
  color: #0D2243;
}

/* ============================================================
   JMG HEADER (RESPONSIVE & KONSISTEN – FIX MOBILE)
   ============================================================ */

.jmg-header {
  background: #0d2243;
  color: #ffffff;
}

/* Wrapper header */
.jmg-header-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ===============================
   LOGO JMG
   =============================== */
.jmg-logo {
  display: block;              /* 🔒 penting utk mobile */
  height: 75px;                /* desktop */
  max-height: 75px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

/* ===============================
   TAJUK HEADER (DESKTOP / TABLET)
   =============================== */
.jmg-header-title {
  margin-left: auto;
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
  text-align: right;
}

/* ============================================================
   MOBILE (HP)
   ============================================================ */
@media (max-width: 576px) {

  /* Header lebih kemas */
  .jmg-header-inner {
    gap: 10px;
  }

  /* 🔒 Logo dikecilkan & stabil */
  .jmg-logo {
    height: 36px;
    max-height: 36px;
  }

  /* 🔥 HIDE TAJUK DI HP */
  .jmg-header-title {
    display: none !important;
  }
}

/* ============================================================
   DOC ACTION ICONS (FAST DOWNLOAD & INFO)
   - Default: HIDE
   - Desktop: muncul bila hover
   - Mobile: muncul bila focus (tap)
   ============================================================ */

.doc-item {
  position: relative;
}

/* ✅ Default sembunyi */
.doc-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  z-index: 5;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

/* ✅ Muncul bila hover / focus */
.doc-item:hover .doc-actions,
.doc-item:focus-within .doc-actions {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Button ikon */
.doc-action-btn {
  background: rgba(13, 34, 67, 0.9);
  color: #fff;
  font-size: 0.75rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  line-height: 1;
}

.doc-action-btn:hover,
.doc-action-btn:focus {
  background: #0d6efd;
  color: #fff;
}

/* Optional: sedikit besar di skrin besar */
@media (min-width: 992px) {
  .doc-action-btn {
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
  }
}