/*	=============================
	Tampilan Informasi jurnal
	============================= */
	
/* ====== Journal Info Style ====== */
.sidebar-ojs .journal-info {
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.sidebar-ojs .journal-info h3 {
  margin-top: 0;
  font-size: 20px;
  color: #1E2622; /* biru tua */
  border-bottom: 2px solid #7E6A4A; /* aksen emas */
  padding-bottom: 10px;
  text-align: center;
  font-weight: 600;
}

.sidebar-ojs .info-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}

.sidebar-ojs .info-table td {
  padding: 10px;
  vertical-align: top;
  font-size: 14px;
}

.sidebar-ojs .info-table .label {
  font-weight: bold;
  color: #1E2622;
  width: 35%;
  background: #f4f4f4;
  border-right: 1px solid #ddd;
}

.sidebar-ojs .info-table .value {
  color: #333;
}

/* ====== Responsif ====== */
@media (max-width: 768px) {
  .sidebar-ojs .journal-info h3 {
    font-size: 18px;
  }
  .sidebar-ojs .info-table td {
    font-size: 13px;
    padding: 8px;
  }
}

@media (max-width: 480px) {
  .sidebar-ojs .info-table {
    display: block;
  }
  .sidebar-ojs .info-table tr {
    display: block;
    margin-bottom: 12px;
  }
  .sidebar-ojs .info-table .label {
    display: block;
    width: 100%;
    border: none;
    margin-bottom: 4px;
    background: none;
  }
  .sidebar-ojs .info-table .value {
    display: block;
    width: 100%;
  }
}

/*	=============================
	Tampilan Team Editorial
	============================= */
/* ====== Editorial Board Style ====== */
.sidebar-ojs .editorial-board {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.sidebar-ojs .editorial-board h3 {
  margin-top: 0;
  font-size: 20px;
  color: #1E2622;
  border-bottom: 2px solid #7E6A4A;
  padding-bottom: 10px;
  text-align: center;
  font-weight: 600;
}

.sidebar-ojs .editor-section {
  margin-top: 20px;
}

.sidebar-ojs .editor-section h4 {
  font-size: 16px;
  color: #0066cc;
  margin-bottom: 10px;
  border-left: 4px solid #7E6A4A;
  padding-left: 8px;
}

.sidebar-ojs .editor-card {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
}

.sidebar-ojs .editor-photo {
  width: 80px;
  height: 80px;
  border-radius: 6px;
  margin-right: 15px;
  object-fit: cover;
  border: 1px solid #ccc;
}

.sidebar-ojs .editor-details {
  flex: 1;
}

.sidebar-ojs .editor-details .name {
  font-weight: bold;
  font-size: 15px;
  margin: 0 0 4px;
  color: #1E2622;
}

.sidebar-ojs .editor-details p {
  margin: 2px 0;
  font-size: 14px;
  color: #333;
}

.sidebar-ojs .editor-details a {
  color: #0066cc;
  text-decoration: none;
}

.sidebar-ojs .editor-details a:hover {
  text-decoration: underline;
}

/* ====== Responsif ====== */
@media (max-width: 768px) {
  .sidebar-ojs .editor-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .sidebar-ojs .editor-photo {
    margin-bottom: 10px;
  }
}

/*	=============================
	Tampilan menu submission-link
	============================= */
/* Container menu */
.submission-menu {
  background: #f9f9f9; /* warna dasar sidebar */
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 20px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  text-align: center;
}

/* Judul menu */
.submission-menu h3 {
  margin-top: 0;
  font-size: 18px;
  color: #1E2622; /* biru tua sesuai tema */
  border-bottom: 2px solid #7E6A4A; /* aksen emas/coklat */
  padding-bottom: 8px;
}

/* Link tombol */
.submission-link {
  display: inline-block;
  margin-top: 12px;
  padding: 12px 20px;
  background: #1E2622; /* biru tua default */
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s ease;
  font-weight: bold;
}

/* Hover effect dengan biru OJS */
.submission-link:hover {
  background: #0066cc; /* biru modern sesuai OJS */
  color: #fff;
}

/* Active/Clicked effect */
.submission-link:active,
.submission-link:focus {
  background: #004080; /* biru lebih gelap saat diklik */
  transform: scale(0.97); /* efek klik */
}

/*	=============================
	Tampilan Aditional menu
	============================= */

/* Container menu */
.side-menu {
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 20px;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.side-menu h3 {
  margin-top: 0;
  font-size: 18px;
  color: #1E2622; /* biru tua sesuai tema */
  border-bottom: 2px solid #7E6A4A; /* aksen emas/coklat */
  padding-bottom: 8px;
  text-align: center;
}

/* List menu */
.side-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.side-menu ul li {
  margin: 6px 0;
}

/* Link menu */
.side-menu ul li a.menu-link {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
  border-radius: 4px;
  transition: all 0.3s ease;
  font-weight: 500;
}

/* Hover effect dengan biru OJS */
.side-menu ul li a.menu-link:hover {
  background: #0066cc; /* biru modern sesuai OJS */
  color: #fff;
  
  .side-menu ul li a.menu-link:hover .file-icon {
  filter: brightness(0) invert(1); /* ikon ikut berubah jadi putih */
}

/* Active/Clicked effect */
.side-menu ul li a.menu-link:active,
.side-menu ul li a.menu-link:focus {
  background: #004080; /* biru lebih gelap saat diklik */
  color: #fff;
  transform: scale(0.97);
}

/* Container */
.journal-info {
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 20px;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

/* Judul */
.journal-info h3 {
  margin-top: 0;
  font-size: 18px;
  color: #1E2622; /* biru tua sesuai tema OJS */
  border-bottom: 2px solid #7E6A4A; /* aksen emas/coklat */
  padding-bottom: 8px;
  text-align: center;
}

/* Tabel */
.info-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.info-table td {
  padding: 8px;
  vertical-align: top;
  font-size: 14px;
}

/* Kolom label */
.info-table .label {
  font-weight: bold;
  color: #1E2622; /* biru tua */
  width: 35%;
}

/* Kolom value */
.info-table .value {
  color: #333;
}

/* Responsif */
@media (max-width: 768px) {
  .info-table td {
    font-size: 13px;
    padding: 6px;
  }
}

@media (max-width: 480px) {
  .info-table {
    display: block;
  }
  .info-table tr {
    display: block;
    margin-bottom: 10px;
  }
  .info-table .label {
    display: block;
    font-weight: bold;
    margin-bottom: 4px;
  }
  .info-table .value {
    display: block;
  }
}