#devise-card a {
  color: #1976D2;
  text-decoration: none;
  display: inline-block;
  margin-top: 0.5rem;
}
#devise-card a:hover {
  text-decoration: underline;
}
/*
 * 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.
 *
 *= require_tree .
 *= require_self
 */

/* Devise pages styling - a modern card layout with Tesla FSD branding */
.mb-0 { margin-bottom: 0; }
body.devise-layout {
  /* light gradient background */
  background: #eef2f3;
  background: linear-gradient(135deg, #eef2f3 0%, #8e9eab 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  font-family: 'Inter', sans-serif;
  padding: 1rem;
}
#devise-card {
  background-color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 2rem;
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
}
#devise-card h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: #333333;
  font-size: 1.5rem;
  font-weight: 600;
}
.field {
  margin-bottom: 1rem;
}
.field label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 500;
  color: #555555;
}
/* form inputs narrower so they don't extend to card edges */
/* form text inputs narrower so they don't extend to card edges */
.field input[type="email"],
.field input[type="password"],
.field input[type="text"] {
  width: 90%;
  margin: 0 auto;
  /* slightly reduced padding with larger font for better readability */
  padding: 0.75rem;
  font-size: 1.125rem;
  line-height: 1.4;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}
/* checkbox styling inline */
.field input[type="checkbox"] {
  width: auto;
  margin: 0;
  vertical-align: middle;
}
/* label next to checkbox inline */
.field input[type="checkbox"] + label {
  display: inline-block;
  margin-left: 0.5rem;
  vertical-align: middle;
}
/* Keep checkbox label inline with the checkbox */
.devise-layout .field input[type="checkbox"] + label {
  display: inline-block;
  margin: 0 0 0 0.5rem;
  vertical-align: middle;
}
.actions {
  margin-top: 1.5rem;
}
.actions input[type="submit"] {
  width: 100%;
  background-color: #1976D2;
  border: none;
  color: #ffffff;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border-radius: 0.25rem;
  cursor: pointer;
}
.actions input[type="submit"]:hover {
  background-color: #0D47A1;
}

/* Form field focus state */
.devise-layout .field input:focus {
  outline: none;
  border-color: #1976D2;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.2);
}

/* Footer links grouping for Sign up and Forgot Password */
.devise-layout .devise-footer-group {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.devise-layout .devise-footer-group .left,
.devise-layout .devise-footer-group .right {
  flex: 1;
}
.devise-layout .devise-footer-group .right {
  text-align: right;
}
.devise-layout .devise-footer-group a {
  color: #1976D2;
  text-decoration: none;
}
.devise-layout .devise-footer-group a:hover {
  text-decoration: underline;
}
/* Fade-in animation for Devise card */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Apply fade-in to the card */
#devise-card {
  animation: fadeIn 0.4s ease both;
}
.alert {
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.25rem;
  box-sizing: border-box;
}
.alert ul {
  padding-left: 1.25rem;
  margin: 0.5rem 0;
}
.alert-success {
  background-color: #d4edda;
  color: #155724;
}
.alert-danger {
  background-color: #f8d7da;
  color: #721c24;
}

body {
  margin-top: 50px;
}

body.home-body {
	background-color : rgb(62, 66, 68);
	color : black;
}

body.home-body h1 {
	color : rgb(124,190,232);
}

.vehicles-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 0px;
  justify-content: center;
  padding: 20px;
}

.vehicle-card {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 15px;
  width: 300px;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vehicle-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.vehicle-image img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 20px;
  object-fit: cover;
  height: 121px;
  max-height: 200px;
}

.vehicle-details {
  text-align: left;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.vehicle-details h2 {
  color: #333;
  margin-bottom: 10px;
  font-size: 1.5em;
}

.vehicle-details p {
  margin: 8px 0;
  color: #555;
  font-size: 0.95em;
}

.vehicle-details strong {
  color: #333;
  font-weight: 600;
}

.vehicle-info {
  margin: 10px 0;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 8px;
  flex: 1;
}

.update-available {
  color: #28a745;
  font-weight: 500;
}

.vehicle-actions {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  width: 100%;
  text-align: center;
}

.release-notes-link {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.release-notes-link:hover {
  background-color: #0056b3;
  text-decoration: none;
}

.progress-bar-container {
  width: 100%;
  height: 22px;
  background-color: #e0e0e0;
  border-radius: 0.25rem;
  margin-bottom: 15px;
  position: relative;
}

.progress-bar {
  height: 100%;
  background-color: #4CAF50;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-percentage {
  color: white;
  font-weight: bold;
  font-size: 12px;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}

/* Software Update Progress Bars */
.software-update-progress-container {
  width: 100%;
  height: 24px;
  background-color: #6c757d;
  border-radius: 0.25rem;
  overflow: hidden;
  margin: 0.5rem 0;
  position: relative;
}

.software-update-progress {
  height: 100%;
  transition: width 0.3s ease;
  position: relative;
}

.software-update-progress.download {
  background-color: #007bff;
}

.software-update-progress.install {
  background-color: #fd7e14;
}

.software-update-percentage {
  color: white;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  z-index: 1;
  width: 100%;
  text-align: center;
  line-height: 1;
}

div.logo-container {
  text-align: center;
  width: 200px;
  margin : auto;
}

div.logo-container img {
  width: 200px;
}

div.account-info {
  text-align: center;
  color : white;
  margin-top: 20px;
  margin-bottom: 30px;
}

div.who-am-i {
  padding : 10px;

}

h2.vehicle-separator-heading {
  margin-left : 20px;
  color : white
}

h3.vehicle-separator-subheading {
  margin-left : 20px;
  font-size : 0.9em;
  color : #eee;
}

/* Profile Creation Form Enhancements */
.profile-card {
  border: none;
  border-radius: 0.75rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.profile-card .card-header {
  background-color: #ffffff;
  color: #212529;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
  padding: 2rem 1.5rem;
}

.profile-card .card-header h1 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: #0d6efd; /* darker brand blue */
}

.profile-card .card-header p {
  opacity: 0.9;
}

.profile-card .form-control {
  border-radius: 0.5rem;
}

.profile-card .btn-primary {
  background-image: linear-gradient(135deg, #0069d9 0%, #31a8ff 100%);
  border: none;
  transition: background-position 0.3s ease;
  background-size: 200% 200%;
}

.profile-card .btn-primary:hover {
  background-position: right center;
}

/* Profile pages background */
body.profile-body {
  /* Reuse the subtle dark tone used on home-body for visual consistency */
  background-color: rgb(62, 66, 68);
  color: black; /* keep default text colour for any elements rendered outside cards */
}