/* ==== Page-level action button layout ==== */
.page-action-buttons {
    margin-top: 2rem;
    margin-bottom: 2rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center; /* estää flex-itemien venymisen eri korkeuksille */
}
  
  .page-action-buttons .btn {
    min-width: 120px;
    padding: 0.5rem 1rem;   /* yhtenäinen korkeus kaikille toimintopainikkeille */
    font-size: 1rem;
    line-height: 1.5;
  }

  /* Ensure forms inside action-button rows align evenly with buttons */
  .page-action-buttons form {
      margin: 0;
  }



/* === Unified action buttons for consistent UI across pages === */
.btn-action {
  border-radius: 1rem;
  padding: 0.375rem 0.75rem;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition:
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out,
    transform 0.08s ease-in-out;
  border: 1px solid transparent;

  /* Uiverse-tyylinen 3D-perusvarjo */
  box-shadow:
    0 6px 0 rgba(0, 0, 0, 0.18),      /* “reuna” napin alla */
    0 10px 18px rgba(0, 0, 0, 0.25);  /* pehmeä pudotusvarjo */
  transform: translateY(0);
}


.btn-md {
  font-size: 1rem;
  padding: 0.5rem 1rem;
}

.btn-wide {
  min-width: 8rem;
}

.btn-pill {
  border-radius: 50rem;
}

.btn-action .bi {
  margin-right: 0.5rem;
  font-size: 1.25rem;
}

.btn-action:focus-visible {
  outline: 3px solid #007bff;
  outline-offset: 2px;
}

.btn-action:disabled,
.btn-action.disabled {
  opacity: 0.65;
  cursor: not-allowed;
}


.btn-back,
.btn-transfer {
  background-color: #6c757d;
  border-color: #6c757d;
  color: #fff;
}

.btn-back:hover,
.btn-back:focus-visible,
.btn-transfer:hover,
.btn-transfer:focus-visible {
  background-color: #5b646d; /* hieman tummempi hoverissa */
  border-color: #5b646d;
  color: #fff;
}

.btn-back:active,
.btn-transfer:active {
  background-color: #4f575f; /* vielä aavistuksen tummempi active-tilassa */
  border-color: #4f575f;
  color: #fff;
}

/* Perus sininen toimintonappi – uusi ensisijainen luokka */
.btn-basic {
  background-color: #517891;
  border-color: #517891;
  color: #fff;
}

/* Hover- ja active-tilat perusnapille – estetään Bootstrapin .btn:hover
   viemästä taustaväriä ja tekstiväriä valkoiseksi/mustaksi */
.btn-basic:hover,
.btn-basic:focus-visible {
  background-color: #476a80; /* hieman tummempi sininen hoverissa */
  border-color: #476a80;
  color: #fff;
}

.btn-basic:active {
  background-color: #3f5f72;
  border-color: #3f5f72;
  color: #fff;
}

/* Vanhoja luokkia säilytetään toistaiseksi taaksepäinyhteensopivuuden vuoksi.
   Uusi koodi käyttää vain .btn-basic-luokkaa. */
.btn-edit,
.btn-service {
}

.btn-sell {
  background-color: #28a745;   /* Bootstrap vihreä */
  border-color: #28a745;
  color: #fff;
}

.btn-unsell {
  background-color: #ffc107;
  border-color: #ffc107;
  color: #212529;
}

.btn-stolen {
  background-color: #ffc107;
  border-color: #ffc107;
  color: #212529;
}

/* Hover- ja active-tilat keltaisille varoituspainikkeille – estetään Bootstrapin
   .btn-warning:hover tai .btn-danger:hover viemästä värejä eri sävyyn */
.btn-unsell:hover,
.btn-unsell:focus-visible,
.btn-stolen:hover,
.btn-stolen:focus-visible {
  background-color: #e0ac06; /* hieman tummempi keltainen hoverissa */
  border-color: #e0ac06;
  color: #212529;
}

.btn-unsell:active,
.btn-stolen:active {
  background-color: #c99905;
  border-color: #c99905;
  color: #212529;
}
.btn-unstolen {
  background-color: #28a745;   /* Bootstrap vihreä */
  border-color: #28a745;
  color: #fff;
}

/* Hover- ja active-tilat vihreälle varastetun-merkinnän poistopainikkeelle */
.btn-unstolen:hover,
.btn-unstolen:focus-visible {
  background-color: #218838;  /* hieman tummempi vihreä hoverissa */
  border-color: #218838;
  color: #fff;
}

.btn-unstolen:active {
  background-color: #1e7e34;
  border-color: #1e7e34;
  color: #fff;
}

.btn-delete {
  background-color: #dc3545;
  border-color: #dc3545;
  color: #fff;
}

.btn-action:hover {
  filter: brightness(96%);
  transform: translateY(-1px);
  box-shadow:
    0 8px 0 rgba(0, 0, 0, 0.20),
    0 14px 22px rgba(0, 0, 0, 0.28);
}

.btn-action:active {
  transform: translateY(2px);
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.22),
    0 6px 10px rgba(0, 0, 0, 0.25);
}