/* Dark mode variables */
:root {
  /* Light mode variables */
  --bg-primary: #ffffff;
  --text-primary: #2c3e50;
  --nav-bg: #5F497A;
  --panel-bg: rgba(255, 255, 255, 0.1);
  --btn-primary: #5F497A;
  --btn-hover: #FF6E64;
  --footer-bg: #5F497A;
  --link-color: #2c3e50;
  --border-color: #ecf0f1;
  --card-bg: #ffffff;
  --heading-color: #2c3e50;
  --breadcrumb-bg: rgba(255, 255, 255, 0.1);
  --breadcrumb-text: #2c3e50;
  --sidebar-bg: #ffffff;
  --sidebar-text: #2c3e50;
  --container-bg: #ffffff;
}

[data-theme="dark"] {
  /* Dark mode variables */
  --bg-primary: #1a1a1a;
  --text-primary: #e0e0e0;
  --nav-bg: #2c3e50;
  --panel-bg: #2c3e50;
  --btn-primary: #5F497A;
  --btn-hover: #FF6E64;
  --footer-bg: #2c3e50;
  --link-color: #fff;
  --border-color: #444444;
  --card-bg: #2c3e50;
  --heading-color: #ffffff;
  --breadcrumb-bg: rgba(40, 40, 40, 0.8);
  --breadcrumb-text: #e0e0e0;
  --sidebar-bg: #2c3e50;
  --sidebar-text: #e0e0e0;
  --container-bg: #1a1a1a;
}

/* Dark mode styles */
[data-theme="dark"] body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}



[data-theme="dark"] .panel, 
[data-theme="dark"] .pkp_block {
  background-color: var(--panel-bg);
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .panel-default>.panel-heading, 
[data-theme="dark"] .pkp_block .title {
  background-color: var(--btn-primary);
  color: #fff;
  border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .btn-default, 
[data-theme="dark"] .btn-primary {
  background-color: var(--btn-primary);
  color: #fff;
  border: none;
}

[data-theme="dark"] .btn-default:hover, 
[data-theme="dark"] .btn-primary:hover {
  background-color: #FFD7AF;
  color: #000;
}

[data-theme="dark"] footer.footer {
  background-color: #1A1A1A !important;
  border-top: 1px solid var(--border-color);
}

[data-theme="dark"] .breadcrumb {
  background-color: var(--breadcrumb-bg);
  border-bottom: 2px solid var(--btn-primary);
}

[data-theme="dark"] .breadcrumb > li {
  color: var(--breadcrumb-text);
}

[data-theme="dark"] .breadcrumb > li a {
  color: var(--link-color);
}

[data-theme="dark"] .media-heading,
[data-theme="dark"] .article-title {
  color: var(--heading-color) !important;
}

[data-theme="dark"] .media a {
  color: var(--link-color);
}

[data-theme="dark"] .media a:hover {
  color: var(--btn-hover);
  text-decoration: none;
}

[data-theme="dark"] .nav > li > a {
  color: var(--text-primary);
}

[data-theme="dark"] .nav > li > a:hover,
[data-theme="dark"] .nav > li > a:focus {
  background-color: var(--panel-bg);
  color: var(--link-color);
}

[data-theme="dark"] .dropdown-menu {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .dropdown-menu > li > a {
  color: var(--text-primary);
}

[data-theme="dark"] .dropdown-menu > li > a:hover {
  background-color: var(--panel-bg);
  color: var(--link-color);
}

/* Dark mode navigation menu */
[data-theme="dark"] #nav-menu .navbar-nav {
  background-color: var(--panel-bg);
}

[data-theme="dark"] #nav-menu .navbar-nav > li > a {
  color: var(--text-primary);
}

/* Copyright bar in dark mode */
[data-theme="dark"] .copyright-bar {
  background-color: #1A1A1A;
  border-top: 1px solid #1A1A1A;
}

[data-theme="dark"] .copyright-bar small,
[data-theme="dark"] .copyright-bar a {
  color: #1A1A1A;
}

[data-theme="dark"] .copyright-bar a:hover {
    text-decoration: none;
	color: #1A1A1A;
}

/* Theme toggle button styling */
[data-theme="dark"] .theme-toggle {
  color: #ffd700;
}

[data-theme="dark"] .theme-toggle:hover {
  color: #ffffff;
}

/* Animation for icon rotation */
.theme-toggle i {
  transition: transform 0.5s ease;
}

.theme-toggle:hover i {
  transform: rotate(30deg);
}

/* Smooth transitions */
body, 
#headerNavigationContainer,
.panel,
.btn,
.footer,
.nav > li > a,
.dropdown-menu {
  transition: all 0.3s ease;
}

/* Main container styles in dark mode */
[data-theme="dark"] .pkp_structure_content.container {
  background-color: var(--container-bg) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .pkp_structure_main {
  background-color: var(--container-bg) !important;
  color: var(--text-primary) !important;
}

/* Content area styles */
[data-theme="dark"] .page_index_journal,
[data-theme="dark"] .page_announcement,
[data-theme="dark"] .page_about,
[data-theme="dark"] .page_contact,
[data-theme="dark"] .page_issue,
[data-theme="dark"] .page_article {
  background-color: var(--container-bg) !important;
  color: var(--text-primary) !important;
}

/* Article titles and headings in content area */
[data-theme="dark"] .pkp_structure_main h1,
[data-theme="dark"] .pkp_structure_main h2,
[data-theme="dark"] .pkp_structure_main h3,
[data-theme="dark"] .pkp_structure_main h4,
[data-theme="dark"] .pkp_structure_main h5,
[data-theme="dark"] .pkp_structure_main h6 {
  color: var(--heading-color) !important;
}

/* Links in content area */
[data-theme="dark"] .pkp_structure_main a {
  color: var(--link-color) !important;
}

[data-theme="dark"] .pkp_structure_main a:hover {
  color: var(--btn-hover) !important;
  text-decoration: none;
}

/* Tables in content area */
[data-theme="dark"] .pkp_structure_main table {
  background-color: var(--panel-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .pkp_structure_main th,
[data-theme="dark"] .pkp_structure_main td {
  border-color: var(--border-color) !important;
}

/* Form elements in content area */
[data-theme="dark"] .pkp_structure_main input,
[data-theme="dark"] .pkp_structure_main select,
[data-theme="dark"] .pkp_structure_main textarea {
  background-color: var(--panel-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* Ensure proper contrast for form placeholders */
[data-theme="dark"] .pkp_structure_main input::placeholder,
[data-theme="dark"] .pkp_structure_main textarea::placeholder {
  color: var(--text-primary) !important;
  opacity: 0.7;
}

/* Add specific styles for any custom content blocks */
[data-theme="dark"] .additional-content,
[data-theme="dark"] .custom-block {
  background-color: var(--container-bg) !important;
  color: var(--text-primary) !important;
}

/* Ensure proper transition for container */
.pkp_structure_content.container {
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Add styles for article summary blocks */
[data-theme="dark"] .obj_article_summary {
  background-color: var(--panel-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 4px;
}

/* Style blockquotes in dark mode */
[data-theme="dark"] blockquote {
  border-left-color: var(--btn-primary) !important;
  background-color: var(--panel-bg) !important;
  color: var(--text-primary) !important;
}

/* Add styles for article metadata */
[data-theme="dark"] .article-meta {
  background-color: var(--panel-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* Ensure proper styling for alerts and notices */
[data-theme="dark"] .alert {
  background-color: var(--panel-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .article-summary .media-heading small {
  color: #FFD7AF !important;
}

[data-theme="dark"] .page-header small {
  color: #FFD7AF !important;
}