/* Custom branding colors for Telkom University Red Maroon */
:root, [data-md-color-scheme="slate"] {
  --md-primary-fg-color: #b6252a !important; /* Telkom University Maroon Red */
  --md-primary-fg-color--dark: #911c20 !important;
  --md-primary-fg-color--light: #d63c41 !important;
}

/* Direct Header Background Overrides for both Light and Dark mode */
.md-header {
  background-color: #b6252a !important;
}

/* Ensure header text and icons are white in both modes */
.md-header__title, 
.md-header__button,
.md-header__button .twemoji,
.md-header__button svg,
.md-header__topic,
.md-header__topic a {
  color: #ffffff !important;
}

/* Search bar styling inside the header */
.md-search__input {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}
.md-search__input::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}
.md-search__icon {
  color: #ffffff !important;
}

/* Style logo to stand out on the red header */
.md-logo img {
  background-color: #ffffff !important;
  padding: 4px !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

/* Shared lecturer portrait standard: square 230 px display box. */
.profile-hero {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 0.5rem 0 2rem;
}

.profile-photo-wrap {
  flex: 0 0 230px;
  height: 230px;
  width: 230px;
}

.profile-photo {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(20, 20, 30, 0.12);
  display: block;
  height: 230px;
  object-fit: cover;
  object-position: center 22%;
  width: 230px;
}

.profile-summary {
  flex: 1 1 380px;
}

@media (max-width: 520px) {
  .profile-photo-wrap {
    margin: 0 auto;
  }

  .profile-summary {
    flex-basis: 100%;
  }
}

/* Global DataTable and Tab buttons styling */
.page-btn {
  padding: 6px 12px !important;
  border-radius: 4px !important;
  border: 1px solid var(--md-default-fg-color--lightest, rgba(0, 0, 0, 0.08)) !important;
  background-color: var(--md-code-bg-color, #f5f5f5) !important;
  color: var(--md-default-fg-color, #212121) !important;
  cursor: pointer !important;
  transition: background-color 0.2s, border-color 0.2s !important;
  user-select: none !important;
  font-size: 13.5px !important;
}
.page-btn:hover:not(.disabled):not(.active) {
  background-color: var(--md-default-fg-color--lightest, rgba(0, 0, 0, 0.06)) !important;
}
.page-btn.active {
  background-color: var(--md-primary-fg-color, #b6252a) !important;
  color: var(--md-primary-bg-color, #ffffff) !important;
  border-color: var(--md-primary-fg-color, #b6252a) !important;
}
.page-btn.disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Center and thin footer copyright and social links */
.md-footer-meta {
  padding: 12px 0 !important; /* Make footer thin */
}
.md-footer-meta__inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important; /* Close gap */
}
.md-copyright {
  width: auto !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important; /* Collapses and hides 'Made with...' text */
}

/* Ensure the copyright notice itself remains visible */
.md-copyright__highlight {
  font-size: 13px !important;
}

/* Hide the generator link in the footer */
.md-copyright a {
  display: none !important;
}

.md-social {
  margin: 0 !important;
  padding: 0 !important;
}