/* Navbar styling: donkerblauw, egale kleur, duidelijk onderscheid met header */
#navbar {
  background: #1e293b;
  box-shadow: 0 2px 8px rgba(30,40,59,0.08);
  padding: 0.5em 1em;
}
#navbar .dropdown-menu {
  background: #1e293b;
}
@import url('layout.css');
/* Header styling */
.header {
  background: linear-gradient(90deg, #2563eb 0%, #1e40af 100%);
  color: #fff;
  padding: 1.5em 1em;
  margin-bottom: 0;
}
.header img {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

/* Navbar styling */
#navbar {
  background: #1e293b;
  color: #fff;
  padding: 0.5em 1em;
  margin-bottom: 0;
}
#navbar .dropdown-menu {
  background: #1e293b;
}
#navbar .dropdown-item {
  color: #fff !important;
  background: #1e293b;
  transition: background 0.2s, color 0.2s;
}
#navbar .dropdown-item:hover, #navbar .dropdown-item:focus {
  color: #ffe066 !important;
  background: #2563eb;
}
#navbar .nav li {
  padding: 0 0.75em;
}
#navbar a, #navbar .nav a {
  color: #fff !important;
  text-decoration: none;
  transition: color 0.2s;
}
#navbar a:hover, #navbar .nav a:hover {
  color: #ffe066 !important;
}

/* Content styling */
#content {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(30,41,59,0.06);
  padding: 1em;
  width: 100%;
  margin: 0 0 1em 0;
}

/* Sidebar styling */
#sidebar {
  background: #e0e7ef;
  border-radius: 8px;
  padding: 1em;
  margin-bottom: 1em;
}

/* Footer styling */
#footer {
  background: #1e293b;
  color: #fff;
  padding: 1em;
  text-align: center;
  border-radius: 8px 8px 0 0;
  margin-top: 2em;
}
ul.horizontal_list {
  display: flex;
  flex-direction: row;
  gap: 0.75em;
  list-style: none;
  padding-left: 0;
  margin: 0;
}

li.horizontal_listitem {
  display: inline;
}
#article_header .article_author, .article_author, .article_category, .article_keywords {
  font-size: 1rem;
  font-weight: 400;
  color: #444;
}
/* --- Modern, rustig kleurschema --- */
body {
  background: #f8f9fa;
  color: #222;
  font-family: 'Segoe UI', Arial, sans-serif;
}

#header, #footer {
  background: #1e293b;
  color: #fff;
}

#navbar {
  background: #2563eb;
  color: #fff;
}

#sidebar {
  background: #e0e7ef;
}

#content {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(30,41,59,0.06);
  padding: 0.5em 0;
  width: 100%;
  margin: 0;
}

#article_abstract {
    padding-left: 1.5em;
    padding-right: 0.5em;
}
.anchor_readmore {
    padding-left: 1.5em;
}

#article_listitem {
  background-color: #e0e7ef;
  margin-bottom: 5px;
  border-style: outset;
}

a, a.anchor_abstract {
  color: #2563eb;
  text-decoration: none;
}
a:hover, a.anchor_abstract:hover {
  color: #1e293b;
}

ul.sidebar_list{
    list-style-type: none;
}

#abstract_container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}

#abstract_editor {
  overflow-y: hidden;
}

.title_row{
    margin-bottom: 1em;
}

/* UI Sync visual feedback */
.field-updated {
    animation: fieldPulse 0.5s ease-in-out;
}

@keyframes fieldPulse {
    0%, 100% { 
        background-color: transparent; 
    }
    50% { 
        background-color: #d4edda; 
    }
}

.sync-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #28a745;
    color: white;
    padding: 12px 20px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    opacity: 0;
    transform: translateX(400px);
    transition: all 0.3s ease-in-out;
    z-index: 9999;
    font-size: 14px;
    font-weight: 500;
}

.sync-notification.show {
    opacity: 1;
    transform: translateX(0);
}

/* Copy-knop voor codeblokken */
.copy-btn {
  background: #e0e7ef;
  border: 1px solid #2563eb;
  color: #2563eb;
  border-radius: 4px;
  padding: 2px 10px;
  font-size: 0.95em;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: background 0.2s, color 0.2s;
}
/* Compacte, responsive category logo */
.category-logo-wrapper {
  width: 100%;
  max-width: 120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.category-logo-img {
  width: 100%;
  max-width: 120px;
  height: auto;
  display: block;
}
@media (max-width: 600px) {
  .category-logo-wrapper,
  .category-logo-img {
    max-width: 64px;
  }
}
#footer { background: lightgreen; }