/* Custom styles to match the design in the screenshot */

/* Customize header */
.md-header {
  background-color: #1a1a1a;
}

/* Style the sidebar - DARK MODE */
[data-md-color-scheme="slate"] .md-sidebar {
  background-color: #1e222a;
}

[data-md-color-scheme="slate"] .md-sidebar__scrollwrap {
  background-color: #1e222a;
}

[data-md-color-scheme="slate"] .md-nav__title {
  color: #ffffff;
}

[data-md-color-scheme="slate"] .md-nav__item .md-nav__link--active {
  color: #ff6e42;
}

[data-md-color-scheme="slate"] .md-nav__link:hover {
  color: #ff6e42;
}

/* Style the sidebar - LIGHT MODE */
[data-md-color-scheme="default"] .md-sidebar {
  background-color: #f8f9fa;
  border-right: 1px solid #e0e0e0;
}

[data-md-color-scheme="default"] .md-sidebar__scrollwrap {
  background-color: #f8f9fa;
}

[data-md-color-scheme="default"] .md-nav__title {
  color: #333333;
  font-weight: 600;
}

[data-md-color-scheme="default"] .md-nav__link {
  color: #555555;
}

[data-md-color-scheme="default"] .md-nav__item .md-nav__link--active {
  color: #ff6e42;
  font-weight: 600;
}

[data-md-color-scheme="default"] .md-nav__link:hover {
  color: #ff6e42;
}

[data-md-color-scheme="default"] .md-nav__item--section .md-nav__link {
  color: #333333;
  font-weight: 600;
}

/* Custom notice boxes */
.important-notice {
  background-color: #0f3a4a;
  border-left: 4px solid #42a5f5;
  padding: 1em;
  margin: 1em 0;
  border-radius: 4px;
}

.warning-notice {
  background-color: #4a3b0f;
  border-left: 4px solid #ff9800;
  padding: 1em;
  margin: 1em 0;
  border-radius: 4px;
}

/* Custom section styling */
.section-title {
  border-bottom: 2px solid #ff6e42;
  padding-bottom: 0.5em;
  margin-bottom: 1em;
}

/* For the legal disclaimer box */
.legal-disclaimer {
  background-color: #1a2435;
  border: 1px solid #304259;
  padding: 1em;
  margin: 1em 0;
  border-radius: 4px;
  font-size: 0.9em;
}

/* Navigation icons using span classes */
.nav-plex::before,
.nav-jellyfin::before,
.nav-immich::before,
.nav-mealie::before,
.nav-audiobookshelf::before,
.nav-komga::before,
.nav-navidrome::before,
.nav-overseerr::before,
.nav-jellyseerr::before,
.nav-romm::before,
.nav-rocketchat::before,
.nav-streamdeck::before,
.nav-homarr::before,
.nav-authentik::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 8px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.nav-plex::before {
  background-image: url('../assets/images/logos/plex-logo.png');
}

.nav-jellyfin::before {
  background-image: url('../assets/images/logos/jellyfin-logo.png');
}

.nav-immich::before {
  background-image: url('../assets/images/logos/immich-logo.png');
}

.nav-mealie::before {
  background-image: url('../assets/images/logos/mealie-logo.png');
}

.nav-audiobookshelf::before {
  background-image: url('../assets/images/logos/audiobookshelf-logo.png');
}

.nav-komga::before {
  background-image: url('../assets/images/logos/komga-logo.png');
}

.nav-navidrome::before {
  background-image: url('../assets/images/logos/navidrome-logo.png');
}

.nav-overseerr::before {
  background-image: url('../assets/images/logos/overseerr-logo.png');
}

.nav-jellyseerr::before {
  background-image: url('../assets/images/logos/jellyseerr-logo.png');
}

.nav-romm::before {
  background-image: url('../assets/images/logos/romm-logo.png');
}

.nav-rocketchat::before {
  background-image: url('/assets/images/logos/rocketchat-logo.png');
}

/* Form group styling */
.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button[type="submit"] {
  background-color: var(--md-primary-fg-color);
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button[type="submit"]:hover {
  background-color: var(--md-primary-fg-color--dark);
}

#form-status {
  margin-top: 1rem;
  font-weight: bold;
}