/* Define theme using Bootstrap's custom properties */
:root {
  --bs-primary: #0066cc;
  --bs-body-bg: #f4f3ef;
  --bs-body-color: #212529;
  --bs-navbar-padding-y: 0;
}

.app-color-more-body {
  background-color: #f4f3ef;
}

.app-color-more-title {
  background-color: var(--bs-gray-400);
}

.app-color-header-footer {
  background-color: var(--bs-gray-500);
}

.app-color-title {
  color: #1a1a1a;
}

.app-color-item-bg {
  background-color: var(--bs-gray-100);
}

.app-navbar-icon {
  color: black;
}

.app-top-navbar-title {
  color: var(--bs-btn-color);
}

.app-list-header {
  color: var(--bs-body-color);
  background-color: var(--bs-gray-400);
  padding-top: 0px;
  padding-bottom: 0px;
}

.list-group-item-action {
  color: var(--bs-body-color);
  background-color: #f9f9f7;
}

.btn-close {
  color: var(--bs-body-color);
  background-color: var(--bs-gray-600);
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  :root {
    --bs-primary: #4da3ff;
    --bs-body-bg: #1a1a1a;
    --bs-body-color: #e9ecef;
    --bs-navbar-padding-y: 0;
  }

  .nav-link {
    color: var(--bs-body-color);
  }

  .nav-link:hover {
    color: #6c757d;
  }

  .btn-close {
    color: var(--bs-body-color);
    background-color: var(--bs-gray-100);
  }

  .list-group-item-action {
    color: var(--bs-body-color);
    background-color: #444444;
  }

  .app-color-more-body {
    background-color: var(--bs-gray-900);
  }

  .app-color-more-title {
    background-color: var(--bs-gray-600);
  }

  .app-list-header {
    color: var(--bs-body-color);
    background-color: var(--bs-gray-600);
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .app-color-item-bg {
    background-color: var(--bs-gray-900);
  }

}

.form-control::placeholder {
  color: #6c757d;
  /* Or another color suitable for dark mode */
  opacity: 1;
  /* Firefox default is not 1 */
}

.app-color-tick {
  color: var(--bs-primary);
}

.app-elem-shown {
  display: block;
}

.app-elem-shown-inline {
  display: inline;
}

.app-elem-hidden {
  display: none;
}

.app-elem-visible {
  visibility: visible;
}

.app-elem-invisible {
  visibility: hidden;
}

.app-fs-popup-body {
  font-size: 0.9rem !important;
}

.app-bottom-navbar-link {
  font-size: 0.9rem !important;
  padding: 0px !important;
}

.app-top-navbar {
  padding: 0px !important;
}

.app-top-navbar-link {
  font-size: 1rem !important;
  cursor: pointer;
}

.app-cursor-pointer {
  cursor: pointer;
}

.navbar-nav .nav-link:hover {
  color: var(--bs-primary);
}

.btn-link {
  color: var(--bs-gray-800);
  font-weight: bold;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    display: block !important;
    opacity: 1 !important;
    background-image: url('calendar3.svg') !important;
    background-color: var(--bs-gray-500);
    cursor: pointer;
}