/* Define theme using Bootstrap's custom properties */
:root {
  color-scheme: light dark;
  --bs-navbar-padding-y: 0;
}

[data-theme="light"]:root {
  color-scheme: light;
  --bs-primary: #0066cc;
  --bs-body-bg: var(--bs-gray-200);
  --bs-body-color: #212529;
}

[data-theme="dark"]:root {
  color-scheme: dark;
  --bs-primary: #4da3ff;
  --bs-body-bg: #1a1a1a;
  --bs-body-color: #e9ecef;
}

[data-theme="light"] .app-color-more-body {
  background-color: #f4f3ef;
}

[data-theme="dark"] .app-color-more-body {
  background-color: var(--bs-gray-900);
}

[data-theme="light"] .app-color-more-title {
  background-color: var(--bs-gray-400);
}

[data-theme="dark"] .app-color-more-title {
  background-color: var(--bs-gray-600);
}

.app-list-header {
  padding-top: 0px;
  padding-bottom: 0px;
}

[data-theme="light"] .app-list-header {
  color: var(--bs-body-color);
  background-color: var(--bs-gray-400) !important;
  border-color: var(--bs-gray-500) !important;
}

[data-theme="dark"] .app-list-header {
  color: var(--bs-body-color);
  background-color: var(--bs-gray-600) !important;
  border-color: var(--bs-gray-500) !important;
}

[data-theme="light"] .app-list-item {
  background-color: var(--bs-gray-100);
  border-color: var(--bs-gray-500) !important;
}

[data-theme="dark"] .app-list-item {
  background-color: var(--bs-gray-800);
  border-color: var(--bs-gray-500) !important;
}

[data-theme="light"] .app-modal-header-border {
  border-bottom-color: var(--bs-gray-700) !important;
}

[data-theme="dark"] .app-modal-header-border {
  border-bottom-color: var(--bs-gray-700) !important;
}

[data-theme="light"] .app-color-item-bg {
  background-color: var(--bs-gray-100);
}

[data-theme="dark"] .app-color-item-bg {
  background-color: var(--bs-gray-800);
}

[data-theme="light"] .app-color-form-bg {
  background-color: var(--bs-gray-300) !important;
}

[data-theme="dark"] .app-color-form-bg {
  background-color: var(--bs-gray-700) !important;
}

[data-theme="light"] .list-group-item {
  background-color: var(--bs-gray-100);
}

[data-theme="dark"] .list-group-item {
  background-color: var(--bs-gray-800);
}

[data-theme="light"] .list-group-item-action {
  color: var(--bs-body-color);
  background-color: var(--bs-gray-100);
  border-color: var(--bs-gray-500) !important;
}

[data-theme="dark"] .list-group-item-action {
  color: var(--bs-body-color);
  background-color: var(--bs-gray-800);
  border-color: var(--bs-gray-500) !important;
}

[data-theme="light"] .btn-close {
  color: var(--bs-body-color);
  background-color: var(--bs-gray-600);
}

[data-theme="dark"] .btn-close {
  color: var(--bs-body-color);
  background-color: var(--bs-gray-100);
}

[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="tel"],
[data-theme="light"] input[type="radio"],
[data-theme="light"] input[type="checkbox"] {
  background-color: var(--bs-gray-100);
}

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="radio"],
[data-theme="dark"] input[type="checkbox"] {
  background-color: var(--bs-gray-800);
}

[data-theme="dark"] .nav-link {
  color: var(--bs-body-color);
}

[data-theme="dark"] .nav-link:hover {
  color: #6c757d;
}

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

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

.app-color-icon-bg {
  background-color: var(--bs-gray-300) !important;
}

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

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

.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;
}

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

.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;
}