/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Card visibility improvements - add subtle border to make cards stand out from background */
.card {
  border: 1px solid rgb(229, 231, 235); /* gray-200 - subtle but visible */
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05); /* subtle shadow for depth */
}

/* Override primary button colors for better text contrast */
.btn-primary {
  background-color: rgb(55, 65, 81) !important;  /* gray-700 - dark gray instead of bright blue */
  border-color: rgb(55, 65, 81) !important;
  color: white !important;
}

.btn-primary:hover {
  background-color: rgb(31, 41, 55) !important;  /* gray-800 - slightly darker on hover */
  border-color: rgb(31, 41, 55) !important;
}

/* Input fields - slightly thicker borders for better visibility */
.input,
.textarea,
.select {
  border-width: 1.5px;
  border-color: rgb(209, 213, 219); /* gray-300 - more visible than default */
}

.input:focus,
.textarea:focus,
.select:focus {
  border-color: rgb(107, 114, 128); /* gray-500 - clear focus state */
  border-width: 2px;
}