/* app/assets/stylesheets/application.css */

/* Define your custom color scheme */
:root {
  --bs-primary: #91826c;  /* Light Beige (Navigation Background) */
  --bs-secondary: #c9d8a5;  /* Soft Green */
  --bs-success: #76c893;  /* Health-related Green */
  --bs-info: #8ab6d6;  /* Light Blue */
  --bs-warning: #e8a96a;  /* Soft Orange */
  --bs-danger: #f28b82;  /* Soft Red */
  --bs-light: #fefcfb;  /* Very Light Beige */
  --bs-dark: #4b4f52;  /* Dark Gray */
}

/* Dark Theme Variables */
.theme_dark {
  --bs-primary: #8ab6d6;  /* Light Blue */
  --bs-secondary: #e8a96a;  /* Soft Orange */
  --bs-success: #76c893;  /* Health Green */
  --bs-info: #5e97c4;  /* Medium Blue */
  --bs-warning: #c9d8a5;  /* Soft Green */
  --bs-danger: #f28b82;  /* Soft Red */
  --bs-light: #666b71;  /* Muted Gray */
  --bs-dark: #2b2d30;  /* Very Dark Gray */
  --bs-heading-color: #f4f4f4;
  --bs-list-group-bg: #33363c;
  --bs-list-group-color: #f4f4f4;
  --bs-body-bg: #33363c;
  --bs-body-color: #f4f4f4;
  --bs-card-title-color: #f4f4f4;
}

.theme_dark .card-title {
  color: #f4f4f4 !important;
}

/* Override Navbar */
.navbar-light {
  background-color: var(--bs-primary) !important;
}
.theme_dark .navbar-light {
  background-color: var(--bs-dark) !important;
}
.navbar-light .navbar-nav .nav-link {
  color: var(--bs-light) !important;
  border-radius: 5px;
}
.theme_dark .navbar-light .navbar-nav .nav-link {
  color: var(--bs-light) !important;
  border-radius: 5px;
}
.navbar-brand {
  color: var(--bs-light) !important;
}
.theme_dark .navbar-brand {
  color: var(--bs-primary) !important;
}
.theme_dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Override Buttons */
.btn-primary {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}
.theme_dark .btn-primary {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}
.btn-secondary {
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
  color: #fff !important;
}
.theme_dark .btn-secondary {
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
  color: #2b2d30 !important;
}

/* Override Background */
html {
  background-color: #f8f9fa !important;
  font-size: 20px;
  height: 100%;
}
body {
  background-color: rgba(var(--bs-light-rgb),var(--bs-bg-opacity)) !important;
  color: var(--bs-dark) !important;
  height: 100%;
}
body.theme_dark {
  background-color: var(--bs-dark) !important;
  color: var(--bs-light) !important;
}

/* Override Links */
a {
  color: var(--bs-primary) !important;
}
.theme_dark a {
  color: var(--bs-primary) !important;
}
.theme_dark a.btn {
  color: var(--bs-white) !important;
}
a:hover {
  color: var(--bs-success) !important;
}
.theme_dark a:hover {
  color: var(--bs-success) !important;
}

.nav-link:hover, .navbar-brand:hover {
  background-color: #9d8d64;
}

.theme_dark .nav-link:hover,
.theme_dark .navbar-brand:hover {
  background-color: #5e97c4; /* Slightly lighter blue for hover effect */
}

/* Background colors for correctness */
.bg-correct {
  background-color: #76c893 !important;
}

.theme_dark .bg-correct {
  background-color: var(--bs-success) !important;
}

.bg-incorrect {
  background-color: #f28b82 !important;
}

.theme_dark .bg-incorrect {
  background-color: var(--bs-danger) !important;
}

.theme_dark .card {
  background-color: var(--bs-dark); /* Very Dark Gray */
  border: 1px solid #454a50; /* Dark Grayish */
  color: var(--bs-light); /* Light Grayish */
}

.theme_dark .text-muted {
  color: #b7bbc0 !important; /* Lighter gray for better contrast on dark backgrounds */
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

.person-bg {
  background-color: #edd2ab !important;
  background-color: #91826c !important;
}
.person-bg .navbar-brand {
  font-family: Nunito, sans-serif;
  font-size: 45px;
  line-height: 5px;
  text-transform: uppercase;
}
.person-bg .navbar-brand img {
  height: 80px;
  margin-bottom: -17px;
  vertical-align: sub;;
}
/* Base icon button styles */
.i-btn {
  width: 114px;
  height: 113px;
  background-color: unset;
  background-size: 684px 230px;
  border: none;
  margin: 5px;
  cursor: pointer;
}

/* Pain and distress icon-specific background images */
.pain-i-btn { background-image: url(/pain-icons.png); }
.distress-i-btn { background-image: url(/distress-icons.png); }

/* Unselected icons - shared background positions */
.i-1 { background-position: 0 113px; }
.i-2 { background-position: -114px 113px; }
.i-3 { background-position: -228px 113px; }
.i-4 { background-position: -342px 113px; }
.i-5 { background-position: -456px 113px; }
.i-6 { background-position: -570px 113px; }

/* Selected (colored) icons */
.i-1.selected { background-position: 0 0; }
.i-2.selected { background-position: -114px 0; }
.i-3.selected { background-position: -228px 0; }
.i-4.selected { background-position: -342px 0; }
.i-5.selected { background-position: -456px 0; }
.i-6.selected { background-position: -570px 0; }


.datetime select {
  display: inline-block;
  width: auto;
  min-width: 75px;
  margin-right: 0.5rem;
}
.datetime #entry_datetime_1i, .datetime #entry_datetime_2i, .datetime #entry_datetime_3i {
  display: inline-block;
  margin-bottomx: 1rem;
}
.datetime #entry_datetime_4i, .datetime #entry_datetime_5i {
  display: inline-block;
}
.datetime select + select:nth-child(4) {
  margin-top: 1rem;
}
.nav-link, .font-nunito {
  font-family: Nunito, sans-serif;
}
@media (max-width: 500px) {
  .person-bg .navbar-brand {
    font-size:30px;
  }
}