/* =========================================================
   MODALS / GLOBAL FORMS OVERRIDES
   ========================================================= */

/* ===============================
   1) GLOBAL: remove focus ring
   =============================== */
*:focus,
*:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Bootstrap elements that re-add focus styles */
.form-control:focus,
.form-select:focus,
.btn:focus,
.btn:focus-visible,
.navbar-toggler:focus,
.dropdown-toggle:focus,
.dropdown-item:focus,
a:focus,
a:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ===============================
   2) GLOBAL: SMALL inputs everywhere
   =============================== */
.form-control,
.form-select,
textarea {
  padding: 0.375rem 0.75rem !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  border-radius: 0.375rem !important;
}

.form-control,
.form-select {
  min-height: calc(1.5em + 0.75rem + 2px) !important;
}

textarea.form-control {
  min-height: auto !important;
}

/* ===============================
   3) MODALS: input border SITE PRIMARY
   =============================== */
#appFormModal .form-control,
#appFormModal .form-select,
#appFormModal textarea {
  border-color: var(--primary) !important;
}

#appFormModal .form-control:focus,
#appFormModal .form-select:focus,
#appFormModal textarea:focus {
  border-color: var(--primary) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ===============================
   8) DROPDOWN ITEMS (User Menu) - Force Primary
   =============================== */
.dropdown-item:active,
.dropdown-item.active {
  background-color: var(--primary) !important;
  color: #fff !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--primary) !important;
  background-color: rgba(0, 62, 74, 0.08) !important;
}

/* ===============================
   9) NAME CAPITALIZATION (Visual)
   =============================== */
#id_first_name, #id_last_name,
#id_nume, #id_prenume, #id_initiala_tata, #id_initiala_tatalui,
input[name="first_name"], input[name="last_name"],
input[name="nume"], input[name="prenume"],
input[name="initiala_tata"], input[name="initiala_tatalui"] {
  text-transform: capitalize !important;
}

/* ===============================
   3b) MODALS: Checkbox & Radio overrides
   =============================== */
#appFormModal .form-check-input:checked {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

#appFormModal .form-check-input:focus {
  border-color: var(--primary) !important;
  box-shadow: none !important;
  outline: none !important;
}

#appFormModal .form-check-input {
  cursor: pointer;
}

/* ===============================
   4) Password toggle (SHOW/HIDE) - centrat corect
   =============================== */

/* Wrapper-ul trebuie să fie relativ */
#appFormModal .position-relative {
  position: relative !important;
  display: block !important;
}

/* Inputul trebuie să lase loc pentru icon */
#appFormModal .form-control.pe-5,
.form-control.pe-5 {
  padding-right: 2.5rem !important;
}

/* Butonul ochiului: centrat vertical, mereu în interiorul inputului */
#appFormModal .password-toggle {
  position: absolute !important;
  top: 50% !important;
  right: 0.6rem !important;
  transform: translateY(-50%) !important;

  height: 28px !important;
  width: 28px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: transparent !important;
  border: none !important;
  padding: 0 !important;

  color: var(--primary) !important;
  cursor: pointer !important;

  z-index: 15 !important;
  line-height: 1 !important;
}

#appFormModal .password-toggle i,
.password-toggle i {
  font-size: 1rem;
}

#appFormModal .password-toggle:hover,
.password-toggle:hover {
  opacity: 0.85;
}

#appFormModal .password-toggle:focus,
#appFormModal .password-toggle:focus-visible,
.password-toggle:focus,
.password-toggle:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Mesajele de eroare: sub input, fără să influențeze poziția butonului */
#appFormModal .text-danger.small.mt-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0 !important;
  display: block !important;
  clear: both !important;
}

/* (opțional) dacă ai clasa asta în HTML, păstrează inputul “deasupra” */
#appFormModal .js-password-input {
  position: relative !important;
  z-index: 5 !important;
}

/* ===============================
   5) SITE PRIMARY helpers (NO Bootstrap primary)
   =============================== */
.bg-site-primary {
  background-color: var(--primary) !important;
}

.btn-site-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

.btn-site-primary:hover,
.btn-site-primary:active {
  filter: brightness(0.92);
  color: #fff !important;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.btn-site-primary:focus,
.btn-site-primary:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ===============================
   6) CONFIRM MODAL: butoane egale (Nu / Da)
   =============================== */
#appConfirmModal .modal-footer {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 0.5rem !important;
}

#appConfirmModal .btn-eq {
  width: 72px !important;
  min-width: 72px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  flex: 0 0 72px !important;
}

/* ===============================
   USER AVATAR – REAL CIRCLE + NO RING
   =============================== */
.user-avatar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  line-height: 1;
}

.user-avatar-icon .avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;

  border-radius: 9999px;
  border: 2px solid var(--primary);
  background-color: #fff;
  color: var(--primary);

  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
}

.user-avatar-icon:hover .avatar-initials {
  background-color: rgba(0, 0, 0, 0.03);
}

.user-avatar-icon:focus,
.user-avatar-icon:focus-visible,
.user-avatar-icon .avatar-initials:focus,
.user-avatar-icon .avatar-initials:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}