/* edit-tiers.css */

/*───────────────────────────────────────────────────────────────────────────────
  Form container
───────────────────────────────────────────────────────────────────────────────*/
.edit-tiers-form {
    --edit-tiers-radius: 0.5rem;

    overflow-y: auto;
    max-width:          50vw;
    max-height: 62vh;
    padding:            1.5rem;
    background-color:   var(--card-bg-color);
    border:             1px solid var(--card-border-color);
    border-radius:      var(--edit-tiers-radius);
    box-shadow:         0 2px 4px rgba(var(--shadow-rgb), 0.1);
}

/*───────────────────────────────────────────────────────────────────────────────
  Heading
───────────────────────────────────────────────────────────────────────────────*/
.edit-tiers-heading {
    font-size:      1.75rem;
    font-weight:    600;
    color:          var(--text-color);
    margin-bottom:  1.5rem;
    text-align:     center;
}

/*───────────────────────────────────────────────────────────────────────────────
  Each tier row
───────────────────────────────────────────────────────────────────────────────*/
.edit-tiers-tier-item {
    display:          block;
    padding:          0.75rem;
    margin-top:    1rem;
    background-color: var(--surface-tier-row);
    border:           1px solid var(--color-border-soft);
    border-radius:    var(--edit-tiers-radius);
}

/*───────────────────────────────────────────────────────────────────────────────
  Tier label
───────────────────────────────────────────────────────────────────────────────*/
.edit-tiers-tier-label {
    display:       block;
    font-weight:   500;
    margin-bottom: 0.5rem;
    color:         var(--text-color);
}

/*───────────────────────────────────────────────────────────────────────────────
  Input + delete-button wrapper
───────────────────────────────────────────────────────────────────────────────*/
.edit-tiers-tier-group {
    display:       flex;
    align-items:   center;
}

/*───────────────────────────────────────────────────────────────────────────────
  Text input
───────────────────────────────────────────────────────────────────────────────*/
.edit-tiers-input {
    flex:           1;
    padding:        0.5rem;
    font-size:      1rem;
    border:         1px solid var(--color-border);
    border-radius:  var(--edit-tiers-radius);
}

/*───────────────────────────────────────────────────────────────────────────────
  Delete-tier button
───────────────────────────────────────────────────────────────────────────────*/
.edit-tiers-btn-delete {
    margin-left:         0.5rem;
    padding:             0.5rem 1rem;
    font-size:           1rem;
    background-color:    var(--color-danger);
    color:               var(--button-text-color);
    border:              none;
    border-radius:       var(--edit-tiers-radius);
    cursor:              pointer;
    transition:          background-color 0.3s ease;
}
.edit-tiers-btn-delete:hover,
.edit-tiers-btn-delete:focus {
    background-color: var(--color-danger-hover);
}

/*───────────────────────────────────────────────────────────────────────────────
  Add-new and Save buttons (primary)
───────────────────────────────────────────────────────────────────────────────*/
.edit-tiers-btn-add,
.edit-tiers-btn-save {
    display:             inline-block;
    padding:             0.5rem 1rem;
    font-size:           1rem;
    border:              1px solid var(--button-border-color);
    background-color:    var(--button-bg-color);
    color:               var(--button-text-color);
    border-radius:       var(--edit-tiers-radius);
    cursor:              pointer;
    transition:          background-color 0.3s ease, color 0.3s ease;
    text-decoration:     none;
    margin-bottom:       1rem;
}
.edit-tiers-btn-add:hover,
.edit-tiers-btn-add:focus,
.edit-tiers-btn-save:hover,
.edit-tiers-btn-save:focus {
    background-color: var(--button-hover-color);
    color:            var(--button-hover-text-color);
}

.edit-tiers-form::-webkit-scrollbar {
  width: 6px;
}
.edit-tiers-form::-webkit-scrollbar-thumb {
  background: rgba(var(--scrollbar-thumb-rgb), var(--scrollbar-thumb-alpha));
  border-radius: 3px;
}

.link-button {
  background: none;
  border: 0;
  padding: 0;
  color: var(--bs-link-color, #0d6efd);
  cursor: pointer;
}
.link-button svg { 
  vertical-align: -0.125em;
  margin-right: .25rem;
}
.link-button:hover,
.link-button:focus {
  text-decoration: underline;
  color: var(--bs-link-hover-color, #0a58ca);
  outline: none;
}
.link-button:focus-visible { 
  outline: auto 1px; 
}