.invalid-feedback.feedback-display,
.valid-feedback.feedback-display {
  display: block;
}
button.pseudo-select {
  border-color: #d4d7e5;
  text-align: left;
}
button.pseudo-select.is-valid:not(:required):not(.btn):not(.form-check-input) {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%2322c55e'%3e%3cpath d='M10 1.667c-4.595 0-8.333 3.738-8.333 8.333S5.405 18.333 10 18.333s8.333-3.738 8.333-8.333S14.595 1.667 10 1.667zm0 15c-3.676 0-6.667-2.991-6.667-6.667S6.324 3.333 10 3.333 16.667 6.324 16.667 10 13.676 16.667 10 16.667zm-1.668-5.345L6.416 9.41 5.24 10.59l3.094 3.088 5.588-5.588-1.178-1.178-4.412 4.412z'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center, center right 3rem !important;
  background-size: 20px 20px !important;
  padding-right: 2.5rem !important;
  border-color: var(--si-form-valid-border-color, #198754) !important;
}
button.pseudo-select.is-invalid:not(:required):not(.btn):not(.form-check-input) {
  background-repeat: no-repeat !important;
  padding-right: 2.5rem !important;
  border-color: var(--si-form-invalid-border-color, #dc3545) !important;
}

input#uploadedAvatar {
  display: none;
}
.project-edit-preview {
  margin-bottom: 1.5rem;
}

.card.card-unactive {
  background-color: #f5f5f5;
}

.btn-add-favorites button {
  display: none;
}

.btn-add-favorites button.liked {
  color: #17ac4e;
}

.project-detail-author .company-name {
  float: right;
}

#modalCompanyDetail .modal-body .img,
#modalUserDetail .modal-body .img {
  float: left;
  width: 200px;
  height: 200px;
  background-size: contain;
  margin: 0 20px 10px 0;
  background-repeat: no-repeat;
}

article.project-item-list a.show-company-detail {
  cursor: pointer;
}

#modalProjectApplications #applicationsTable td {
  padding: 0.25rem 0.75rem;
}
#modalProjectApplications #applicationsTable td span {
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
#modalApplyProject .sent-ok-feedback {
  display: none;
  padding: 20px 0 30px;
  text-align: center;
  color: #167a3b;
  font-size: 1.1em;
}
#modalApplyProject .sent-fail-feedback {
  display: none;
  padding: 10px 0 20px;
  text-align: center;
  color: #e80101;
  font-size: 0.9em;
}

:root {
  --bg: #f8fafc; /* slate-50 */
  --panel: #ffffff; /* white */
  --ink: #0f172a; /* slate-900 */
  --muted: #64748b; /* slate-500 */
  --primary: #2563eb; /* blue-600 */
  --ring: #93c5fd; /* blue-300 */
  --surface: #ffffff; /* white */
  --border: #cbd5e1; /* slate-300 */
  --chip: #e2e8f0; /* slate-200 */
}

.wrap {
  width: min(980px, 92%);
  margin: 64px auto;
}
header {
  text-align: center;
}
h1 {
  margin: 0 0 8px;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.02em;
}
p.lead {
  margin: 0;
  color: var(--muted);
  font-size: clamp(14px, 1.8vw, 16px);
}

#modalChat div.chat-top-menu {
  margin: 0 0 0 40px;
}
#modalChat .chat-top-menu h6 {
  margin: 0 0 0 20px;
  cursor: pointer;
}
a.normal-link {
  text-decoration: none;
}

/* Custom badge colors */
.bg-purple {
  background-color: #9333ea !important;
  color: #ffffff !important;
}

.badge.bg-purple {
  background-color: #9333ea !important;
  color: #ffffff !important;
}

.bg-orange {
  background-color: #f97316 !important;
  color: #ffffff !important;
}

.badge.bg-orange {
  background-color: #f97316 !important;
  color: #ffffff !important;
}

.bg-teal {
  background-color: #14b8a6 !important;
  color: #ffffff !important;
}

.badge.bg-teal {
  background-color: #14b8a6 !important;
  color: #ffffff !important;
}

.bg-brown {
  background-color: #92400e !important;
  color: #ffffff !important;
}

.badge.bg-brown {
  background-color: #92400e !important;
  color: #ffffff !important;
}

/* Tutor avatar - force circular shape */
.tutor-avatar-circle {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  object-fit: cover !important;
  object-position: top center !important;
  border-radius: 50% !important;
}