/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/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 styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 */

:root {
  --blue: #007ba7;
  /* These 2 Bootstrap overriedes are not working yet, but hopefully will in the version 6 */
  --bs-blue: var(--blue);
  --bs-primary: var(--blue);

  --blue-rgb: 0, 123, 167;
  --blue-hover: #118cb8;
  --yellow: #f8de7e;
  --red-google: #db3236;
  --green: #00A76C;
  --green-hover: #02BF7C;
  --btn-border-width: 1px;

  /* Bootstrap variables */
  --bs-border-radius: 0rem; /* this actually works! */
  --bs-primary-rgb: var(--blue-rgb); /* this works on bg-primary */
}

.green {
  color: var(--green);
}

/* Show different buttons when form is submitting */
button .show-when-enabled { display: initial; }
button .show-when-disabled { display: none; }
button[disabled] .show-when-enabled { display: none; }
button[disabled] .show-when-disabled { display: initial; }

@media print {
  /* Make sure printing in dark mode does not have light text on white background */
  :root {
    --bs-body-bg: #fff;
    --bs-body-color: #000;
    --bs-link-color: #000;
    --bs-link-hover-color: #000;
  }

  th, td, .btn, .badge {
    color: unset !important;
  }

  body {
    font-family: 'Arial', Helvetica, sans-serif;
    margin: 1mm;
    width: 21cm;
    height: 29.7cm;
    background-color: unset !important;
  }

  .card {
    border: none !important;
    border-top: 1px solid #ccc !important;
    padding-left: 0;
    padding-right: 0;
  }
}

html {
  font-size: 15px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', serif;
}

/* Dark mode styles */
[data-bs-theme="dark"] body {
  background-color: #121212;
}

[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-light {
  background-color: unset !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple {
  background-color: unset !important;
  border-color: unset !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-selection__choice,
[data-bs-theme="dark"] .select2-container--default .select2-selection__rendered {
  color: unset !important;
  background-color: unset !important;
}

[data-bs-theme="dark"] .select2-dropdown {
  background-color: #212529 !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true] {
  background-color: black !important;
}

/* Light mode styles */
[data-bs-theme="light"] body {
  background-color: #fbfbfb;
}

[data-bs-theme="light"] .card-header {
  background-color: white;
}

a {
  color: var(--blue);
  text-decoration: none;
}

a:hover {
  color: #006285;
}

.cursor-move {
  cursor: move;
}

/* Override bootstrap defaults */
.btn-primary,
.btn-primary:focus
{
  background-color: var(--blue);
  border-color: var(--blue);
}

.btn-primary:hover,
.btn-primary:active
 {
  background-color: var(--blue-hover) !important;
  border-color: var(--blue-hover) !important;
}

.btn-success:active,
.btn-success {
  background-color: var(--green) !important;
  border-color: var(--green) !important;
}
.btn-success:hover{
  background-color: var(--green-hover) !important;
  border-color: var(--green-hover) !important;
}

.btn-outline-primary {
  border: var(--btn-border-width) solid var(--blue);
  color: var(--blue);
}

.btn-outline-primary:hover {
  background-color: var(--blue);
  border: var(--btn-border-width) solid var(--blue);
  color: white;
}

.card {
  border-color: var(--blue);
  border-width: 1px;
}

.border-primary {
  border: 1px solid var(--blue) !important;
}

.navbar {
  box-shadow: 0 0 5px #56555599;
  background-color: var(--blue);
}

.navbar-brand { padding: 0; }

.navbar-dark .navbar-nav .nav-link.active {
  color: var(--yellow);
}

.table-repero {
  border: 1px solid var(--blue);
}

.table-repero thead{
  border-bottom: 1px solid var(--blue);
}

.font-montserrat {
  font-family: 'Montserrat', serif;
}

.text-shadow {
  text-shadow: 2px 2px 4px #292929;
}

.bg-blue {
  background-color: var(--blue);
  color: white;
}

.bg-dark-blue {
  width: 100%;
  background-image: linear-gradient(#003B51, #003B51);
  background-size: 100% 85%;
  background-position: center top;
  background-repeat: no-repeat;
  color: white;
  padding-top: 50px;
}
.bg-medium-blue {
  background-color: #1B556A;
  color: white;
}


.bg-eee {
  background: #eee;
}

.pricing-free {
  background-color: #F6A356 !important;
  color: white;
}

.pricing-lite {
  background-color: #FF5959 !important;
  color: white;
}

.pricing-business {
  background-color: #1D7E74 !important;
  color: white;
}

.pricing-premium {
  background-color: #683F5B !important;
  color: white;
}

.pricing-ultimate {
  background-color: #094A61 !important;
  color: white;
}

.form-control, .form-select {
  border-radius: 3px;
}

/* Buttons */
.btn {
  /* NOTE: We cannot apply font-size on buttons, it breaks btn-sm btn-lg */
  border-radius: var(--btn-border-width);
  font-family: 'Montserrat', serif;
  font-weight: 500;
  text-transform: uppercase;
}

.btn-nav {
  border-radius: var(--btn-border-width);
  border-width: var(--btn-border-width);
  line-height: 20px;
  margin-top: 6px;
  padding: 4px;
  text-align: center;
}

.btn-yellow {
  background-color: var(--yellow);
  color: #383838 !important;
  box-shadow: 0 var(--btn-border-width) 5px #56555599;
}

.btn-yellow:hover {
  background-color: #d2bb66;
}

.btn-twitter {
  background: #1DA1F2;
  color: white;
}

.btn-twitter:hover {
  color: white;
  opacity: .8;
}

.btn-google {
  background: var(--red-google);
  color: white;
}

.btn-google:hover {
  background: var(--red-google);
  opacity: .7;
  color: white;
}

.text-blue {
  color: var(--blue);
}

.mt-300 {
  margin-top: 300px;
}

/* Overwrite bootstrap navbar color */
.navbar-dark .navbar-nav .nav-link {
  color: white;
}

/* Navbar link colors */
.navbar-inverse .navbar-nav .nav-link {
  color: white;
}

.turbo-progress-bar {
  background: #e26e6e;
}

.field_with_errors {
  color: red;
  display: inline;
}

.r-strike {
  text-decoration: line-through;
}

/* Select2 CSS */
.select2-container .select2-selection--single {
  border: 1px solid #ccc;
  height: 37px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 37px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  height: unset;
  left: unset;
  margin-left: unset;
  margin-top: unset;
  position: absolute;
  right: 10px;
  top: 50%;
  width: unset;
}

.carousel-caption {
  left: auto;
  margin-top: 20px;
  position: relative;
  right: auto;
}

.list-group-item.active {
  background-color: var(--blue);
  border-color: var(--blue);
}

.page-item.active .page-link {
  background-color: var(--blue);
  border-color: var(--blue);
}
.page-link {
  color: var(--blue);
}

/* The barcode reader creates an empty <canvas> element with a white background */
/* We want to hide it */
.drawingBuffer {
  display: none;
}

.js-user:hover {
  cursor: pointer;
  background-color: #eef4ff !important;
}
.selected-user{
  background-color: #eef4ff !important;
  border: 1px solid #007ba7 !important;
}

/* Calendar styles on /repairs/calendar */
.calendar-days{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.calendar-day {
  padding: 10px 5px;
  border: 1px solid #ddd;
}

@media screen and (max-width: 700px) {
  .calendar-days{
    grid-template-columns: 1fr;
  }
}