/*
 * Button SoT (do not mass-rename domain variants like .varianti-btn-* / .btn-row-*):
 *   Toolbar:        .fe-btn*
 *   Modal footer:   .btn-save / .btn-cancel
 *   Inline edit row:.prev-btn-*  (incl. .prev-btn-action in tables.css)
 */
/* Buttons — neutral default; use .fe-btn-primary / .btn-save for filled actions */
button {
  color: var(--color-text);
  background-color: var(--color-white);
  background-image: none;
  cursor: pointer;
  border: var(--border-width) solid var(--color-border-medium);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-normal),
              border-color var(--transition-normal),
              color var(--transition-normal),
              box-shadow var(--transition-normal);
  padding: calc(var(--spacing-sm) - 2px) calc(var(--spacing-lg) - 2px);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  font-family: var(--font-family);
}

button:hover {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: none;
  transform: none;
}

button:active {
  transform: none;
}

.btn-cancel {
  padding: 8px 16px;
  border: 1px solid var(--color-border-medium);
  background: var(--color-white);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text);
  font-family: var(--font-family);
}

.btn-cancel:hover {
  border-color: var(--color-text-lighter);
}

.btn-save {
  padding: 8px 16px;
  border: none;
  background: var(--color-primary);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  font-family: var(--font-family);
}

.btn-save:hover {
  background: var(--color-primary-dark);
}

.btn-save:disabled,
.btn-save[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.fe-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  border: none;
  line-height: 1;
}

.fe-btn-primary {
  background: var(--color-primary);
  color: #fff;
}

.fe-btn-primary:hover {
  background: var(--color-primary-dark);
  box-shadow: var(--shadow-sm);
}

.fe-btn-secondary {
  background: var(--color-white);
  color: var(--color-text);
  border: 1px solid var(--color-border-medium);
}

.fe-btn-secondary:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.fe-btn:disabled,
.fe-btn[disabled] {
  background: var(--color-bg-gray);
  color: var(--color-text-lighter);
  border: 1px solid var(--color-border-medium);
  cursor: not-allowed;
  opacity: 1;
  box-shadow: none;
  pointer-events: none;
}

.fe-btn:disabled:hover,
.fe-btn[disabled]:hover {
  background: var(--color-bg-gray);
  color: var(--color-text-lighter);
  border-color: var(--color-border-medium);
}

.fe-btn-primary:disabled,
.fe-btn-primary[disabled] {
  background: var(--color-bg-gray-dark);
  border: none;
}

.fe-btn:active {
  transform: none;
}

.fe-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-family);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1.4;
  white-space: nowrap;
}

.fe-btn-ghost:hover {
  background: var(--color-bg-light);
  border-color: var(--color-border-medium);
  color: var(--color-text);
}

.fe-btn-sm {
  padding: 4px 10px;
  font-size: 11px;
  line-height: 1.3;
}

@media (max-width: 600px) {
  button:not(.fe-btn-sm),
  .btn-save,
  .btn-cancel,
  .fe-btn,
  .fe-btn-primary {
    min-height: 44px;
  }
}